Radio Switch
A segmented control backed by a radio group — exactly one option is selected.
import { RadioSwitch } from "@sanity/sanity-id/components/radio-switch"Props
| Prop | Type | Description |
|---|---|---|
legend (required) | string | Accessible group label for the switch |
name (required) | string | Input group name attribute shared by all options |
options (required) | Array<{ icon: IconSymbol; id: string; label: string; value: string }> | Options to render as toggle buttons |
defaultValue | string | Initial selected value for uncontrolled usage |
onChange | ChangeEventHandler<HTMLInputElement> | Called when the selected option changes |
size | "sm" | "md" | Size of the switch default value: "md" |
value | string | Controlled selected value |
Required.
Usage
Change theme
1import { RadioSwitch } from "@sanity/sanity-id/components/radio-switch"
2
3export default () => {
4 return (
5 <RadioSwitch
6 size="sm"
7 name="radio-switch-sm-example"
8 legend="Change theme"
9 value="dark"
10 options={[
11 {
12 icon: "moon",
13 id: "radio-switch-sm-example-dark",
14 label: "Dark mode",
15 value: "dark",
16 },
17 {
18 icon: "desktop",
19 id: "radio-switch-sm-example-system",
20 label: "System preferences",
21 value: "system",
22 },
23 {
24 icon: "sun",
25 id: "radio-switch-sm-example-light",
26 label: "Light mode",
27 value: "light",
28 },
29 ]}
30 />
31 )
32 }Change theme
1import { RadioSwitch } from "@sanity/sanity-id/components/radio-switch"
2
3export default () => {
4 return (
5 <RadioSwitch
6 size="md"
7 name="radio-switch-md-example"
8 legend="Change theme"
9 value="dark"
10 options={[
11 {
12 icon: "moon",
13 id: "radio-switch-md--example-dark",
14 label: "Dark mode",
15 value: "dark",
16 },
17 {
18 icon: "desktop",
19 id: "radio-switch-md-example-system",
20 label: "System preferences",
21 value: "system",
22 },
23 {
24 icon: "sun",
25 id: "radio-switch-md-example-light",
26 label: "Light mode",
27 value: "light",
28 },
29 ]}
30 />
31 )
32 }