Components
ToggleGroup
Grouped toggle buttons.
Use ToggleGroup to group mutually exclusive or multiple selectable toggles.
import { ToggleGroup, ToggleGroupItem } from '@tile-ui/react';
export default function ToggleGroupDemo() {
return (
<ToggleGroup type="single" defaultValue="left">
<ToggleGroupItem value="left">Left</ToggleGroupItem>Registry install
pnpm dlx shadcn@latest add @tile-ui/toggle-groupPackage usage
import { ToggleGroup, ToggleGroupItem } from '@tile-ui/react';
<ToggleGroup type="single" defaultValue="a">
<ToggleGroupItem value="a">A</ToggleGroupItem>
<ToggleGroupItem value="b">B</ToggleGroupItem>
</ToggleGroup>Highlights
- Single and multiple modes
- Item variants and sizes
Registry dependencies
| Item | Purpose |
|---|---|
toggle-group | Component source and module styles |
core | Framework-agnostic logic helpers |
styles | Shared SCSS tokens and globals |
API reference
ToggleGroup
| Prop | Type | Default |
|---|---|---|
type | 'single' | 'multiple' | — |
ToggleGroupItem
| Prop | Type | Default |
|---|---|---|
value | string | — |
variant | ToggleVariant | — |
size | ToggleSize | — |