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>
```