Radio button

The radio button component. When multiple options are available, typically accessible forms do the following:

• They wrap all the possible options for that same group into a <fieldset> or a div with the role set to radiogroup.
• The radios will have the name set to a common value, so that only one of the possible options can be picked.

To style the fieldset, you mark it with the class GenshiRadioGroup. Each separate radio button can continue using the GenshiInput class, with __label, __control and __helper as elements.

<fieldset class="GenshiRadioGroup">
  <div class="GenshiInput">
    <label class="GenshiInput__label">
      <input type="radio" name="update" value="now" class="GenshiInput__control" />
      Install update now
    </label>
    <small class="GenshiInput__helper">The application will be restarted.</small>
  </div>
  <fieldset class="GenshiRadioGroup"></fieldset>
</fieldset>

Inline mode

If you don’t plan on adding helpers, your field set will still look vertical by default.

However, this can be changed by applying the --inline modifier to the GenshiRadioGroup:

Validation

Radio buttons may be valid or invalid.

However, you don’t usually mark individual options as invalid. Typically, you mark an entire fieldset as invalid.

Component sizes