• Light
  • Dark
  • Darkest
  • Medium
  • Large
  • LTR
  • RTL
  • Default
  • Express

Radio

Component status
Contribution
Last releasedMay 23, 2023
Current version@spectrum-css/radio@7.0.33
View guidelines
Spectrum website
View repository
GitHub
View package
npm

Usage notes

  • Radio buttons allow users to select a single option from a list of mutually exclusive options. All possible options are exposed up front for users to compare.
  • Invalid radio buttons are signified by alert HelpText and Icon included in FieldGroup.
  • Radio buttons should not be used on their own, they should always be used within a FieldGroup.

Variants

Sizing
Verified

S


M (default)


L


XL


Show markup
<div class="spectrum-Examples">

  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">S</h4>

    <form>
      <div class="spectrum-Radio spectrum-Radio--sizeS">
        <input type="radio" name="pets" class="spectrum-Radio-input" id="radio-0">
        <span class="spectrum-Radio-button spectrum-Radio-button--sizeS"></span>
        <label class="spectrum-Radio-label spectrum-Radio-label--sizeS" for="radio-0">Kittens</label>
      </div>
      <br>
      <div class="spectrum-Radio spectrum-Radio--sizeS">
        <input type="radio" name="pets" class="spectrum-Radio-input" id="radio-1" checked>
        <span class="spectrum-Radio-button spectrum-Radio-button--sizeS"></span>
        <label class="spectrum-Radio-label spectrum-Radio-label--sizeS" for="radio-1">Puppies</label>
      </div>
    </form>

  </div>

  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">M (default)</h4>

    <form>
      <div class="spectrum-Radio spectrum-Radio--sizeM">
        <input type="radio" name="pets" class="spectrum-Radio-input" id="radio-2">
        <span class="spectrum-Radio-button spectrum-Radio-button--sizeM"></span>
        <label class="spectrum-Radio-label spectrum-Radio-label--sizeM" for="radio-0">Kittens</label>
      </div>
      <br>
      <div class="spectrum-Radio spectrum-Radio--sizeM">
        <input type="radio" name="pets" class="spectrum-Radio-input" id="radio-3" checked>
        <span class="spectrum-Radio-button spectrum-Radio-button--sizeM"></span>
        <label class="spectrum-Radio-label spectrum-Radio-label--sizeM" for="radio-1">Puppies</label>
      </div>
    </form>

  </div>

  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">L</h4>

    <form>
      <div class="spectrum-Radio spectrum-Radio--sizeL">
        <input type="radio" name="pets" class="spectrum-Radio-input" id="radio-4">
        <span class="spectrum-Radio-button spectrum-Radio-button--sizeL"></span>
        <label class="spectrum-Radio-label spectrum-Radio-label--sizeL" for="radio-0">Kittens</label>
      </div>
      <br>
      <div class="spectrum-Radio spectrum-Radio--sizeL">
        <input type="radio" name="pets" class="spectrum-Radio-input" id="radio-5" checked>
        <span class="spectrum-Radio-button spectrum-Radio-button--sizeL"></span>
        <label class="spectrum-Radio-label spectrum-Radio-label--sizeL" for="radio-1">Puppies</label>
      </div>
    </form>

  </div>

  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">XL</h4>

    <form>
      <div class="spectrum-Radio spectrum-Radio--sizeXL">
        <input type="radio" name="pets" class="spectrum-Radio-input" id="radio-6">
        <span class="spectrum-Radio-button spectrum-Radio-button--sizeXL"></span>
        <label class="spectrum-Radio-label spectrum-Radio-label--sizeXL" for="radio-0">Kittens</label>
      </div>
      <br>
      <div class="spectrum-Radio spectrum-Radio--sizeXL">
        <input type="radio" name="pets" class="spectrum-Radio-input" id="radio-7" checked>
        <span class="spectrum-Radio-button spectrum-Radio-button--sizeXL"></span>
        <label class="spectrum-Radio-label spectrum-Radio-label--sizeXL" for="radio-1">Puppies</label>
      </div>
    </form>

  </div>
</div>

Standard
Verified

Default


Invalid


Disabled


Read-only


Show markup
<div class="spectrum-Examples">
  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Default</h4>

    <form>
      <div class="spectrum-Radio">
        <input type="radio" name="pets" class="spectrum-Radio-input" id="radio-8">
        <span class="spectrum-Radio-button"></span>
        <label class="spectrum-Radio-label" for="radio-0">Kittens</label>
      </div>
      <br>
      <div class="spectrum-Radio">
        <input type="radio" name="pets" class="spectrum-Radio-input" id="radio-9" checked>
        <span class="spectrum-Radio-button"></span>
        <label class="spectrum-Radio-label" for="radio-1">Puppies</label>
      </div>
    </form>

  </div>

  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Invalid</h4>

    <form>
      <div class="spectrum-Radio is-invalid">
        <input type="radio" name="pets" class="spectrum-Radio-input" id="radio-10">
        <span class="spectrum-Radio-button"></span>
        <label class="spectrum-Radio-label" for="radio-0">Kittens</label>
      </div>
      <br>
      <div class="spectrum-Radio is-invalid">
        <input type="radio" name="pets" class="spectrum-Radio-input" id="radio-11" checked>
        <span class="spectrum-Radio-button"></span>
        <label class="spectrum-Radio-label" for="radio-1">Puppies</label>
      </div>
    </form>

  </div>

  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Disabled</h4>

    <form>
      <div class="spectrum-Radio">
        <input type="radio" name="pets" class="spectrum-Radio-input" id="radio-12-disabled" disabled>
        <span class="spectrum-Radio-button"></span>
        <label class="spectrum-Radio-label" for="radio-0">Kittens</label>
      </div>
      <br>
      <div class="spectrum-Radio">
        <input type="radio" name="pets" class="spectrum-Radio-input" id="radio-13-disabled" checked disabled>
        <span class="spectrum-Radio-button"></span>
        <label class="spectrum-Radio-label" for="radio-1">Puppies</label>
      </div>
    </form>

  </div>

  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Read-only</h4>

    <form>
      <div class="spectrum-Radio is-readOnly">
        <input type="radio" name="pets" class="spectrum-Radio-input" id="radio-14" readonly="readonly" disabled>
        <span class="spectrum-Radio-button"></span>
        <label class="spectrum-Radio-label" for="radio-0">Kittens</label>
      </div>
      <br>
      <div class="spectrum-Radio is-readOnly">
        <input type="radio" name="pets" class="spectrum-Radio-input" id="radio-15" checked readonly="readonly" disabled>
        <span class="spectrum-Radio-button"></span>
        <label class="spectrum-Radio-label" for="radio-1">Puppies</label>
      </div>
    </form>

  </div>
</div>

Emphasized
Verified

Default


Invalid


Disabled


Read-only


Show markup
<div class="spectrum-Examples">
  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Default</h4>

    <form>
      <div class="spectrum-Radio spectrum-Radio--sizeM spectrum-Radio--emphasized">
        <input type="radio" name="pets" class="spectrum-Radio-input" id="radio-16">
        <span class="spectrum-Radio-button"></span>
        <label class="spectrum-Radio-label" for="radio-0">Kittens</label>
      </div>
      <br>
      <div class="spectrum-Radio spectrum-Radio--sizeM spectrum-Radio--emphasized">
        <input type="radio" name="pets" class="spectrum-Radio-input" id="radio-17" checked>
        <span class="spectrum-Radio-button"></span>
        <label class="spectrum-Radio-label" for="radio-1">Puppies</label>
      </div>
    </form>

  </div>

  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Invalid</h4>

    <form>
      <div class="spectrum-Radio spectrum-Radio--sizeM spectrum-Radio--emphasized is-invalid">
        <input type="radio" name="pets" class="spectrum-Radio-input" id="radio-18">
        <span class="spectrum-Radio-button"></span>
        <label class="spectrum-Radio-label" for="radio-0">Kittens</label>
      </div>
      <br>
      <div class="spectrum-Radio spectrum-Radio--sizeM spectrum-Radio--emphasized is-invalid">
        <input type="radio" name="pets" class="spectrum-Radio-input" id="radio-19" checked>
        <span class="spectrum-Radio-button"></span>
        <label class="spectrum-Radio-label" for="radio-1">Puppies</label>
      </div>
    </form>

  </div>

  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Disabled</h4>

    <form>
      <div class="spectrum-Radio spectrum-Radio--sizeM spectrum-Radio--emphasized">
        <input type="radio" name="pets" class="spectrum-Radio-input" id="radio-20-disabled" disabled>
        <span class="spectrum-Radio-button"></span>
        <label class="spectrum-Radio-label" for="radio-0">Kittens</label>
      </div>
      <br>
      <div class="spectrum-Radio spectrum-Radio--sizeM spectrum-Radio--emphasized">
        <input type="radio" name="pets" class="spectrum-Radio-input" id="radio-21-disabled" checked disabled>
        <span class="spectrum-Radio-button"></span>
        <label class="spectrum-Radio-label" for="radio-1">Puppies</label>
      </div>
    </form>

  </div>

  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Read-only</h4>

    <form>
      <div class="spectrum-Radio spectrum-Radio--sizeM spectrum-Radio--emphasized is-readOnly">
        <input type="radio" name="pets" class="spectrum-Radio-input" id="radio-22" readonly="readonly" disabled>
        <span class="spectrum-Radio-button"></span>
        <label class="spectrum-Radio-label" for="radio-0">Kittens</label>
      </div>
      <br>
      <div class="spectrum-Radio spectrum-Radio--sizeM is-readOnly">
        <input type="radio" name="pets" class="spectrum-Radio-input" id="radio-23" checked readonly="readonly" disabled>
        <span class="spectrum-Radio-button"></span>
        <label class="spectrum-Radio-label" for="radio-1">Puppies</label>
      </div>
    </form>

  </div>
</div>

Wrapping behavior
Verified

Show markup
<div class="spectrum-Radio">
  <input type="radio" name="longname" class="spectrum-Radio-input" id="radio-24">
  <span class="spectrum-Radio-button"></span>
  <label class="spectrum-Radio-label" for="radio-3">Radio with an extraordinarily long label please don't do this but if you did it should wrap text when it gets longer than the container which contains the radio which has an unacceptably long label</label>
</div>

Custom Properties API

This component can be modified via its --mod-* prefixed custom properties. A list of those prefixed custom properties can be found here.

Migration Guide

T-shirt sizing

Radio Button now supports t-shirt sizing and requires that you specify the size by adding a .spectrum-RadioButton--size* class. Default styling is medium.

Read-only

Radio Button now includes a read-only state in addition to the disabled state.

  • Read-only radio buttons are disabled, but not all disabled radio buttons are read-only.
  • Read-only radio buttons do not have a focus ring, but the button should be focusable.]

Invalid/Error State