The Radio component is shown as a circle that is filled (checked) when activated. Radio buttons are used to let a user select one option / value of a limited number of choices within a group of Radio buttons.

It is recommended to use it in a group. You can use either the React component <Radio.Group> or use the property group="NAME" to define the group.


Radio group

Radio Group:

Vertical aligned Radio group

Vertical Group:

Radio group with status messages

Radio Group with status:
Error messageInfo message

Plain Radio group

Without <Radio.Group>. It is recommended to use the <Radio.Group> if You are using React.

Plain Radio group:

With different sizes

As for now, there are two sizes. medium is the default size.

Disabled Radio Group

With label_position set to left.

Disabled Group:

Radio Buttons with suffix

With suffixes:
Error message