Go Main page
Go Main page

Web components

Foundations
Components
About
cover

components

Pill Selector V2

v.1.0.0 | Saturn
Healthy
StorybookGithubFigma

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

This component will replace the current PillSelector component in the next major version.

import { PillSelectorV2 } from '@kubit-ui-web/react-components'
123456789
<PillSelectorV2
  variant="DEFAULT"
  pills={[
    { label: { content: 'Pill 1' }, icon: { icon: 'ICON_PLACEHOLDER' }, value: 'value 1' },
    { label: { content: 'Pill 2' }, icon: { icon: 'ICON_PLACEHOLDER' }, value: 'value 2' },
    { label: { content: 'Pill 3' }, icon: { icon: 'ICON_PLACEHOLDER' }, value: 'value 3' },
    { label: { content: 'Pill 4' }, icon: { icon: 'ICON_PLACEHOLDER' }, value: 'value 4' },
  ]}
/>

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.

We have set this predefined style for its quick use, access them through the variant prop.

123456789
<PillSelectorV2
  variant="DEFAULT"
  pills={[
    { label: { content: 'Pill 1' }, value: 'value 1' },
    { label: { content: 'Pill 2' }, value: 'value 2' },
    { label: { content: 'Pill 3' }, value: 'value 3' },
    { label: { content: 'Pill 4' }, value: 'value 4' },
  ]}
/>

Size

Kubit offers predefined size options such as LARGE and SMALL, enhancing hierarchy and adaptation of pills. This setting can be customize by using the style setting.

12345678910
<PillSelectorV2
  variant="DEFAULT"
  size="LARGE"
  pills={[
    { label: { content: 'Pill 1' }, value: 'value 1' },
    { label: { content: 'Pill 2' }, value: 'value 2' },
    { label: { content: 'Pill 3' }, value: 'value 3' },
    { label: { content: 'Pill 4' }, value: 'value 4' },
  ]}
/>

Pills

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

  • variant: variant of the pill
  • size: size of the pill
  • ctv: object used for update variant styles
  • disabled: indicates the pill is disabled
  • label: label of the pill
  • icon: icon of the pill
  • value: inner input value
  • dataTestId: test id
123456789
<PillSelectorV2
  variant="DEFAULT"
  pills={[
    { label: { content: 'Pill 1' }, icon: { icon: 'ICON_PLACEHOLDER' }, value: 'value 1' },
    { label: { content: 'Pill 2' }, icon: { icon: 'ICON_PLACEHOLDER' }, value: 'value 2' },
    { label: { content: 'Pill 3' }, icon: { icon: 'ICON_PLACEHOLDER' }, value: 'value 3' },
    { label: { content: 'Pill 4' }, icon: { icon: 'ICON_PLACEHOLDER' }, value: 'value 4' },
  ]}
/>

Type

Set the type prop to indicates whether the pills behaves as a input radio or checkbox

12345678910
<PillSelectorV2
  variant="DEFAULT"
  type={PillSelectorTypeV2.SELECTOR_SIMPLE}
  pills={[
    { label: { content: 'Pill 1' }, value: 'value 1' },
    { label: { content: 'Pill 2' }, value: 'value 2' },
    { label: { content: 'Pill 3' }, value: 'value 3' },
    { label: { content: 'Pill 4' }, value: 'value 4' },
  ]}
/>

Value and default value

When type is SELECTOR_MULTIPLE, the defaultSelected prop is an array of pill values that will be selected by default.

12345678910
<PillSelectorV2
  variant="DEFAULT"
  pills={[
    { label: { content: 'Pill 1' }, value: 'value 1' },
    { label: { content: 'Pill 2' }, value: 'value 2' },
    { label: { content: 'Pill 3' }, value: 'value 3' },
    { label: { content: 'Pill 4' }, value: 'value 4' },
  ]}
  defaultValue={['value 2']}
/>

When type is SELECTOR_SIMPLE, the defaultSelected prop is a value of the pill selected by default.

12345678910
<PillSelectorV2
  variant="DEFAULT"
  type="SELECTOR_SIMPLE"
  pills={[
    { label: { content: 'Pill 1' }, value: 'value 1' },
    { label: { content: 'Pill 2' }, value: 'value 2' },
    { label: { content: 'Pill 3' }, value: 'value 3' },
    { label: { content: 'Pill 4' }, value: 'value 4' },
  ]}
  defaultValue="value 2"

When Controlled use value instead of defaultValue

Selected icon

The selectedIcon prop is an object that allows you to set the icon that will be displayed when a pill is selected.

12345678910
<PillSelectorV2
  variant="DEFAULT"
  pills={[
    { label: { content: 'Pill 1' }, value: 'value 1' },
    { label: { content: 'Pill 2' }, value: 'value 2' },
    { label: { content: 'Pill 3' }, value: 'value 3' },
    { label: { content: 'Pill 4' }, value: 'value 4' },
  ]}
  defaultValue={['value 2']}
  selectedIcon={{icon: 'ICON_PLACEHOLDER'}}

Disabled

The disabled prop is a boolean that indicates all pills are disabled.

12345678910
<PillSelectorV2
  variant="DEFAULT"
  pills={[
    { label: { content: 'Pill 1' }, value: 'value 1' },
    { label: { content: 'Pill 2' }, value: 'value 2' },
    { label: { content: 'Pill 3' }, value: 'value 3' },
    { label: { content: 'Pill 4' }, value: 'value 4' },
  ]}
  disabled={true}
/>
Pill SelectorAccessibility
Pill Selector V2Design Specs