Pills

Components

5.8.2

Design A11yWCAG-AA API Example Changelog

Pills

import Pills from '@semcore/ui/pills';

type

PillsProps

NeighborLocationProps & BoxProps & {...}

Property	Description
size `"l" \| "m"`	Pills size
disabled `boolean`	Disabled state
onChange `((value: PillsValue, e: React.SyntheticEvent) => void) \| React.Dispatch`	Called when the selection is changed
value `PillsValue`	Value for the selected pill
defaultValue `PillsValue`	Default value for the selected pill
behavior `"tabs" \| "radio"` = tabs	Sets semantic role for corresponding behavior, when set to `radio` pressing left and right arrows selects corresponding sibling pill. It's recommended to use `radio` behavior in forms while `tabs` behavior for navigation and layout.

Pill.Item

import Pills from '@semcore/ui/pills';
<Pills.Item />;

type

PillProps

BoxProps & NeighborItemProps & KeyboardFocusProps & {...}

Property	Description
value `PillsValue`	Pill value
disabled `boolean`	Disabled state
selected `boolean`	Selected state
addonLeft `React.ElementType`	Left addon text
addonRight `React.ElementType`	Right addon tag

Pill.Item.Addon

The addon inside the pill (most often it is an icon) places the correct indent units depending on the size. Takes all properties of the Box.

import Pills from '@semcore/ui/pills';
<Pills.Item.Addon />;

Pill.Item.Text

Plain text, it sets correct indents depending on the size. If only text with no addons is used in the pill, it will be wrapped in Pills.Item.Text automatically. Takes all properties of the Box.

import Pills from '@semcore/ui/pills';
<Pills.Item.Text />;