# Segmented Control

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

```jsx
<SegmentedControl.Root defaultValue="inbox">

	<SegmentedControl.Item value="inbox">Inbox</SegmentedControl.Item>

	<SegmentedControl.Item value="drafts">Drafts</SegmentedControl.Item>

	<SegmentedControl.Item value="sent">Sent</SegmentedControl.Item>

</SegmentedControl.Root>
```

## API Reference

This component inherits props and functionality from the [Toggle Group primitive](/primitives/docs/components/toggle-group). It supports [common margin props](/themes/docs/overview/layout#margin-props).

### Root

Contains the items of the control.

| Prop                                                                                                                       | Type                                                 | Default     |
| -------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------- | ----------- |
| `disabled`                                                                                                                 | `boolean`                                            | `false`     |
| `size`                                                                                                                     | `Responsive<"1" \| "2" \| "3">`                      | `"2"`       |
| `variant`The visual variant to apply, see [theme overview](/themes/docs/theme/overview#variants) for more details.         | `"surface" \| "classic"`                             | `"surface"` |
| `radius`Overrides the radius inherited from the theme. See the [radius guide](/themes/docs/theme/radius) for more details. | `"none" \| "small" \| "medium" \| "large" \| "full"` | —           |

### Item

Represents individual values of the control.

## Examples

### Size

Use the `size` prop to control the size of the control.

```jsx
<Flex align="start" direction="column" gap="4">

	<SegmentedControl.Root defaultValue="inbox" size="1">

		<SegmentedControl.Item value="inbox">Inbox</SegmentedControl.Item>

		<SegmentedControl.Item value="drafts">Drafts</SegmentedControl.Item>

		<SegmentedControl.Item value="sent">Sent</SegmentedControl.Item>

	</SegmentedControl.Root>



	<SegmentedControl.Root defaultValue="inbox" size="2">

		<SegmentedControl.Item value="inbox">Inbox</SegmentedControl.Item>

		<SegmentedControl.Item value="drafts">Drafts</SegmentedControl.Item>

		<SegmentedControl.Item value="sent">Sent</SegmentedControl.Item>

	</SegmentedControl.Root>



	<SegmentedControl.Root defaultValue="inbox" size="3">

		<SegmentedControl.Item value="inbox">Inbox</SegmentedControl.Item>

		<SegmentedControl.Item value="drafts">Drafts</SegmentedControl.Item>

		<SegmentedControl.Item value="sent">Sent</SegmentedControl.Item>

	</SegmentedControl.Root>

</Flex>
```

### Variant

Use the `variant` prop to control the visual style of the control.

```jsx
<Flex align="start" direction="column" gap="4">

	<SegmentedControl.Root defaultValue="inbox" variant="surface">

		<SegmentedControl.Item value="inbox">Inbox</SegmentedControl.Item>

		<SegmentedControl.Item value="drafts">Drafts</SegmentedControl.Item>

		<SegmentedControl.Item value="sent">Sent</SegmentedControl.Item>

	</SegmentedControl.Root>



	<SegmentedControl.Root defaultValue="inbox" variant="classic">

		<SegmentedControl.Item value="inbox">Inbox</SegmentedControl.Item>

		<SegmentedControl.Item value="drafts">Drafts</SegmentedControl.Item>

		<SegmentedControl.Item value="sent">Sent</SegmentedControl.Item>

	</SegmentedControl.Root>

</Flex>
```

### Radius

Use the `radius` prop to assign a specific radius value.

```jsx
<Flex align="start" direction="column" gap="4">

	<SegmentedControl.Root defaultValue="inbox" radius="none">

		<SegmentedControl.Item value="inbox">Inbox</SegmentedControl.Item>

		<SegmentedControl.Item value="drafts">Drafts</SegmentedControl.Item>

		<SegmentedControl.Item value="sent">Sent</SegmentedControl.Item>

	</SegmentedControl.Root>



	<SegmentedControl.Root defaultValue="inbox" radius="small">

		<SegmentedControl.Item value="inbox">Inbox</SegmentedControl.Item>

		<SegmentedControl.Item value="drafts">Drafts</SegmentedControl.Item>

		<SegmentedControl.Item value="sent">Sent</SegmentedControl.Item>

	</SegmentedControl.Root>



	<SegmentedControl.Root defaultValue="inbox" radius="medium">

		<SegmentedControl.Item value="inbox">Inbox</SegmentedControl.Item>

		<SegmentedControl.Item value="drafts">Drafts</SegmentedControl.Item>

		<SegmentedControl.Item value="sent">Sent</SegmentedControl.Item>

	</SegmentedControl.Root>



	<SegmentedControl.Root defaultValue="inbox" radius="large">

		<SegmentedControl.Item value="inbox">Inbox</SegmentedControl.Item>

		<SegmentedControl.Item value="drafts">Drafts</SegmentedControl.Item>

		<SegmentedControl.Item value="sent">Sent</SegmentedControl.Item>

	</SegmentedControl.Root>



	<SegmentedControl.Root defaultValue="inbox" radius="full">

		<SegmentedControl.Item value="inbox">Inbox</SegmentedControl.Item>

		<SegmentedControl.Item value="drafts">Drafts</SegmentedControl.Item>

		<SegmentedControl.Item value="sent">Sent</SegmentedControl.Item>

	</SegmentedControl.Root>

</Flex>
```