Components

Toggle group

Shared pressed state across a series of toggle buttons

Import

import { ToggleGroup } from "@nyte-ai/ui/toggle-group";

A track of Toggle buttons for picking options in place.

Usage

Every child toggle needs a value. The group's value is the array of pressed ones.

Anatomy

import { Toggle } from "@nyte-ai/ui/toggle";
import { ToggleGroup } from "@nyte-ai/ui/toggle-group";

<ToggleGroup aria-label="Format">
  <Toggle value="bold">Bold</Toggle>
  <Toggle value="italic">Italic</Toggle>
</ToggleGroup>;

Examples

Single

<ToggleGroup defaultValue={["medium"]} aria-label="Effort">
  <Toggle value="low" size="sm">
    Low
  </Toggle>
  <Toggle value="medium" size="sm">
    Medium
  </Toggle>
  <Toggle value="high" size="sm">
    High
  </Toggle>
</ToggleGroup>

Multiple

<ToggleGroup multiple defaultValue={["sidebar"]} aria-label="Panels">
  <Toggle value="sidebar" size="sm" iconOnly icon="panel-left" aria-label="Sidebar" />
  <Toggle value="terminal" size="sm" iconOnly icon="console" aria-label="Terminal" />
  <Toggle value="inspector" size="sm" iconOnly icon="panel-right" aria-label="Inspector" />
</ToggleGroup>

Controlled

const [range, setRange] = useState(["week"]);

<ToggleGroup value={range} onValueChange={setRange} aria-label="Usage range">
  <Toggle value="day" size="sm">
    Day
  </Toggle>
  <Toggle value="week" size="sm">
    Week
  </Toggle>
  <Toggle value="month" size="sm">
    Month
  </Toggle>
</ToggleGroup>;

Props

xstyle places and sizes the track. className and style take plain values, not functions of state. See Theming.

The reference table below comes from Base UI, MIT, © Material-UI SAS.

ToggleGroup

Provides a shared state to a series of toggle buttons.

ToggleGroup Props:

Prop	Type	Default	Description
defaultValue	`string[]`	-	The pressed state of the toggle group represented by an array of the values of all pressed toggle buttons. This is the uncontrolled counterpart of `value`.
value	`string[]`	-	The pressed state of the toggle group represented by an array of the values of all pressed toggle buttons. This is the controlled counterpart of `defaultValue`.
onValueChange	`((groupValue: string[], eventDetails: ToggleGroup.ChangeEventDetails) => void)`	-	Callback fired when the pressed states of the toggle group changes.
loopFocus	`boolean`	`true`	Whether to loop keyboard focus back to the first item when the end of the list is reached while using the arrow keys.
multiple	`boolean`	`false`	When `false` only one item in the group can be pressed. If any item in the group becomes pressed, the others will become unpressed. When `true` multiple items can be pressed.
disabled	`boolean`	`false`	Whether the toggle group should ignore user interaction.
orientation	`Orientation`	`'horizontal'`	-
className	`string \| ((state: ToggleGroup.State) => string \| undefined)`	-	CSS class applied to the element, or a function that returns a class based on the component's state.
style	`React.CSSProperties \| ((state: ToggleGroup.State) => React.CSSProperties \| undefined)`	-	Style applied to the element, or a function that returns a style object based on the component's state.
render	`ReactElement \| ((props: HTMLProps, state: ToggleGroup.State) => ReactElement)`	-	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

ToggleGroup Data Attributes:

Attribute	Type	Description
data-orientation	`'horizontal' \| 'vertical'`	Indicates the orientation of the toggle group.
data-disabled	-	Present when the toggle group is disabled.
data-multiple	-	Present when the toggle group allows multiple buttons to be in the pressed state at the same time.

Orientation is "horizontal" | "vertical".

Accessibility

Renders role="group". Label it with aria-label or aria-labelledby.
Arrow keys move focus between the toggles and wrap at the end unless loopFocus={false}.
Each toggle keeps its own aria-pressed. See Toggle.