Radio buttons

Allow users to select one option from a list. This component uses the base structure of the Input component.

Figma component (opens in new tab)Storybook documentation (opens in new tab)

Legend

Option 1

Option 2

React

<RadioButtons label="Legend">
  <Radio name="radio" id="radio_1" value="1" label="Option 1" />
  <Radio name="radio" id="radio_2" value="2" label="Option 2" />
</RadioButtons>

CSS

<div class="input">
  <legend class="input_label">Legend</legend>
  <div class="input_control radios">
    <div class="radio">
      <input type="radio" name="radio" id="radio_1" value="radio_1" class="radio_control" />
      <label for="radio_1" class="radio_label">Option 1</label>
    </div>
    <div class="radio">
      <input type="radio" name="radio" id="radio_2" value="radio_2" class="radio_control" />
      <label for="radio_2" class="radio_label">Option 2</label>
    </div>
  </div>
</div>

Usage

To follow user-centred design and GDPR best practices, we should only ask users for information we need. In that respect, all form fields of the Pallote component library are by default required.

For the CSS library, you do not need to add the required property to the form fields, it is added automatically with the javascript import.

Props

Direction

Portrait

Option 1

Option 2

Landscape

Option 1

Option 2

React

<RadioButtons label="Portrait">
  <Radio name="portrait" id="portrait_1" value="1" label="Option 1" />
  <Radio name="portrait" id="portrait_2" value="2" label="Option 2" />
</RadioButtons>

<RadioButtons label="Landscape" direction="landscape">
  <Radio name="landscape" id="landscape_1" value="1" label="Option 1" />
  <Radio name="landscape" id="landscape_2" value="2" label="Option 2" />
</RadioButtons>

CSS

<div class="input">
  <legend class="input_label">Portrait</legend>
  <div class="input_control radios">
    <div class="radio">
      <input type="radio" name="portrait" id="portrait_1" value="portrait_1" class="radio_control" />
      <label for="portrait_1" class="radio_label">Option 1</label>
    </div>
    <div class="radio">
      <input type="radio" name="portrait" id="portrait_2" value="portrait_2" class="radio_control" />
      <label for="portrait_2" class="radio_label">Option 2</label>
    </div>
  </div>
</div>
        
<div class="input input-landscape">
  <legend class="input_label">Landscape</legend>
  <div class="input_control radios">
    <div class="radio">
      <input type="radio" name="landscape" id="landscape_1" value="landscape_1" class="radio_control" />
      <label for="landscape_1" class="radio_label">Option 1</label>
    </div>
    <div class="radio">
      <input type="radio" name="landscape" id="landscape_2" value="landscape_2" class="radio_control" />
      <label for="landscape_2" class="radio_label">Option 2</label>
    </div>
  </div>
</div>

Error

Error

Option 1

Option 2

React

<RadioButtons label="Error" error="This is the error message">
  <Radio name="error" id="error_1" value="1" label="Option 1" />
  <Radio name="error" id="error_2" value="2" label="Option 2" />
</RadioButtons>

CSS

<div class="input input-error">
  <legend class="input_label">Error</legend>
  <p class="input_error">This is the error message</p>
  <div class="input_control radios">
    <div class="radio">
      <input type="radio" name="error" id="error_1" value="error_1" class="radio_control" />
      <label for="error_1" class="radio_label">Option 1</label>
    </div>
    <div class="radio">
      <input type="radio" name="error" id="error_2" value="error_2" class="radio_control" />
      <label for="error_2" class="radio_label">Option 2</label>
    </div>
  </div>
</div>

Disabled

Disabled

Option 1

Option 2

React

<RadioButtons label="Disabled" disabled>
  <Radio name="disabled" id="disabled_1" value="1" label="Option 1" />
  <Radio name="disabled" id="disabled_2" value="2" label="Option 2" />
</RadioButtons>

CSS

<div class="input input-disabled">
  <legend class="input_label">Disabled</legend>
  <div class="input_control radios">
    <div class="radio">
      <input type="radio" name="disabled" id="disabled_1" value="disabled_1" class="radio_control" />
      <label for="disabled_1" class="radio_label">Option 1</label>
    </div>
    <div class="radio">
      <input type="radio" name="disabled" id="disabled_2" value="disabled_2" class="radio_control" />
      <label for="disabled_2" class="radio_label">Option 2</label>
    </div>
  </div>
</div>

Optional

Optional

Option 1

Option 2

React

<RadioButtons label="Optional" optional>
  <Radio name="optional" id="optional_1" value="1" label="Option 1" />
  <Radio name="optional" id="optional_2" value="2" label="Option 2" />
</RadioButtons>

CSS

<div class="input input-optional">
  <legend class="input_label">Optional</legend>
  <div class="input_control radios">
    <div class="radio">
      <input type="radio" name="optional" id="optional_1" value="optional_1" class="radio_control" />
      <label for="optional_1" class="radio_label">Option 1</label>
    </div>
    <div class="radio">
      <input type="radio" name="optional" id="optional_2" value="optional_2" class="radio_control" />
      <label for="optional_2" class="radio_label">Option 2</label>
    </div>
  </div>
</div>

Hint

Hint

This is a hint to give more details

Option 1

Option 2

React

<RadioButtons label="Hint" hint="This is a hint to give more details">
  <Radio name="hint" id="hint_1" value="1" label="Option 1" />
  <Radio name="hint" id="hint_2" value="2" label="Option 2" />
</RadioButtons>

CSS

<div class="input">
  <legend class="input_label">Hint</legend>
  <p class="input_hint">This is a hint to give more details</p>
  <div class="input_control radios">
    <div class="radio">
      <input type="radio" name="hint" id="hint_1" value="hint_1" class="radio_control" />
      <label for="hint_1" class="radio_label">Option 1</label>
    </div>
    <div class="radio">
      <input type="radio" name="hint" id="hint_2" value="hint_2" class="radio_control" />
      <label for="hint_2" class="radio_label">Option 2</label>
    </div>
  </div>
</div>

Dense

Reduce the font size and radio size for a more compact appearance.

Dense

Option 1

Option 2

React

<RadioButtons id="dense" label="Dense" dense>
  <Radio name="dense" id="dense_1" value="1" label="Option 1" />
  <Radio name="dense" id="dense_2" value="2" label="Option 2" />
</RadioButtons>

CSS

<div class="input input-dense">
  <legend class="input_label">Dense</legend>
  <div class="input_control radios">
    <div class="radio">
      <input type="radio" name="dense" id="dense_1" value="dense_1" class="radio_control" />
      <label for="dense_1" class="radio_label">Option 1</label>
    </div>
    <div class="radio">
      <input type="radio" name="dense" id="dense_2" value="dense_2" class="radio_control" />
      <label for="dense_2" class="radio_label">Option 2</label>
    </div>
  </div>
</div>

HideLabel

Hide the label visually while keeping it accessible to screen readers.

Hidden Label

Option 1

Option 2

React

<RadioButtons id="hideLabel" label="Hidden Label" hideLabel>
  <Radio name="hideLabel" id="hideLabel_1" value="1" label="Option 1" />
  <Radio name="hideLabel" id="hideLabel_2" value="2" label="Option 2" />
</RadioButtons>

CSS

<div class="input">
  <legend class="input_label sr-only">Hidden Label</legend>
  <div class="input_control radios">
    <div class="radio">
      <input type="radio" name="hideLabel" id="hideLabel_1" value="hideLabel_1" class="radio_control" />
      <label for="hideLabel_1" class="radio_label">Option 1</label>
    </div>
    <div class="radio">
      <input type="radio" name="hideLabel" id="hideLabel_2" value="hideLabel_2" class="radio_control" />
      <label for="hideLabel_2" class="radio_label">Option 2</label>
    </div>
  </div>
</div>