110 lines
3.3 KiB
Markdown
110 lines
3.3 KiB
Markdown
1. Home
|
|
2. Components
|
|
3. Toggle Group
|
|
|
|
# Toggle Group
|
|
|
|
A set of two-state buttons that can be toggled on or off. Toggle buttons share outer rounded corners with sharp inner corners, creating a seamless single-button appearance.
|
|
|
|
[Docs](https://www.radix-ui.com/primitives/docs/components/toggle-group)[API Reference](https://www.radix-ui.com/primitives/docs/components/toggle-group#api-reference)## Props
|
|
|
|
### ToggleGroup
|
|
|
|
| Prop | Type | Default | Description |
|
|
| --- | --- | --- | --- |
|
|
| etype | 'single' | 'multiple' | 'single' | Selection behavior |
|
|
| variant | 'primary' | 'secondary' | 'ghost' | 'primary' | Visual style passed to items |
|
|
| size | 'sm' | 'base' | 'lg' | 'base' | Size passed to items |
|
|
| ...Radix props | ComponentProps<typeof ToggleGroupPrimitive.Root> | - | All Radix group props |
|
|
|
|
### ToggleGroupItem
|
|
|
|
| Prop | Type | Default | Description |
|
|
| --- | --- | --- | --- |
|
|
| inherits | variant, size from group | - | Styling context from parent |
|
|
| ...Radix props | ComponentProps<typeof ToggleGroupPrimitive.Item> | - | All Radix item props |
|
|
|
|
Multiple buttons can be active at once with etype="multiple".
|
|
|
|
## Variants
|
|
|
|
### Primary (Default)
|
|
|
|
1 2 3 Selected: option-1
|
|
|
|
```jsx
|
|
<ToggleGroup variant="primary" type="multiple" size="sm">
|
|
<ToggleGroupItem value="option-1">1</ToggleGroupItem>
|
|
<ToggleGroupItem value="option-2">2</ToggleGroupItem>
|
|
<ToggleGroupItem value="option-3">3</ToggleGroupItem>
|
|
</ToggleGroup>
|
|
```
|
|
|
|
### Secondary
|
|
|
|
1 2 3 Selected: option-1
|
|
|
|
```jsx
|
|
<ToggleGroup variant="secondary" type="multiple" size="sm">
|
|
<ToggleGroupItem value="option-1">1</ToggleGroupItem>
|
|
<ToggleGroupItem value="option-2">2</ToggleGroupItem>
|
|
<ToggleGroupItem value="option-3">3</ToggleGroupItem>
|
|
</ToggleGroup>
|
|
```
|
|
|
|
### Ghost
|
|
|
|
1 2 3 Selected: option-1
|
|
|
|
```jsx
|
|
<ToggleGroup variant="ghost" type="multiple" size="sm">
|
|
<ToggleGroupItem value="option-1">1</ToggleGroupItem>
|
|
<ToggleGroupItem value="option-2">2</ToggleGroupItem>
|
|
<ToggleGroupItem value="option-3">3</ToggleGroupItem>
|
|
</ToggleGroup>
|
|
```
|
|
|
|
## Single Selection
|
|
|
|
Selected: center
|
|
|
|
```jsx
|
|
const [value, setValue] = useState("center");
|
|
|
|
<ToggleGroup variant="primary" type="single" size="sm" value={value} onValueChange={setValue}>
|
|
<ToggleGroupItem value="left"><AlignLeft className="size-3" /></ToggleGroupItem>
|
|
<ToggleGroupItem value="center"><AlignCenter className="size-3" /></ToggleGroupItem>
|
|
<ToggleGroupItem value="right"><AlignRight className="size-3" /></ToggleGroupItem>
|
|
<ToggleGroupItem value="justify"><AlignJustify className="size-3" /></ToggleGroupItem>
|
|
</ToggleGroup>
|
|
```
|
|
|
|
Only one button can be active at a time with etype="single".
|
|
|
|
## With Icons
|
|
|
|
Selected: list
|
|
|
|
```jsx
|
|
const [value, setValue] = useState(["view-1"]);
|
|
|
|
<ToggleGroup variant="primary" type="multiple" size="sm" value={value} onValueChange={setValue}>
|
|
<ToggleGroupItem value="list"><List className="size-3" /></ToggleGroupItem>
|
|
<ToggleGroupItem value="grid"><Grid className="size-3" /></ToggleGroupItem>
|
|
<ToggleGroupItem value="folder"><Folder className="size-3" /></ToggleGroupItem>
|
|
</ToggleGroup>
|
|
```
|
|
|
|
Toggle group with icon content.
|
|
|
|
## Disabled State
|
|
|
|
1 2 3 Selected: None
|
|
|
|
```jsx
|
|
<ToggleGroup variant="primary" type="multiple" size="sm">
|
|
<ToggleGroupItem value="option-1">1</ToggleGroupItem>
|
|
<ToggleGroupItem value="option-2" disabled>2</ToggleGroupItem>
|
|
<ToggleGroupItem value="option-3">3</ToggleGroupItem>
|
|
</ToggleGroup>
|
|
``` |