Skip to content
Home

Radio

Info
Demos
Properties
Events

Import

import { Radio } from '@dnb/eufemia'

Description

The Radio component is displayed as a circle that is filled (checked) when activated. Radio buttons let users select one option from a limited number of choices within a group.

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

When to use Radio vs Eufemia Forms

Classic form components like this one are presentational controls. They handle the styling, sizing, icons, and basic events, while you manage their value, validation, and error handling yourself.

For most data input and forms situations, use Eufemia Forms fields instead. They build on these same components, but add data handling, validation, and error messages through the surrounding Form.Handler. Browse the field components to find the one that matches your data.

Reach for a classic component when you need it standalone outside of a form context, or when you handle the value and validation yourself.

The Eufemia Forms equivalent of Radio is Field.Selection with the radio variant (variant="radio").

Relevant links

Accessibility

Radio buttons use semantic <input type="radio"> elements grouped by the name attribute. Arrow keys navigate between options within a group, and Space selects an option. Screen readers announce the group label, current selection, and number of options.

Related components

Radio is part of the Input category. Other components for similar needs:

  • Autocomplete — to help people find and choose from matching suggestions as they type.
  • Checkbox — when people can turn one or more options on or off.
  • DatePicker — when people need to choose one date or a date range.
  • Dropdown — when people need to choose one option from a list.
  • Filter — to help people narrow down a list or data set.
  • FormLabel — to name an input, control, or form-related field.

See all in Input →

Demos

Radio group

Radio Group
<Radio.Group
  label="Radio Group"
  onChange={({ value }) => {
    console.log('onChange', 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
<Radio.Group
  label="Vertical Group"
  layoutDirection="column"
  onChange={({ value }) => {
    console.log('onChange', 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
<Radio.Group
  vertical
  label="Vertical Group"
  layoutDirection="column"
  onChange={({ value }) => {
    console.log('onChange', 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
<Radio.Group
  label="Radio Group with status"
  layoutDirection="column"
  onChange={({ value }) => {
    console.log('onChange', 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"
    statusState="information"
  />
</Radio.Group>

Plain Radio group

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

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

With different sizes

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

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

Disabled Radio Group

With labelPosition set to left.

Disabled Group
<Radio.Group
  label="Disabled Group"
  disabled
  labelPosition="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
<Radio.Group label="With suffixes" labelPosition="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>