Toggle Group
Toggles that belong together.
One at a time
Alignment: choosing one lets the last one go.
Single, and it behaves like radios that look like buttons. Multiple, and each one is independent. Either way Tab enters the group once and the arrow keys move inside it.
Installation
npx philcn@latest add toggle-groupThe file is written into your project. It is yours from then on — change it as you like.
Examples
Several at once
Bold and italic together; the value is an array.
Props
| Prop | Type | What it does |
|---|---|---|
| ToggleGroup.type * | "multiple" | "single" | Required. `"single"` for one choice, `"multiple"` for any number. |
| ToggleGroup.value | string | string[] | Controlled. A string, or an array when multiple. |
| ToggleGroup.defaultValue | string | string[] | Uncontrolled: what is pressed at the start. |
| ToggleGroup.onValueChange | ((value: string) => void) | ((value: string[]) => void) | Called with the new value on every change. |
| ToggleGroup.variant | "default" | "outline" | null | Passed down to every item. |
| ToggleGroup.size | "default" | "lg" | "sm" | null | Passed down to every item. |
| ToggleGroupItem.value * | string | What this item stands for. Required. |
Types are read from the library itself, so this table cannot describe an option the code no longer has.