<ToggleGroup.Root defaultValue={["week"]} variant="outline">
<ToggleGroup.Item value="day">Day</ToggleGroup.Item>
<ToggleGroup.Item value="week">Week</ToggleGroup.Item>
</ToggleGroup.Root>The value is an array either way; multiple is what lets more than one entry
into it. Icon-only items need an aria-label.
For the single-choice view switcher with a sliding thumb, use SegmentedControl.
API
ToggleGroup.Root
| Prop | Type | Default | |
|---|---|---|---|
orientation | "horizontal" | "vertical" | "horizontal" | |
size | "default" | "lg" | "sm" | — | Control height. Match it to the controls beside it. |
spacing | number | 0 | |
variant | "default" | "outline" | — | outline gives the toggle a border, so it stays visible against a
surface that already has a fill. |
className | string | ((state: ToggleGroupState) => string | undefined) | — | CSS class applied to the element, or a function that returns a class based on the component's state. |
defaultValue | readonly 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. |
disabled | boolean | — | Whether the toggle group should ignore user interaction. |
loopFocus | boolean | — | 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 | — | 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. |
onValueChange | ((groupValue: string[], eventDetails: { reason: "none"; event: Event; cancel: () => void; allowPropagation: () => void; isCanceled: boolean; isPropagationAllowed: boolean; trigger: Element | undefined; }) => void) | — | Callback fired when the pressed states of the toggle group changes. |
render | ComponentRenderFn<HTMLProps, ToggleGroupState> | ReactElement<unknown, string | JSXElementConstructor<any>> | — | 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) | — | Style applied to the element, or a function that returns a style object based on the component's state. |
value | readonly 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. |
Plus the DOM props of the element it renders. Source: toggle-group/components/toggle-group-root.tsx.
ToggleGroup.Item
| Prop | Type | Default | |
|---|---|---|---|
size | "default" | "lg" | "sm" | "default" | Control height. Match it to the controls beside it. |
variant | "default" | "outline" | "default" | outline gives the toggle a border, so it stays visible against a
surface that already has a fill. |
className | string | ((state: ToggleState) => string | undefined) | — | CSS class applied to the element, or a function that returns a class based on the component's state. |
defaultPressed | boolean | — | Whether the toggle button is currently pressed.
This is the uncontrolled counterpart of pressed. |
disabled | boolean | — | Whether the component should ignore user interaction. |
nativeButton | boolean | — | 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>). |
onPressedChange | ((pressed: boolean, eventDetails: { reason: "none"; event: Event; cancel: () => void; allowPropagation: () => void; isCanceled: boolean; isPropagationAllowed: boolean; trigger: Element | undefined; }) => void) | — | Callback fired when the pressed state is changed. |
pressed | boolean | — | Whether the toggle button is currently pressed.
This is the controlled counterpart of defaultPressed. |
render | ComponentRenderFn<HTMLProps, ToggleState> | ReactElement<unknown, string | JSXElementConstructor<any>> | — | 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) | — | Style applied to the element, or a function that returns a style object based on the component's state. |
value | string | — | A unique string that identifies the toggle when used inside a toggle group. |
Plus the DOM props of the element it renders. Source: toggle-group/components/toggle-group-item.tsx.