Radio

A wrapper for an html <input type="radio">.

Snippet

Use this interactive snippet to try the component:

<Radio name="swarm" label="swarm" value="1" checked={true} onChange={(e) => alert(e.target.value)} />

Props

a11y

Radio buttons should be used when only one option from a group can be selected.

Keyboard interactions:

• ↑/↓ or ←/→ ... to select an option.
• Tab ... to move to the next element.

Examples

These are examples of single (not-grouped) Radio buttons:

This is an example of grouped radio buttons and how to manage state: