//
A set of two-state buttons that can be toggled on or off.
bun add xiod-ui1import { ToggleGroup, ToggleGroupItem, ToggleGroupSeparator } from "xiod-ui/toggle-group";1<ToggleGroup>2 <ToggleGroupItem />3 <ToggleGroupSeparator />4</ToggleGroup>| Prop | Type | Default | Description |
|---|---|---|---|
value | readonly string[]| undefined | - | 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`. |
defaultValue | readonly string[]| undefined | - | 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`. |
onValueChange | ((groupValue: string[], eventDetails: { reason: "none"; event: Event; cancel: () => void; allowPropagation: () => void; isCanceled: boolean; isPropagationAllowed: boolean; trigger: Element| undefined; }) => void)| undefined | - | Callback fired when the pressed states of the toggle group changes. |
disabled | boolean| undefined | false | Whether the toggle group should ignore user interaction. |
orientation | Orientation| undefined | horizontal | |
loopFocus | boolean| undefined | 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| undefined | 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. |
className | string| ((state: ToggleGroupState) => string| undefined)| undefined | - | CSS class applied to the element, or a function that returns a class based on the component's state. |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, ToggleGroupState>| undefined | - | 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. |
style | CSSProperties| ((state: ToggleGroupState) => CSSProperties| undefined)| undefined | - | Style applied to the element, or a function that returns a style object based on the component's state. |
size | "default"| "sm"| "lg"| null| undefined | default | |
variant | "default"| "outline"| null| undefined | default |
| Prop | Type | Default | Description |
|---|---|---|---|
pressed | boolean| undefined | - | Whether the toggle button is currently pressed. This is the controlled counterpart of `defaultPressed`. |
defaultPressed | boolean| undefined | false | Whether the toggle button is currently pressed. This is the uncontrolled counterpart of `pressed`. |
disabled | boolean| undefined | false | Whether the component should ignore user interaction. |
onPressedChange | ((pressed: boolean, eventDetails: { reason: "none"; event: Event; cancel: () => void; allowPropagation: () => void; isCanceled: boolean; isPropagationAllowed: boolean; trigger: Element| undefined; }) => void)| undefined | - | Callback fired when the pressed state is changed. |
value | string| undefined | - | A unique string that identifies the toggle when used inside a toggle group. |
nativeButton | boolean| undefined | true | Whether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `false` if the rendered element is not a button (for example, `<div>`). |
className | string| ((state: ToggleState) => string| undefined)| undefined | - | CSS class applied to the element, or a function that returns a class based on the component's state. |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, ToggleState>| undefined | - | 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. |
style | CSSProperties| ((state: ToggleState) => CSSProperties| undefined)| undefined | - | Style applied to the element, or a function that returns a style object based on the component's state. |
size | "default"| "sm"| "lg"| null| undefined | - | |
variant | "default"| "outline"| null| undefined | - |
| Prop | Type | Default | Description |
|---|---|---|---|
className | string| (string & ((state: SeparatorState) => string| undefined))| undefined | - | CSS class applied to the element, or a function that returns a class based on the component's state. |
orientation | Orientation| undefined | vertical | The orientation of the separator. |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, SeparatorState>| undefined | - | 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. |
style | CSSProperties| ((state: SeparatorState) => CSSProperties| undefined)| undefined | - | Style applied to the element, or a function that returns a style object based on the component's state. |