Skip to content
Home

Radio

Info
Demos
Properties
Events

Import

import { Radio } from '@dnb/eufemia'

Description

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.

Demos

Radio group

Radio Group
Code Editor
<Radio.Group
  label="Radio Group"
  on_change={({ value }) => {
    console.log('on_change', value)
  }}
  value="first"
>
  <Radio label="First" value="first" />
  <Radio label="Second" value="second" />
  <Radio label="Third" value="third" />
</Radio.Group>

Vertical aligned Radio group

Vertical Group
Code Editor
<Radio.Group
  label="Vertical Group"
  layout_direction="column"
  on_change={({ value }) => {
    console.log('on_change', value)
  }}
>
  <Radio label="First" value="first" />
  <Radio label="Second" value="second" />
  <Radio label="Third" value="third" checked />
</Radio.Group>

Radio group with label above

Vertical Group
Code Editor
<Radio.Group
  vertical
  label="Vertical Group"
  layout_direction="column"
  on_change={({ value }) => {
    console.log('on_change', value)
  }}
>
  <Radio label="First" value="first" />
  <Radio label="Second" value="second" />
  <Radio label="Third" value="third" checked />
</Radio.Group>

Radio group with status messages

Radio Group with statusError messageInfo message
Code Editor
<Radio.Group
  label="Radio Group with status"
  layout_direction="column"
  on_change={({ value }) => {
    console.log('on_change', value)
  }}
>
  <Radio label="First" value="first" status="error" />
  <Radio label="Second" value="second" status="Error message" />
  <Radio
    label="Third"
    value="third"
    checked
    status="Info message"
    status_state="info"
  />
</Radio.Group>

Plain Radio group

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

Plain Radio group
Code Editor
<FieldBlock
  label="Plain Radio group"
  layout="horizontal"
  labelHeight="small"
>
  <Radio
    value="first"
    label="First"
    group="MyRadioGroup"
    on_change={({ value, checked }) => {
      console.log('on_change', value, checked)
    }}
    right
  />
  <Radio
    value="second"
    label="Second"
    group="MyRadioGroup"
    on_change={({ value, checked }) => {
      console.log('on_change', value, checked)
    }}
    right
  />
  <Radio
    checked
    value="third"
    label="Third"
    group="MyRadioGroup"
    on_change={({ value, checked }) => {
      console.log('on_change', value, checked)
    }}
    right
  />
</FieldBlock>

With different sizes

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

Code Editor
<Radio size="medium" label="Medium" right="large" checked />
<Radio size="large" label="Large" checked />

Disabled Radio Group

With label_position set to left.

Disabled Group
Code Editor
<Radio.Group
  label="Disabled Group"
  disabled
  label_position="left"
  name="MyGroup"
>
  <Radio label="First" value="first" />
  <Radio label="Second" value="second" />
  <Radio label="Third" value="third" checked />
</Radio.Group>

Radio Buttons with a suffix

With suffixesError message
Code Editor
<Radio.Group label="With suffixes" label_position="left">
  <Radio label="First" value="first" />
  <Radio
    label="Second"
    value="second"
    suffix={<HelpButton title="Modal Title">Modal content</HelpButton>}
  />
  <Radio
    label="Third"
    value="third"
    status="Error message"
    suffix={<HelpButton title="Modal Title">Modal content</HelpButton>}
    checked
  />
</Radio.Group>