Pill Toggle Group

A sleek toggle group with pill styling and smooth sliding animations.

Import

Usage

Component Features

Supported

  • -Sizes (sm, md, lg)
  • -Disabled states
  • -Custom styling via className

Not Supported

  • -No variants prop (fixed ghost style)
  • -No colors prop (fixed lavender color)
  • -No radius prop (fixed full/pill shape)

Sizes

Disabled

Data Attributes

  • -
    data-slot="pill-toggle-group"Pill toggle group container identifier
  • -
    data-state="on" | "off"Indicates whether an item is selected or not
  • -
    data-value="string"Contains the value of each item

Accessibility

Keyboard Support

  • -
    TabMoves focus to the next focusable element
  • -
    SpaceActivates the pill toggle item
  • -
    EnterActivates the pill toggle item

ARIA Attributes

  • -
    role="radiogroup"Applied to the pill toggle group container
  • -
    role="radio"Applied to each pill toggle item
  • -
    aria-checkedIndicates the selected state of each item

PillToggleGroup Props

AttributeTypeDefaultDescription
valuestring-Controlled value of the selected item.
defaultValuestring-Default value for uncontrolled component.
onValueChange(value: string) => void-Callback when the selected value changes.
size'sm' | 'md' | 'lg'-Size of the pill toggle items.
disabledbooleanfalseWhether all items in the group are disabled.

PillToggleGroupItem Props

AttributeTypeDefaultDescription
valuestring-The unique value for this pill toggle item (required).
size'sm' | 'md' | 'lg'-Size of this specific item (overrides group size).
disabledbooleanfalseWhether this specific item is disabled.