Go Main page
Go Main page

Web components

Foundations
Components
About
cover

components

Pill Selector

v.1.0.0 | Saturn
Healthy
StorybookGithubFigma

Selector that allows the user to choose between all the available options.

This component will be replaced by the new PillSelectorV2 in the next major version.

import { PillSelector } from '@kubit-ui-web/react-components'
12345678910
<PillSelectorUnControlled
  variant="DEFAULT"
  pillVariant="PILL_SELECTOR"
  pillSize="LARGE"
  pills={[
    { label: 'pill1', value: 1 },
    { label: 'pill2', value: 2 },
    { label: 'pill3', value: 3 },
  ]}
/>

For utilizing a single pill, consider checking out the pill component.

Variant

In Kubit Design System, users have the freedom to generate variants for each component according to their needs. While predefined variants are provided as examples, they can be modified or new ones can be added to align with the specific requirements of each project.

variant along with the pillVariant and pillSize prop are used to customize the appearance of the pills.

We have set this predefined style for its quick use.

import { PillSelector } from '@kubit-ui-web/react-components'
12345678910
<PillSelectorUnControlled
  variant="DEFAULT"
  pillVariant="PILL_SELECTOR"
  pillSize="LARGE"
  pills={[
    { label: 'pill1', value: 1 },
    { label: 'pill2', value: 2 },
    { label: 'pill3', value: 3 },
  ]}
/>

Pills

The pills prop is an array of pills. For each pill you can set the following properties:

  • value: inner input value
  • label: text to be displayed
  • disabled: if the pill is disabled
  • decorativeIcon: icon to be displayed
  • selectedIcon: icon to be displayed when the pill is selected
  • aria-label: aria-label for the pill
  • aria-checked: aria-checked for the pill
  • aria-labelledby: aria-labelledby for the pill
  • aria-describedby: aria-describedby for the pill
  • aria-pressed: aria-pressed for the pill
  • aria-disabled: aria-disabled for the pill
12345678910
<PillSelectorUnControlled
  variant="DEFAULT"
  pillVariant="PILL_SELECTOR"
  pillSize="LARGE"
  pills={[
    { label: 'pill1', value: 1, selectedIcon: { icon: 'ICON_PLACEHOLDER' } },
    { label: 'pill2', value: 2, disabled: true },
    { label: 'pill3', value: 3 },
  ]}
/>

Multiple

Set the multiSelect prop to allow user select more than one pill (default false). Internally, when multiSelect is set to true, the inner input will be a checkbox instead of a radio button.

12345678910
<PillSelectorUnControlled
  variant="DEFAULT"
  pillVariant="PILL_SELECTOR"
  pillSize="LARGE"
  multiSelect={true}
  pills={[
    { label: 'pill1', value: 1 },
    { label: 'pill2', value: 2 },
    { label: 'pill3', value: 3 },
  ]}

Default Selected

The defaultSelected prop is an array of pill values that will be selected by default.

12345678910
<PillSelectorUnControlled
  variant="DEFAULT"
  pillVariant="PILL_SELECTOR"
  pillSize="LARGE"
  multiSelect={true}
  defaultSelected={['1', '3']}
  pills={[
    { label: 'pill1', value: 1 },
    { label: 'pill2', value: 2 },
    { label: 'pill3', value: 3 },
PillAccessibility
Pill SelectorDesign Specs