Stalk UI

Component

Toggle

A two-state button for inline preferences and toolbar controls.

Install

Run the CLI to copy the source into your project.

pnpm dlx @stalk-ui/cli add @stalk-ui/toggle

Examples

Live previews render through the docs app's PandaCSS codegen.

Theme
<Toggle aria-label="Bold">B</Toggle>
Theme
<ToggleGroup type="single" defaultValue="left" aria-label="Alignment" attached>
  <ToggleGroupItem value="left" aria-label="Left">
    L
  </ToggleGroupItem>
  <ToggleGroupItem value="center" aria-label="Center">
    C
  </ToggleGroupItem>
  <ToggleGroupItem value="right" aria-label="Right">
    R
  </ToggleGroupItem>
</ToggleGroup>
Theme
<ToggleGroup type="multiple" defaultValue={['bold']} aria-label="Formatting">
  <ToggleGroupItem value="bold" aria-label="Bold">
    B
  </ToggleGroupItem>
  <ToggleGroupItem value="italic" aria-label="Italic">
    I
  </ToggleGroupItem>
  <ToggleGroupItem value="underline" aria-label="Underline">
    U
  </ToggleGroupItem>
</ToggleGroup>

Props

Public component props extracted from the source TypeScript types.

PropTypeRequiredDefaultDescription
`radius``ToggleRadius`No--
`size``ToggleSize`No--
`tone``ToggleTone`No-Selects the semantic color palette used when the toggle is on.
`variant``ToggleVariant`No--
PropTypeRequiredDefaultDescription
`radius``ToggleRadius`No-Override inherited group settings on a per-item basis.
`size``ToggleSize`No--
`variant``ToggleVariant`No--
PropTypeRequiredDefaultDescription
`type``'multiple'`Yes--
`value``string[]`No--
`defaultValue``string[]`No--
`onValueChange``(value: string[]) => void`No--
PropTypeRequiredDefaultDescription
`attached``boolean`No-When true, items sit flush against each other forming a segmented control.
`radius``ToggleRadius`No--
`size``ToggleSize`No--
`tone``ToggleTone`No-Selects the semantic color palette used when an item is on.
`variant``ToggleVariant`No--
PropTypeRequiredDefaultDescription
`type``'single'`Yes--
`value``string`No--
`defaultValue``string`No--
`onValueChange``(value: string) => void`No--

Variants

Variant axes exposed by the underlying PandaCSS recipe or slot recipe.

VariantValues
`size``sm`, `md`, `lg`
`variant``outline`, `ghost`, `solid`
`radius``none`, `sm`, `md`, `lg`, `full`
`attached``true`, `false`

Registry

Files this component contributes to your registry install.

  • Manifest: `/r/toggle.json`
  • Recipe: `toggle`
  • Files: `src/components/ui/toggle.tsx`