Skip to main content

Radio

Overview​

The Radio component provides a Bulma-styled radio button input with flexible labels and helper classes. Use it for mutually exclusive choices in forms—either standalone or grouped (with the same name).

Import​

import { Radio, Radios, Control } from '@allxsmith/bestax-bulma';

Props​

PropTypeDescription
disabledbooleanWhether the radio is disabled.
classNamestringAdditional CSS classes.
childrenReact.ReactNodeLabel/content for the radio.
...All standard <input type="radio"> and Bulma helper props(See Helper Props)

Usage​

Mutually Exclusive Radios (Only One Can Be Selected)​

<Control>
  <Radio name="mutuallyExclusive"> Yes </Radio>
  <Radio name="mutuallyExclusive"> No </Radio>
  <Radio name="mutuallyExclusive"> Maybe </Radio>
</Control>

Default Selected Radio​

<Control>
  <Radio name="pet"> Cat </Radio>
  <Radio name="pet" defaultChecked>
    {' '}
    Dog{' '}
  </Radio>
</Control>

Disabled Radios​

<Control>
  <Radio name="response" disabled>
    {' '}
    Attend{' '}
  </Radio>
  <Radio name="response" disabled>
    {' '}
    Decline{' '}
  </Radio>
  <Radio name="response" disabled>
    {' '}
    Tentative{' '}
  </Radio>
</Control>

List of Radios (Grouped with the Radios Wrapper)​

<Radios>
  <Radio name="event" disabled>
    {' '}
    Attend{' '}
  </Radio>
  <Radio name="event" disabled>
    {' '}
    Decline{' '}
  </Radio>
  <Radio name="event" disabled>
    {' '}
    Tentative{' '}
  </Radio>
</Radios>

Accessibility​

  • Each Radio is rendered as a <label> wrapping an <input type="radio"> and the label text, for optimal accessibility.
  • Use the same name prop for a group of radios to ensure only one can be selected.

Additional Resources​