Forms

Toggle

A two-state button that stays pressed or unpressed. Ideal for toolbar controls like bold or italic, with full aria-pressed semantics.

Playground

Experiment with different props in real-time.

Variant

Color

Size

Pressed

Disabled

Basic Usage

Bind the pressed state for two-way control.

<script lang="ts">
  import { Toggle } from 'sv5ui';

  let pressed = $state(false);
</script>

<Toggle bind:pressed label="Bold" />

Icon Only

Pass icon with square. Always add an aria-label.

<Toggle icon="lucide:bold" square aria-label="Bold" />
<Toggle icon="lucide:italic" square aria-label="Italic" />
<Toggle icon="lucide:underline" square aria-label="Underline" />

Leading & Trailing Icons

<Toggle leadingIcon="lucide:star" label="Favorite" />
<Toggle trailingIcon="lucide:pin" label="Pin" />

Variants

<Toggle variant="ghost" label="Ghost" pressed />
<Toggle variant="outline" label="Outline" pressed />
<Toggle variant="soft" label="Soft" pressed />
<Toggle variant="subtle" label="Subtle" pressed />

Colors

The color applies to the pressed state.

<Toggle color="primary" label="Primary" pressed />
<Toggle color="success" label="Success" pressed />
<Toggle color="warning" label="Warning" pressed />
<Toggle color="error" label="Error" pressed />

Sizes

<Toggle size="xs" label="XS" pressed />
<Toggle size="sm" label="SM" pressed />
<Toggle size="md" label="MD" pressed />
<Toggle size="lg" label="LG" pressed />
<Toggle size="xl" label="XL" pressed />

Block

Stretch to fill the container width.

<Toggle block leadingIcon="lucide:eye" label="Show preview" />

Disabled

<Toggle label="Disabled" disabled />
<Toggle label="Disabled on" pressed disabled />

Controlled

React to the pressed state to drive other UI.

Sound is on

<script lang="ts">
  import { Toggle } from 'sv5ui';

  let muted = $state(false);
</script>

<Toggle
  bind:pressed={muted}
  icon={muted ? 'lucide:volume-x' : 'lucide:volume-2'}
  square
  color={muted ? 'error' : 'primary'}
  aria-label="Toggle sound"
/>
<p>Sound is {muted ? 'muted' : 'on'}</p>

UI Slots

Use the ui prop to override classes.

Slot	Description
`base`	`The toggle button element`
`label`	`The text label`
`leadingIcon`	`Icon before the label`
`trailingIcon`	`Icon after the label`

Props

Prop	Type	Default	Description
`pressed`	`boolean`	`false`	`Pressed state (bindable)`
`onPressedChange`	`(pressed: boolean) => void`	`-`	`Callback when the pressed state changes`
`label`	`string`	`-`	`Text shown inside the toggle`
`icon`	`string`	`-`	`Renders an icon-only toggle`
`leadingIcon`	`string`	`-`	`Icon placed before the label`
`trailingIcon`	`string`	`-`	`Icon placed after the label`
`variant`	`'outline' \| 'soft' \| 'subtle' \| 'ghost'`	`'ghost'`	`Visual style`
`color`	`ColorType`	`'primary'`	`Color applied when pressed`
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	`Toggle size`
`block`	`boolean`	`false`	`Stretch to full width`
`square`	`boolean`	`false`	`Equal width and height, ideal for icon-only`
`disabled`	`boolean`	`false`	`Disable interaction`
`leadingSlot`	`Snippet`	`-`	`Custom content before the label`
`trailingSlot`	`Snippet`	`-`	`Custom content after the label`
`children`	`Snippet`	`-`	`Custom label content`
`ref`	`HTMLElement \| null`	`null`	`Bindable reference`
`class`	`string`	`-`	`Additional CSS classes`
`ui`	`Record<Slot, Class>`	`-`	`Override slot classes`

Switch ToggleGroup