---
title: "Radio Switch"
description: "A segmented control backed by a radio group — exactly one option is selected."
canonical_url: "https://sanity-id-docs.sanity.build/sanity-id/components/radio-switch"
md_url: "https://sanity-id-docs.sanity.build/sanity-id/components/radio-switch.md"
docs_index: "https://sanity-id-docs.sanity.build/sanity-id/llms.txt"
version: "1.15.2"
---

> Part of the Sanity ID reference. The index of every page is at https://sanity-id-docs.sanity.build/sanity-id/llms.txt.

# Radio Switch

A segmented control backed by a radio group — exactly one option is selected.

```tsx
import { RadioSwitch } from "@sanity/sanity-id/components/radio-switch"
```

## Props

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `legend` | `string` | yes | — | Accessible group label for the switch |
| `name` | `string` | yes | — | Input group name attribute shared by all options |
| `options` | `Array<{ icon: IconSymbol; id: string; label: string; value: string }>` | yes | — | Options to render as toggle buttons |
| `defaultValue` | `string` | no | — | Initial selected value for uncontrolled usage |
| `onChange` | `ChangeEventHandler<HTMLInputElement>` | no | — | Called when the selected option changes |
| `size` | `"sm" \| "md"` | no | `"md"` | Size of the switch |
| `value` | `string` | no | — | Controlled selected value |

## Usage

### Small

```tsx
import { RadioSwitch } from "@sanity/sanity-id/components/radio-switch"

export default () => {
	return (
		<RadioSwitch
			size="sm"
			name="radio-switch-sm-example"
			legend="Change theme"
			value="dark"
			options={[
				{
					icon: "moon",
					id: "radio-switch-sm-example-dark",
					label: "Dark mode",
					value: "dark",
				},
				{
					icon: "desktop",
					id: "radio-switch-sm-example-system",
					label: "System preferences",
					value: "system",
				},
				{
					icon: "sun",
					id: "radio-switch-sm-example-light",
					label: "Light mode",
					value: "light",
				},
			]}
		/>
	)
}
```

### Medium

```tsx
import { RadioSwitch } from "@sanity/sanity-id/components/radio-switch"

export default () => {
	return (
		<RadioSwitch
			size="md"
			name="radio-switch-md-example"
			legend="Change theme"
			value="dark"
			options={[
				{
					icon: "moon",
					id: "radio-switch-md--example-dark",
					label: "Dark mode",
					value: "dark",
				},
				{
					icon: "desktop",
					id: "radio-switch-md-example-system",
					label: "System preferences",
					value: "system",
				},
				{
					icon: "sun",
					id: "radio-switch-md-example-light",
					label: "Light mode",
					value: "light",
				},
			]}
		/>
	)
}
```