Toggle

Preview

Local preview. It doesn't affect real accounts, environments, or run data.

Usage

Turn a command on or off with a button that holds its state. Keep the label the same in both states. aria-pressed conveys the state, and a full rounded surface shows it.

Use Link or Button for navigation or one-off actions. When a form needs a checked value, use Checkbox or Switch. Don't assume FormData or form reset includes Toggle state.

Size: SizeProvider size="small" resizes the whole composition, including portals. The default size is Default. Size guidance and comparisons

Anatomy

Toggle(button) → optional decorative SVG + stable action label

Keyboard and accessibility

Tab to the toggle and press Enter or Space to change its state. Disabled toggles don't change. Control it with pressed and onPressedChange, or set defaultPressed. event.cancel() cancels a change.

Give each control a name that describes its purpose. Connect error messages to their controls, and signal state with more than color. Automated checks don't replace manual keyboard and assistive technology testing.

Example code

Shared components take their styles from design tokens. Each example sets its own composition and accessibility attributes. The calling screen defines callbacks, refs, and product data.

import { Toggle } from '@surflane/ui'

<Toggle pressed={pinned} onPressedChange={setPinned}>
  Pin logs
</Toggle>
<Toggle defaultPressed>Show timings</Toggle>
<Toggle size='icon' aria-label='Pin logs'>
  <PinIcon />
</Toggle>

Key API

The table lists the common wrapper's main props. See the package type declarations for the full types.

Related tokens