Toggle Group
A group of toggle buttons where only one can be active at a time.
Import
Usage
Colors
Variants
Select a color:
Default
Bordered
Light
Ghost
Ethereal
Sizes
Radius
Shadowed
With Icons
Full Width
Buy/Sell Toggle
Disabled
Custom Implementation
Data Attributes
- -
data-slot="toggle-group"Toggle group container identifier - -
data-state="on" | "off"Indicates whether an item is selected or not
Accessibility
Keyboard Support
- -
TabMoves focus to the next focusable element - -
SpaceActivates the toggle item - -
EnterActivates the toggle item
ARIA Attributes
- -
role="radiogroup"Applied to the toggle group container - -
role="radio"Applied to each toggle item - -
aria-checkedIndicates the selected state of each item
ToggleGroup Props
| Attribute | Type | Default | Description |
|---|---|---|---|
| type | 'single' | 'single' | The type of toggle group (currently only single selection supported). |
| value | string | - | Controlled value of the selected item. |
| defaultValue | string | - | Default value for uncontrolled component. |
| onValueChange | (value: string) => void | - | Callback when the selected value changes. |
| variant | 'default' | 'bordered' | 'light' | 'ghost' | 'ethereal' | 'bordered' | Visual style variant of the toggle group. |
| size | 'sm' | 'md' | 'lg' | - | Size of the toggle items. |
| color | 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'lavender' | - | Color scheme of the toggle group. |
| radius | 'none' | 'sm' | 'md' | 'lg' | 'full' | 'md' | Border radius of the toggle group. |
| shadowed | boolean | false | Whether to add Material Design elevation shadows to the toggle group. |
| fullWidth | boolean | false | Whether items should span the full width of the container. |
| disabled | boolean | false | Whether all items in the group are disabled. |
ToggleGroupItem Props
| Attribute | Type | Default | Description |
|---|---|---|---|
| value | string | - | The unique value for this toggle item (required). |
| variant | 'default' | 'bordered' | 'light' | 'ghost' | 'ethereal' | Inherited from ToggleGroup | Override the variant for this specific item. |
| size | 'sm' | 'md' | 'lg' | Inherited from ToggleGroup | Override the size for this specific item. |
| color | 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'lavender' | Inherited from ToggleGroup | Override the color for this specific item. |
| radius | 'none' | 'sm' | 'md' | 'lg' | 'full' | Inherited from ToggleGroup | Override the border radius for this specific item. |
| shadowed | boolean | Inherited from ToggleGroup | Override the shadow for this specific item. |
| startContent | ReactNode | - | Content to display before the item text (e.g., icons). |
| endContent | ReactNode | - | Content to display after the item text (e.g., icons). |
| disabled | boolean | false | Whether this specific item is disabled. |
| iconOnly | boolean | false | Whether this item should be square-shaped for icon-only usage. |
| disableRipple | boolean | false | Whether to disable the ripple effect for this item. |
