Toggle Group
Provides a shared state to a series of toggle buttons.
View as MarkdownAnatomy
Import the component and use it as a single part:
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
defaultValuestring[]—
- Name
- Description
The open state of the toggle group represented by an array of the values of all pressed toggle buttons. This is the uncontrolled counterpart of
value.- Type
string[] | undefined
valuestring[]—
- Name
- Description
The open state of the toggle group represented by an array of the values of all pressed toggle buttons. This is the controlled counterpart of
defaultValue.- Type
string[] | undefined
onValueChangefunction—
- Name
- Description
Callback fired when the pressed states of the toggle group changes.
- Type
| (( groupValue: string[], eventDetails: ToggleGroup.ChangeEventDetails, ) => void) | undefined
loopFocusbooleantrue
- Name
- Description
Whether to loop keyboard focus back to the first item when the end of the list is reached while using the arrow keys.
- Type
boolean | undefined- Default
true
multiplebooleanfalse
- Name
- Description
When
falseonly one item in the group can be pressed. If any item in the group becomes pressed, the others will become unpressed. Whentruemultiple items can be pressed.- Type
boolean | undefined- Default
false
disabledbooleanfalse
- Name
- Description
Whether the toggle group should ignore user interaction.
- Type
boolean | undefined- Default
false
orientationOrientation'horizontal'
- Name
- Type
'horizontal' | 'vertical' | undefined- Default
'horizontal'
classNamestring | function—
- Name
- Description
CSS class applied to the element, or a function that returns a class based on the component’s state.
- Type
| string | ((state: ToggleGroup.State) => string | undefined) | undefined
styleReact.CSSProperties | function—
- Name
- Type
| React.CSSProperties | (( state: ToggleGroup.State, ) => React.CSSProperties | undefined) | undefined
renderReactElement | function—
- Name
- Description
Allows you to replace the component’s HTML element with a different tag, or compose it with another component.
Accepts a
ReactElementor a function that returns the element to render.- Type
| ReactElement | (( props: HTMLProps, state: ToggleGroup.State, ) => ReactElement) | undefined
data-orientation
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.
| Attribute | Description | |
|---|---|---|
data-orientation | 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.PropsHide
Re-Export of ToggleGroup props as ToggleGroupProps
ToggleGroup.StateHide
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: 'horizontal' | 'vertical';
}ToggleGroup.ChangeEventReasonHide
type ToggleGroupChangeEventReason = 'none'ToggleGroup.ChangeEventDetailsHide
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;
}