Fabrials UI

Loading state

Installation

Import the control from @fabrials/ui, after setting the app up.
TypeScript
```
import { ToggleGroup, ToggleGroupItem } from "@fabrials/ui";
```
Or install it under shadcn's name, so code that imports @/components/ui/toggle-group gets this control. See shims.
```
npx shadcn@latest add @fabrials/toggle-group
```

API reference

Prop / export	Type	Description
`value`	`string[]`	Selected items.
`onValueChange`	`(value: string[]) => void`	Keep at least one selected for a single choice.
`size`	`default \| sm \| lg`	Painted height 34, 26 or 44px (lg is 44px on every pointer, group padding around it); default and sm are 44px on touch and narrow screens.

Behavior

Use it for a view or range next to what it changes; use RadioGroup inside forms.

Accessibility

Keyboard and contrast

Keep visible labels, keyboard focus and status announcements when customizing. These components inherit your theme; maintain sufficient contrast in both color modes. The preview is keyboard operable.