1. Components
  2. Radio

Radio

A set of checkable buttons, where no more than one of the buttons can be checked at a time.

Requires the 'use client' directive if React Server Components are being used.

Type

There are two types of radio buttons: normal and detailed. When using normal radio buttons, <Radio.Item /> must be supplied with a unique id prop, and an associated, descriptive <label> must be used with its htmlFor prop set to id. Conversely, when using detailed radio buttons, id must not be supplied. Instead, a descriptive title must be supplied, which will be used as the radio button's label and automatically associated with the radio button.

detailed radio buttons automatically render title inside a <label> and set its htmlFor to a unique id generated by useId.

Normal

Note that the 3rd <Radio.Item /> is disabled.

Detailed

Unlike normal radio buttons, detailed radio buttons must have a descriptive title prop and may optionally have descriptive, icon, and intent props.