# Toggle Group

> On/off buttons.

Component · Forms · Pro kit · [Live page](https://ui.twentyfirst.media/pro/components/ToggleGroup/)

On/off buttons. A **Toggle** is a single pressed state (star, pin, follow). A **ToggleGroup** joins
several: `type="single"` allows at most one, `type="multiple"` any number (text styles, filters).

- Pressed state is `aria-pressed`; icon-only toggles take their name from `label` (or the option's `hint`).
- ←/→, Home and End move between the toggles of a group.
- For choosing exactly one of a few views, `Segmented` is the closer fit.

## Example

```tsx
import * as React from "react";
import { Toggle, ToggleGroup } from "@twentyfirstmedia/pro";

export default function Preview() {
  const [marks, setMarks] = React.useState(["bold"]);
  return (
    <div className="tf-panel" style={{ gap: 20 }}>
      <div className="tf-row" style={{ gap: 12 }}>
        <ToggleGroup
          label="Text style"
          type="multiple"
          value={marks}
          onChange={setMarks}
          items={[
            { value: "bold", label: "", icon: "bold", hint: "Bold" },
            { value: "list", label: "", icon: "list", hint: "List" },
            { value: "quote", label: "", icon: "quote", hint: "Quote" },
          ]}
        />
        <ToggleGroup
          label="View"
          defaultValue={["week"]}
          items={["Day", "Week", "Month"].map((x) => ({ value: x.toLowerCase(), label: x }))}
        />
      </div>
      <div className="tf-row" style={{ gap: 8 }}>
        <Toggle icon="star" label="Starred" defaultPressed />
        <Toggle icon="pin" label="Pinned" />
        <Toggle icon="bell">Follow thread</Toggle>
        <Toggle size="sm" icon="eye" disabled>
          Watching
        </Toggle>
      </div>
    </div>
  );
}
```

## Props

### ToggleGroup

| Prop | Type | Notes |
| --- | --- | --- |
| `items` | `(string \| Option)[]` | Required |
| `type?` | `"single" \| "multiple"` | `single`: at most one pressed; `multiple`: any number. |
| `value?` | `string[]` |  |
| `defaultValue?` | `string[]` |  |
| `onChange?` | `(value: string[]) => void` |  |
| `label` | `string` | Accessible name of the group. |
| `size?` | `"sm" \| "md"` |  |
| `block?` | `boolean` | Fills the width and shares it evenly; labels end in an ellipsis when space runs short. |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |

### Toggle

| Prop | Type | Notes |
| --- | --- | --- |
| `pressed?` | `boolean` |  |
| `defaultPressed?` | `boolean` |  |
| `onChange?` | `(pressed: boolean) => void` |  |
| `icon?` | `IconName` |  |
| `label?` | `string` | Accessible name; required when the toggle shows only an icon. |
| `size?` | `"sm" \| "md"` |  |
| `disabled?` | `boolean` |  |
| `children?` | `ReactNode` |  |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |