Radio

A single radio button with an associated label and optional error message. 

import { Radio } from "@sanity/sanity-id/components/radio"

Props

Also accepts every prop of Omit<ComponentProps<"input">, "type">.

Radio props
PropTypeDescription
id (required)string

Unique input ID; connects the input to its label element

errorReactNode

Error message displayed below the radio button

labelReactNode

Label displayed next to the radio button

Required.

Usage

Esse dolor in nostrud elit incididunt voluptate

Esse dolor in nostrud elit incididunt voluptate

Et et dolore ut excepteur voluptate incididunt commodo et minim cillum velit do officia. Sint cupidatat pariatur pariatur labore minim.

1import { Radio } from "@sanity/sanity-id/components/radio"
2
3export default () => {
4        return (
5          <div className="flex flex-col gap-32 max-w-md">
6            <Radio id="radio-example-1" label="Radio with label" />
7            <Radio
8              id="radio-example-4"
9              label="Radio with label (checked)"
10              defaultChecked
11            />
12            <Radio
13              id="radio-example-2"
14              label="Radio with long label. Eu do voluptate minim qui culpa reprehenderit enim elit laboris eiusmod consectetur"
15            />
16            <Radio
17              id="radio-example-2"
18              label="Radio with error"
19              error="Esse dolor in nostrud elit incididunt voluptate"
20            />
21            <Radio
22              id="radio-example-5"
23              label="Radio with error (checked)"
24              error="Esse dolor in nostrud elit incididunt voluptate"
25              defaultChecked
26            />
27            <Radio
28              id="radio-example-3"
29              label="Radio with long error"
30              error="Et et dolore ut excepteur voluptate incididunt commodo et minim cillum velit do officia. Sint cupidatat pariatur pariatur labore minim."
31            />
32          </div>
33        )
34      }