• Lightest
  • Light
  • Dark
  • Darkest
  • Medium
  • Large
  • LTR
  • RTL

Radio

Component status
Contribution
Last releasedOctober 25, 2021
Current version@spectrum-css/radio@3.0.5

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.
Radio buttons should not be used on their own, they should always be used within a FieldGroup.

Variants


Standard
Verified

Default


Invalid


Disabled


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-0">
        <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-1" 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-0">
        <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-1" 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-0-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-1-disabled" checked 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


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--emphasized">
        <input type="radio" name="pets" class="spectrum-Radio-input" id="radio-0">
        <span class="spectrum-Radio-button"></span>
        <label class="spectrum-Radio-label" for="radio-0">Kittens</label>
      </div>
      <br>
      <div class="spectrum-Radio spectrum-Radio--emphasized">
        <input type="radio" name="pets" class="spectrum-Radio-input" id="radio-1" 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--emphasized is-invalid">
        <input type="radio" name="pets" class="spectrum-Radio-input" id="radio-0">
        <span class="spectrum-Radio-button"></span>
        <label class="spectrum-Radio-label" for="radio-0">Kittens</label>
      </div>
      <br>
      <div class="spectrum-Radio spectrum-Radio--emphasized is-invalid">
        <input type="radio" name="pets" class="spectrum-Radio-input" id="radio-1" 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--emphasized">
        <input type="radio" name="pets" class="spectrum-Radio-input" id="radio-0-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--emphasized">
        <input type="radio" name="pets" class="spectrum-Radio-input" id="radio-1-disabled" checked disabled>
        <span class="spectrum-Radio-button"></span>
        <label class="spectrum-Radio-label" for="radio-1">Puppies</label>
      </div>
    </form>

  </div>
</div>

Label below
Verified

Show markup
<form>
  <div class="spectrum-Radio spectrum-Radio--labelBelow">
    <input type="radio" name="pets" class="spectrum-Radio-input" id="radio-0">
    <span class="spectrum-Radio-button"></span>
    <label class="spectrum-Radio-label" for="radio-0">A label</label>
  </div>
</form>

Wrapping behavior
Verified

Show markup
<div class="spectrum-Radio">
  <input type="radio" name="longname" class="spectrum-Radio-input" id="radio-3">
  <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>

Migration Guide


Quiet and emphasized

Spectrum has chosen the variant previously known as quiet to be the default and has added an emphasized variant with the same styles as the previous default.
If you were using the quiet variant, the .spectrum-Radio--quiet class is no longer required and can be removed.
If you need a switch to look like it did before this change, add .spectrum-Radio--emphasized.