Toggle Group

Preview

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

Usage

Group related display modes or filters. At most one item is pressed, or several with multiple=true. The value is always an array, even in single mode.

Use RadioGroup when a form requires exactly one choice. Let aria-pressed carry the pressed state, not aria-selected. Set orientation to match the visual layout.

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

Anatomy

named ToggleGroup(role=group) → Toggle(value) items

Keyboard and accessibility

The group is a single Tab stop. Arrow keys, Home, and End only move focus. Enter or Space selects the focused item. Disabled items are skipped. For RTL, set both DirectionProvider and the DOM dir.

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 { ToggleGroup, Toggle } from '@surflane/ui'

<ToggleGroup aria-label='Log source' value={source} onValueChange={setSource}>
  <Toggle value='live'>Live</Toggle>
  <Toggle value='simulation'>Simulation</Toggle>
</ToggleGroup>
<ToggleGroup
  multiple
  aria-label='Visible log details'
  defaultValue={['requests']}
>
  <Toggle value='requests'>Requests</Toggle>
  <Toggle value='errors'>Errors</Toggle>
</ToggleGroup>

Key API

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

Related tokens