# Toggle Group (/cloud/headless/toggle-group) {/* Generated by scripts/sync-base-ui-reference.mjs. Edit the script, not this file. */} ## In Nyte [#in-nyte] ```ts title="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 [#anatomy] Import the component and use it as a single part: ```jsx title="Anatomy" import { ToggleGroup } from '@base-ui/react/toggle-group'; ; ``` ## Examples [#examples] ### Multiple [#multiple] Add the `multiple` prop to allow pressing more than one toggle at a time. ## API reference [#api-reference] ### ToggleGroup [#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 [#togglegroupprops] Re-export of [ToggleGroup](#togglegroup) props. ### ToggleGroup.State [#togglegroupstate] ```typescript 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 [#togglegroupchangeeventreason] ```typescript type ToggleGroupChangeEventReason = 'none'; ``` ### ToggleGroup.ChangeEventDetails [#togglegroupchangeeventdetails] ```typescript 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 [#external-types] ### Orientation [#orientation] ```typescript type Orientation = 'horizontal' | 'vertical'; ``` ## Canonical Types [#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`