Radio

Radio buttons allow one selection from a group of options

import { Radio } from "@nulogy/components";

<Radio id="radio" labelText="Radio button" />

Use when

  • Users need to make a single choice from a set of mutually exclusive options
  • In place of a dropdown when it would be beneficial to see all items up front

Variations

Disabled

<Radio id="disabled-radio" labelText="Radio button" disabled />

Error

<Radio id="error-radio" labelText="Radio button" error />

Checked

<Radio id="checked-radio" labelText="Radio button" defaultChecked="true" />

Guidelines

  • Whenever possible use radio buttons for short lists (~ 5-7)
  • Add labels, errors and default selections with Radio Group
  • Consider using a Select for long lists

Props

NameTypeDefaultDescription

id

String

null

A unique ID for this input

name

String

undefined

Identified that groups inputs together

defaultChecked

Boolean

false

Makes the field checked by default

disabled

Boolean

false

Marks the field as disabled and disallows user input

error

Boolean

false

Marks the field as invalid and turns red

labelText

String

Required

Label for the input

onChange

Function

null

required

Boolean

false

Makes the field require input before the form will submit

className

String

undefined

className passed to the wrapper

checked

boolean

undefined

Whether or not this radio button is the currently selected item in the group

Related components