Components

Toggle group

Shared pressed state across a series of toggle buttons

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

Holds the pressed state for a row of Toggle buttons and moves focus between them with the arrow keys. No Nyte styling here.

Usage

Every child toggle needs a value. The group's value is the array of pressed ones.
One item at a time by default. multiple lets several stay pressed.
value with onValueChange controls the group. defaultValue leaves it uncontrolled.
orientation="vertical" switches arrow key navigation to the vertical axis. The group reflects the current axis in data-orientation.

Anatomy

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

<ToggleGroup>
  <Toggle value="bold" />
  <Toggle value="italic" />
</ToggleGroup>;

Examples

Single

<ToggleGroup defaultValue={["medium"]}>
  <Toggle value="low">Low</Toggle>
  <Toggle value="medium">Medium</Toggle>
  <Toggle value="high">High</Toggle>
</ToggleGroup>

Multiple

multiple allows more than one toggle to be pressed at a time.

<ToggleGroup multiple defaultValue={["bold"]}>
  <Toggle value="bold" aria-label="Bold">
    <IconBold size={14} />
  </Toggle>
  <Toggle value="italic" aria-label="Italic">
    <IconItalic size={14} />
  </Toggle>
  <Toggle value="underline" aria-label="Underline">
    <IconUnderline size={14} />
  </Toggle>
</ToggleGroup>

Controlled

The value is an array even when one item is pressed at a time.

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

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

Props

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.

The Orientation type in that table is 'horizontal' | 'vertical'.

Accessibility

Renders role="group". Label it with aria-label or aria-labelledby.
Arrow keys move focus between the toggles. Focus wraps at the end unless you pass loopFocus={false}.
disabled on the group disables every toggle in it and sets data-disabled.
Each toggle keeps its own aria-pressed. See Toggle.