Radio

Usage

Radio buttons allow users to choose one option from the list of mutually exclusive options. Radio buttons should always be used within the fieldset component and never as a single item.

Best practices

Do

Use radio buttons to choose one option from the list.

Don't

Don’t use radio buttons to choose more than one option. Use a checkbox instead.

Do

Use radio buttons when the list includes at least two mutually exclusive options.

Don't

Don’t use radio buttons with only one option. Use a checkbox instead.

Do

Use a hint to provide additional information about the radio.

Don't

Don’t hide additional information behind tooltips or icons.

Examples

Live Preview

Props

Fetching props...

Events

Fetching events...