, shortcut: "mod+b" },
{ value: "italic", label: "Italic", icon:
, shortcut: "mod+i" },
{ value: "underline", label: "Underline", icon:
, shortcut: "mod+u" },
]}
/>
},
{ value: "center", label: "Center", icon:
},
{ value: "right", label: "Right", icon:
},
]}
/>
)
}
```
## Props
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `type?` | `"single" \| "multiple"` | `"single"` | single: one item stays pressed and the value is a string (an alignment, a view). multiple: any number stay pressed and the value is a string[] (bold, italic, filters). |
| `options?` | `ToggleGroupOption[]` | | { value: string; label: ReactNode; icon?: ReactNode; disabled?: boolean; tooltip?: ReactNode; shortcut?: string }. The shortcut is a hint shown in the tooltip and set as aria-keyshortcuts; bind it yourself with useShortcut. Values that disappear from the list are dropped from the value. |
| `value?` | `string \| string[]` | | Controlled value, typed by type: a string for single (empty for none), a string[] for multiple. |
| `defaultValue?` | `string \| string[]` | | Starting value while uncontrolled: "" or [] when omitted. |
| `onValueChange?` | `(value: string \| string[]) => void` | | Fires with the new value, typed by type: a string for single ("" when cleared), a string[] for multiple. |
| `deselectable?` | `boolean` | `false` | single only: clicking the pressed item clears the value. Off by default, since an alignment or a view always has one. |
| `variant?` | `"ghost" \| "outline" \| "soft"` | `"ghost"` | ghost: transparent items for toolbars, pressed ones get the selected tint. outline: items joined into one bordered control with hairlines between them. soft: a tinted track where the pressed item becomes a solid fill. |
| `size?` | `"sm" \| "md" \| "lg"` | `"md"` | Height 32 / 40 / 48px with matching padding, type and icon size; icon-only items are square. On touch screens md grows to 44px and sm keeps a 44px hit area. |
| `radius?` | `"none" \| "sm" \| "md" \| "lg" \| "full"` | `"md"` | Corner shape, scaled with the size like the button's. full turns the group into a pill. |
| `tone?` | `"neutral" \| "brand" \| "success" \| "warning" \| "danger" \| "info"` | `"neutral"` | Color of the pressed items. neutral is the gray selected tint (a black or white fill on soft); the other tones tint the highlight and color the text. |
| `color?` | `string` | `""` | Any CSS color for the pressed items; replaces the tone. Leave empty to use the tone. |
| `orientation?` | `"horizontal" \| "vertical"` | `"horizontal"` | The direction of the row and of the arrow keys. Vertical items align their labels to the start. |
| `iconOnly?` | `boolean` | `false` | Shows only the icons in square items. Each label becomes the item's aria-label and its tooltip (with the shortcut hint). |
| `fullWidth?` | `boolean` | `false` | Items share the width of the container, the usual layout for a view switch on a phone. |
| `attached?` | `boolean` | `true` | outline only: items share their borders as one control. Off: they stand apart as separate chips with a gap; add flex-wrap through className to let them wrap. |
| `loop?` | `boolean` | `true` | Arrow keys wrap from the last item to the first and back. Off: they stop at the ends. |
| `disabled?` | `boolean` | `false` | Dims the whole group and blocks it. A single option can be disabled through its disabled field. |
| `aria-label?` | `string` | `""` | The group's name for screen readers, like Alignment. Needed when no visible label sits next to it. |
| `classNames?` | `Partial