Thumbprint logo

Components

Radio

Boxes for checking and unchecking single values in forms.

Version:4.0.3 •View source•Changelog•Report issue
Install:yarn add @thumbtack/thumbprint-scss

Basic radio buttons

Here are a few tips for using radio buttons:

  • All of the radio buttons in a group share a name attribute. This enables keyboard navigation and ensures that only one radio button with a group is selected at once.
  • The checked attribute allows you to set a default value.
  • The label’s for attribute must match the id of the associated radio. This allows users to select the radio while clicking on the label text.
<div class="tp-radio-wrap">
    <input
        class="tp-radio-input"
        name="input-basic-radio"
        type="radio"
        id="input-basic-radio-a"
        checked
    />
    <div class="tp-radio-image"></div>
    <label class="tp-label" for="input-basic-radio-a">Long Distance Moving</label>
</div>
<div class="tp-radio-wrap">
    <input class="tp-radio-input" name="input-basic-radio" type="radio" id="input-basic-radio-b" />
    <div class="tp-radio-image"></div>
    <label class="tp-label" for="input-basic-radio-b">Furniture Moving and Heavy Lifting</label>
</div>
<div class="tp-radio-wrap">
    <input class="tp-radio-input" name="input-basic-radio" type="radio" id="input-basic-radio-c" />
    <div class="tp-radio-image"></div>
    <label class="tp-label" for="input-basic-radio-c">Pool Table Moving</label>
</div>

Disabled radio buttons

Add the disabled attribute to the input element to make it visually and functionally disabled.

You should also use tp-label--disabled to visually disable the label.

<div class="tp-radio-wrap">
    <input
        class="tp-radio-input"
        name="input-disabed"
        id="input-disabed-a"
        type="radio"
        checked
        disabled
    />
    <div class="tp-radio-image"></div>
    <label class="tp-label tp-label--disabled" for="input-disabed-a">Long Distance Moving</label>
</div>
<div class="tp-radio-wrap">
    <input class="tp-radio-input" name="input-disabed" id="input-disabed-b" type="radio" disabled />
    <div class="tp-radio-image"></div>
    <label class="tp-label tp-label--disabled" for="input-disabed-b">
        Furniture Moving and Heavy Lifting
    </label>
</div>
<div class="tp-radio-wrap">
    <input class="tp-radio-input" name="input-disabed" id="input-disabed-c" type="radio" disabled />
    <div class="tp-radio-image"></div>
    <label class="tp-label tp-label--disabled" for="input-disabed-c">Pool Table Moving</label>
</div>

Radio button with an error

The tp-radio-input--bad-news class can be used to visually represent an error.

This class only changes the radio button’s color. It should be used alongside an error message that helps users advance through the form.

<div class="tp-radio-wrap">
    <input
        class="tp-radio-input tp-radio-input--bad-news"
        name="input-error"
        id="input-error-a"
        type="radio"
        checked
    />
    <div class="tp-radio-image"></div>
    <label class="tp-label tp-label--bad-news" for="input-error-a">Long Distance Moving</label>
</div>