Feat: Toggle Group

[khairulhaaziq]

reference

Root

Contains all the parts of a toggle group.

Name	Type	Default	Description	Status
asChild	boolean	false	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	❌
type	"single" | "multiple"		Determines whether a single or multiple items can be pressed at a time.	❌
value	string		The controlled value of the pressed item when type is "single". Must be used in conjunction with onValueChange.	❌
defaultValue	string		The value of the item to show as pressed when initially rendered and type is "single". Use when you do not need to control the state of the items.	❌
onValueChange	(value: string) => void		Event handler called when the pressed state of an item changes and type is "single".	❌
value	string[]	[]	The controlled value of the pressed items when type is "multiple". Must be used in conjunction with onValueChange.	❌
defaultValue	string[]	[]	The values of the items to show as pressed when initially rendered and type is "multiple". Use when you do not need to control the state of the items.	❌
onValueChange	(value: string[]) => void		Event handler called when the pressed state of an item changes and type is "multiple".	❌
disabled	boolean	false	When true, prevents the user from interacting with the toggle group and all its items.	❌
rovingFocus	boolean	true	When false, navigating through the items using arrow keys will be disabled.	❌
orientation	"horizontal" | "vertical" | undefined	undefined	The orientation of the component, which determines how focus moves: "horizontal" for left/right arrows and "vertical" for up/down arrows.	❌
dir	"ltr" | "rtl"		The reading direction of the toggle group. If omitted, inherits globally from DirectionProvider or assumes LTR (left-to-right) reading mode.	❌
loop	boolean	true	When true and rovingFocus is true, keyboard navigation will loop from the last item to the first, and vice versa.	❌

<DataAttributesTable
data={[
{
attribute: '[data-orientation]',
values: ['vertical', 'horizontal'],
},
]}
/>

Item

An item in the group.

Name	Type	Default	Description	Status
asChild	boolean	false	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	❌
value	string		A unique value for the item.	❌
disabled	boolean		When true, prevents the user from interacting with the item.	❌

<DataAttributesTable
data={[
{
attribute: '[data-state]',
values: ['on', 'off'],
},
{
attribute: '[data-disabled]',
values: 'Present when disabled',
},
{
attribute: '[data-orientation]',
values: ['vertical', 'horizontal'],
},
]}
/>