Radio
Overview
Radio buttons let users select an option from a list of two or more items.
When to use:
- Use radio buttons when a user can only make one, mutually exclusive selection from a list.
Implementation
A Radio is a group of items from which a single option can be selected.
Edit the code below to see your changes live!
Props
Supports all native <input /> element attributes.
Prop name | Type | Default | Description |
|---|---|---|---|
label * | string | RadioLabel | | Label to display next to a |
description | string | RadioDescription | | See RadioDescription for usage. |
Props ending with * are required
Do's and Don'ts
Do |
|---|
Group related radio buttons under input headings. |
Include a default selected option with the radio buttons. |
Lay radio buttons vertically. |
Don't |
|---|
Don’t use radio buttons for long lists of short items. Use a select input instead. |
A set of radio buttons should not have a state of being “unselected.” There must always be a selection. |