Headless

Toggle Group

Provides a shared state to a series of toggle buttons.

In Nyte

Import

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

@nyte-ai/ui/toggle-group re-exports the Base UI namespace unchanged. There is no Nyte styling on this subpath; the consumer owns every class, StyleX style, and layout decision. Base UI owns the interaction model, keyboard handling, focus management, and ARIA below.

Consumed by:

desktop/src/renderer/src/chrome/usage-settings.tsx

The rest of this page is Base UI's documentation for @base-ui/react/toggle-group, reproduced verbatim under the MIT license, © Material-UI SAS. Component paths in examples refer to the Base UI package; in Nyte, import from the subpath above.

Anatomy

Import the component and use it as a single part:

Anatomy

import { ToggleGroup } from '@base-ui/react/toggle-group';

<ToggleGroup />;

Examples

Multiple

Add the multiple prop to allow pressing more than one toggle at a time.

API reference

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.

ToggleGroup.Props

Re-export of ToggleGroup props.

ToggleGroup.State

type ToggleGroupState = {
  /** Whether the component should ignore user interaction. */
  disabled: boolean;
  /**
   * 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.
   * @default false
   */
  multiple: boolean;
  /** The orientation of the toggle group. */
  orientation: Orientation;
};

ToggleGroup.ChangeEventReason

type ToggleGroupChangeEventReason = 'none';

ToggleGroup.ChangeEventDetails

type ToggleGroupChangeEventDetails = {
  /** The reason for the event. */
  reason: 'none';
  /** The native event associated with the custom event. */
  event: Event;
  /** Cancels Base UI from handling the event. */
  cancel: () => void;
  /** Allows the event to propagate in cases where Base UI will stop the propagation. */
  allowPropagation: () => void;
  /** Indicates whether the event has been canceled. */
  isCanceled: boolean;
  /** Indicates whether the event is allowed to propagate. */
  isPropagationAllowed: boolean;
  /** The element that triggered the event, if applicable. */
  trigger: Element | undefined;
};

External Types

Orientation

type Orientation = 'horizontal' | 'vertical';

Canonical Types

Maps Canonical: Alias — Use Canonical when its namespace is already imported; otherwise use Alias.

ToggleGroup.State: ToggleGroupState
ToggleGroup.Props: ToggleGroupProps
ToggleGroup.ChangeEventReason: ToggleGroupChangeEventReason
ToggleGroup.ChangeEventDetails: ToggleGroupChangeEventDetails