Skip to content
Indiana University Logo
Rivet Software Design System
  • Components Add-ons Content guide
  • What is Rivet? Blog Roadmap Changelog
  • Community Workshop
Install via NPM Download CSS & JS Hosted assets
Navigation
    • Components
    • Add-ons
    • Content guide
    • What is Rivet?
    • Blog
    • Roadmap
    • Changelog
  • Community Workshop
  • Use Rivet
Resources
  • User Experience Office
  • Accessibility Evaluations
  • Rivet Software Design System
  • IU Framework for WCMS
Version 1.2.1
  • Information
    • Roadmap
    • Changelog
    • Component status
    • Contributing
  • Page content
    • Badges
    • Links
    • Lists
    • Media Object
    • Tables
    • Tabs This component requires JS
  • Forms
    • Buttons
    • Segmented Buttons
    • Checkboxes
    • File input This component requires JS
    • Input group
    • Radio buttons
    • Select element
    • Text inputs
  • Layout
    • Box
    • Grid
    • Panels
    • Spacing
    • Typography
  • Navigation
    • Breadcrumb
    • Dropdown This component requires JS
    • Footer
    • Header This component requires JS
    • Pagination
  • Overlays & Feedback
    • Alerts This component requires JS
    • Loading indicator
    • Modals This component requires JS
  • Utilities
    • Border
    • Display
    • Text
    • Visibility
    • z-index
Ready

Radio buttons

Radio buttons allow users to select a single value out of a set number of choices.

Inline radios example

Radio inputs inline
<form>
    <fieldset>
        <legend class="sr-only">Radio inputs inline</legend>
        <ul class="rvt-inline-list">
            <li>
                <input type="radio" name="radio-demo" id="radio-1">
                <label for="radio-1" class="rvt-m-right-md">Option one</label>
            </li>
            <li>
                <input type="radio" name="radio-demo" id="radio-2">
                <label for="radio-2">Option two</label>
            </li>
        </ul>
    </fieldset>
</form>

Radio list example

Radio list
<form>
    <fieldset>
        <legend class="sr-only">Radio list</legend>
        <ul class="rvt-plain-list">
            <li>
                <input type="radio" name="radio-demo-2" id="radio-3">
                <label for="radio-3" class="rvt-m-right-sm">Option one</label>
            </li>
            <li>
                <input type="radio" name="radio-demo-2" id="radio-4">
                <label for="radio-4">Option two</label>
            </li>
            <li>
                <input type="radio" name="radio-demo-2" id="radio-4-disabled" disabled>
                <label for="radio-4-disabled">Option three disabled</label>
            </li>
            <li>
                <input type="radio" name="radio-demo-2" id="radio-5" disabled checked>
                <label for="radio-5">Option four checked and disabled</label>
            </li>
        </ul>
    </fieldset>
</form>

Alternate markup with hidden fields

This example includes a hidden input in the markup, as some frameworks require. It requires that the input and label be wrapped in a .rvt-radio-wrapper. Here we are using the wrapper class on a <li>, but it will also work with generic elements like a <div> and <span>.

Radio inputs inline
<fieldset>
    <legend class="rvt-ts-23 rvt-m-bottom-lg">Radio inputs inline</legend>
    <ul class="rvt-inline-list">
        <li class="rvt-radio-wrapper">
            <input type="radio" name="radio-demo" id="radio-6">
            <input type="hidden">
            <label for="radio-6">Option one</label>
        </li>
        <li class="rvt-radio-wrapper">
            <input type="radio" name="radio-demo" id="radio-7">
            <input type="hidden">
            <label for="radio-7">Option two</label>
        </li>
    </ul>
</fieldset>

When to use

Use radio button when you need to present users with a few mutually exclusive choices and they can only select one option.

When to consider something else

When you have a longer list of mutually exclusive options (for example, a list of 50 states), consider using a select input.

Radio button labels

  • Write the label as a phrase, not as a sentence, and use no ending punctuation
  • Use parallel phrasing between related radio inputs, and try to keep the length about the same for all labels
  • Focus the label text on the differences among the options. If all the options have the same introductory text, move that text to the group label.
  • Describe just the option with the label. Keep labels brief so it’s easy to refer to them in messages and documentation. If the option requires further explanation, provide the explanation in a static text control using complete sentences and ending punctuation.
  • Use sentence-style capitalization

Radio button group labels

  • Use the group label to explain the purpose of the group, not how to make the selection. Assume that users know how to use radio buttons.
  • All radio button groups need labels. Write the label as a word or phrase, not as a sentence, ending with a colon using static text or a <legend>, when using a fieldset to group radios.

Resources

  • Checkboxes vs. Radio Buttons
  • Mozilla Developer Network Docs
  • MSDN Design Documentation

On this page

    • Inline radios example
    • Radio list example
    • Alternate markup with hidden fields
    • When to use
    • When to consider something else
    • Radio button labels
    • Radio button group labels
    • Resources
Have a question about Rivet?

We're happy to help! If you've found a bug, typo, or have a request, the best way to get in touch is to create an issue on Github.

For all other questions please feel free to email us at rivet@iu.edu

IU Trident Logo

Copyright © The Trustees of Indiana University

  • Privacy Policy
  • Accessibility Help
  • Contact
  • Office of the Vice President for IT
  • University Information Technology Services