Toggle Group

View source Report an issue

ToggleGroup.Root

Prop	Type	Default	Required
`as`	`JSX.IntrinsicElements`	-	-
`asChild`	`boolean`	-	-
`defaultValue`	`string` \| `string[]`	-	-
`dir`	`"ltr"` \| `"rtl"`	-	-
`direction`	`"row"` \| `"column"`	-	-
`disabled`	`boolean`	-	-
`disableDeselect`	`boolean`	-	-
`gap`	`0` \| `1` \| `3` \| `2`	-	-
`hasGap`	`boolean`	-	-
`isFullWidth`	`boolean`	-	-
`loop`	`boolean`	-	-
`onValueChange`	`(value: string) => void` \| `(value: string[]) => void`	-	-
`orientation`	`"horizontal"` \| `"vertical"`	`horizontal`	-
`rovingFocus`	`boolean`	-	-
`theme`	`"standard"` \| `"modern"`	`standard`	-
`type`	`"single"` \| `"multiple"`	-
`value`	`string` \| `string[]`	-	-
`wrap`	`boolean`	-	-

ToggleGroup.Button

Prop	Type	Default	Required
`as`	`JSX.IntrinsicElements`	-	-
`asChild`	`boolean`	-	-
`isIconOnly`	`boolean`	-	-
`size`	`Partial<Record<Breakpoint, "sm" \| "md" \| "lg">>` \| `"sm"` \| `"md"` \| `"lg"`	`md`	-
`theme`	`"standard"` \| `"modern"` \| `Partial<Record<Breakpoint, "standard" \| "modern">>`	`standard`	-
`value`	`string`	-

ToggleGroup.Item

Prop	Type	Default	Required
`as`	`JSX.IntrinsicElements`	-	-
`asChild`	`boolean`	-	-
`theme`	`"standard"` \| `"modern"`	-	-
`value`	`string`	-