Grouped options for single-select choices.
Add this item from the registry, or import it from the package after installing Default File UI.
Registry path
itsvigneshv/default-file-ui/toggle-groupPackage import
import { ToggleGroup, ToggleGroupItem } from "@default-file/ui/components/df-toggle-group"Single-select group.
Default and outline styles.
Small, default, and large.
Lay items out horizontally or vertically.
Adjust corner rounding from a full pill to a tighter square.
Press more than one item at a time.
Grouped single- or multi-select toggles. Compose ToggleGroup and ToggleGroupItem.
| Prop | Type | Default | Notes |
|---|---|---|---|
| variant | "default" | "outline" | "default" | Visual style for items. |
| size | "default" | "sm" | "lg" | "default" | Item height and type size. |
| radius | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "full" | — | Corner radius of the group. Defaults to a pill look. |
| spacing | number | 2 | Gap between items (design-scale units). |
| orientation | "horizontal" | "vertical" | "horizontal" | Layout direction. |
| multiple | boolean | false | Allow more than one selected value. |
| value | string[] | — | Controlled selected values. |
| defaultValue | string[] | [] | Uncontrolled initial values. |
| onValueChange | (value: string[]) => void | — | Called when selection changes. |
| disabled | boolean | false | Disable the whole group. |
| Prop | Type | Default | Notes |
|---|---|---|---|
| value | string | — | Item value (required). |
| variant | "default" | "outline" | — | Override group variant for this item. |
| size | "default" | "sm" | "lg" | — | Override group size for this item. |
| disabled | boolean | — | Non-interactive item. |
| children | ReactNode | — | Item label or icon. |