Skip to content

Pills

Components5.8.2

Pills

import Pills from '@semcore/ui/pills';
typePillsProps
NeighborLocationProps & BoxProps & {...}
PropertyDescription
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

Value for the selected pill

defaultValue

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 />;
typePillProps
BoxProps & NeighborItemProps & KeyboardFocusProps & {...}
PropertyDescription
value

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 />;