Radio

.radio is for input[type="radio"] elements.

Applicable Elements

Basic Usage

<fieldset class="fieldset">
  <label class="label"><input class="radio" type="radio" name="neta" checked />Iwashi</label>
  <label class="label"><input class="radio" type="radio" name="neta" />Anago</label>
  <div>
    <input class="radio" type="radio" id="wasabi" name="neta" />
    <label class="label" for="wasabi">Tamago</label>
  </div>
</fieldset>

States

<fieldset className="fieldset">
  <label class="label error"><input class="radio error" type="radio" name="drink" checked />Tea</label>
  <label class="label error"><input class="radio error" type="radio" name="drink" />Beer</label>
</fieldset>

<fieldset className="fieldset" disabled>
  <label class="label"><input class="radio" type="radio" name="seasoning" checked />Soy Sauce</label>
  <label class="label"><input class="radio" type="radio" name="seasoning" />Salt</label>
</fieldset>

React component Advanced

<Radio/> renders a single <input class="radio" type="radio" /> element.

It inherits the error property from a Fieldset component and automatically applies the error style.

Q&A

How do I customize the outline shown on focus?

You can set the outline property in CSS.
However, we recommend keeping the default outline for accessibility.