> Native Solid 2 fork. Original documentation and designs © WorkOS; historical posts retain their original context.

# Toggle Group

A set of two-state buttons that can be toggled on or off.

## Features

- Full keyboard navigation.

- Supports horizontal/vertical orientation.

- Support single and multiple pressed buttons.

- Can be controlled or uncontrolled.

## Anatomy

Import the component.

```jsx
import { ToggleGroup } from "@radix-solid/primitives";

export default () => <ToggleGroup.Root type="single">

		<ToggleGroup.Item value="bold" aria-label="Bold" />

	</ToggleGroup.Root>;
```

## API Reference

### Root

Contains all the parts of a toggle group.

| Prop                                                                                                                                                                     | Type       | Default     |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------- | ----------- |
| `asChild`Render through a single-target factory, merging props and behavior with the chosen host. Read our [Composition](../guides/composition) guide for more details.  | `boolean`  | `false`     |
| `type*`Determines whether a single or multiple items can be pressed at a time.                                                                                           | `enum`     | —           |
| `value`The controlled value of the pressed item when `type` is `"single"`. Must be used in conjunction with `onValueChange`.                                             | `string`   | —           |
| `defaultValue`The value of the item to show as pressed when initially rendered and `type` is `"single"`. Use when you do not need to control the state of the items.     | `string`   | —           |
| `onValueChange`Event handler called when the pressed state of an item changes and `type` is `"single"`.                                                                  | `function` | —           |
| `value`The controlled value of the pressed items when `type` is `"multiple"`. Must be used in conjunction with `onValueChange`.                                          | `string[]` | `[]`        |
| `defaultValue`The values of the items to show as pressed when initially rendered and `type` is `"multiple"`. Use when you do not need to control the state of the items. | `string[]` | `[]`        |
| `onValueChange`Event handler called when the pressed state of an item changes and `type` is `"multiple"`.                                                                | `function` | —           |
| `disabled`When `true`, prevents the user from interacting with the toggle group and all its items.                                                                       | `boolean`  | `false`     |
| `rovingFocus`When `false`, navigating through the items using arrow keys will be disabled.                                                                               | `boolean`  | `true`      |
| `orientation`The orientation of the component, which determines how focus moves: `horizontal` for left/right arrows and `vertical` for up/down arrows.                   | `enum`     | `undefined` |
| `dir`The reading direction of the toggle group. If omitted, inherits globally from `DirectionProvider` or assumes LTR (left-to-right) reading mode.                      | `enum`     | —           |
| `loop`When `true` and `rovingFocus` is `true`, keyboard navigation will loop from last item to first, and vice versa.                                                    | `boolean`  | `true`      |

| Data attribute       | Values                       |
| -------------------- | ---------------------------- |
| `[data-orientation]` | `"vertical" \| "horizontal"` |

### Item

An item in the group.

| Prop                                                                                                                                                                    | Type      | Default |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------- |
| `asChild`Render through a single-target factory, merging props and behavior with the chosen host. Read our [Composition](../guides/composition) guide for more details. | `boolean` | `false` |
| `value*`A unique value for the item.                                                                                                                                    | `string`  | —       |
| `disabled`When `true`, prevents the user from interacting with the item.                                                                                                | `boolean` | —       |

| Data attribute       | Values                       |
| -------------------- | ---------------------------- |
| `[data-state]`       | `"on" \| "off"`              |
| `[data-disabled]`    | Present when disabled        |
| `[data-orientation]` | `"vertical" \| "horizontal"` |

## Examples

### Ensuring there is always a value

You can control the component to ensure a value.

```jsx
import { createSignal } from "solid-js";

import { ToggleGroup } from "@radix-solid/primitives";

export default () => {

  const [value, setValue] = createSignal("left");

  return <ToggleGroup.Root type="single" value={value()} onValueChange={value => {
    if (value) setValue(value);
  }}>

			<ToggleGroup.Item value="left">

				<TextAlignLeftIcon />

			</ToggleGroup.Item>

			<ToggleGroup.Item value="center">

				<TextAlignCenterIcon />

			</ToggleGroup.Item>

			<ToggleGroup.Item value="right">

				<TextAlignRightIcon />

			</ToggleGroup.Item>

		</ToggleGroup.Root>;

};
```

## Accessibility

Uses [roving tabindex](https://www.w3.org/TR/wai-aria-practices-1.2/examples/radio/radio.html) to manage focus movement among items.

### Keyboard Interactions

| Key          | Description                                                            |
| ------------ | ---------------------------------------------------------------------- |
| `Tab`        | Moves focus to either the pressed item or the first item in the group. |
| `Space`      | Activates/deactivates the item.                                        |
| `Enter`      | Activates/deactivates the item.                                        |
| `ArrowDown`  | Moves focus to the next item in the group.                             |
| `ArrowRight` | Moves focus to the next item in the group.                             |
| `ArrowUp`    | Moves focus to the previous item in the group.                         |
| `ArrowLeft`  | Moves focus to the previous item in the group.                         |
| `Home`       | Moves focus to the first item.                                         |
| `End`        | Moves focus to the last item.                                          |