ToggleGroup

Group of toggle buttons for selecting one or more options

Example

toggle-group

Loading preview…

Group of toggle buttons for selecting one or more options

Source: packages/appkit-ui/src/react/ui/toggle-group.tsx

Prop	Type	Required	Default	Description
`type`	`enum`	✓	-	-
`value`	`string \| string[]`		-	The controlled stateful value of the item that is pressed. The controlled stateful value of the items that are pressed.
`defaultValue`	`string \| string[]`		-	The value of the item that is pressed when initially rendered. Use `defaultValue` if you do not need to control the state of a toggle group. The value of the items that are pressed when initially rendered. Use `defaultValue` if you do not need to control the state of a toggle group.
`onValueChange`	`((value: string) => void) \| ((value: string[]) => void)`		-	The callback that fires when the value of the toggle group changes. The callback that fires when the state of the toggle group changes.
`disabled`	`boolean`		-	Whether the group is disabled from user interaction. @defaultValue false
`rovingFocus`	`boolean`		-	Whether the group should maintain roving focus of its buttons. @defaultValue true
`loop`	`boolean`		-	-
`orientation`	`enum`		-	-
`dir`	`enum`		-	-
`asChild`	`boolean`		-	-
`variant`	`"default" \| "outline" \| null`		-	-
`size`	`"default" \| "sm" \| "lg" \| null`		-	-
`spacing`	`number`		`0`	-

import { ToggleGroup } from '@databricks/appkit-ui';

<ToggleGroup /* props */ />

Source: packages/appkit-ui/src/react/ui/toggle-group.tsx

Prop	Type	Default	Description
`asChild`	`boolean`	-	-
`value`	`string \| string[]`	-	The controlled stateful value of the item that is pressed. The controlled stateful value of the items that are pressed.
`variant`	`"default" \| "outline" \| null`	-	-
`size`	`"default" \| "sm" \| "lg" \| null`	-	-

import { ToggleGroupItem } from '@databricks/appkit-ui';

<ToggleGroupItem /* props */ />