Skip to main content

Radios

Overview​

The Radios component wraps multiple Radio components in a Bulma-styled group. Use it for vertical lists of mutually exclusive choices, such as RSVP or selection lists.

Import​

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

Props​

PropTypeDescription
classNamestringAdditional CSS classes.
childrenReact.ReactNodeRadio elements to render in the group.
...All Bulma helper props(See Helper Props)

Usage​

Grouped Radios (All Disabled Example)​

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

Accessibility​

  • The group is rendered as a <div class="radios"> containing labeled radio buttons.
  • Each child should be a Radio for proper labeling and accessibility.
  • Use the same name for all radios in a group to ensure mutual exclusivity.
  • Radio: Individual radio button.
  • Field: For labeled/grouped form fields.

Additional Resources​