Radio — RenDS Components

About

Overview

A radio group lets the user pick exactly one option from 2–5 alternatives. Past 5, switch to a Select dropdown — radios start to feel cramped and hard to scan. Each radio is a real <input type="radio">, so arrow-key navigation between them works out of the box.

All radios in a group share the same name. Without it, each radio behaves as its own group — selecting one doesn't deselect the others, and only the last one submits. Wrap them in a fieldset with a legend for the group's label.

Live

Demo

How would you like to receive notifications?

All updates Mentions only Nothing

<fieldset>
  <legend>How would you like to receive notifications?</legend>
  <div class="ren-radio-group">
    <label class="ren-radio">
      <input type="radio" name="notif" value="all" checked>
      <span class="ren-radio-control"></span>
      <span>All updates</span>
    </label>
    <label class="ren-radio">
      <input type="radio" name="notif" value="mentions">
      <span class="ren-radio-control"></span>
      <span>Mentions only</span>
    </label>
    <label class="ren-radio">
      <input type="radio" name="notif" value="none">
      <span class="ren-radio-control"></span>
      <span>Nothing</span>
    </label>
  </div>
</fieldset>

Layouts

Variants

Vertical

Option A Option B Option C

Horizontal

Small Medium Large

Disabled

Selected & disabled Unselected & disabled

Reference

API

CSS classes

Class	Effect
`.ren-radio`	Single radio. The label wrapper around `<input type="radio">` + `.ren-radio-control`.
`.ren-radio-control`	The painted circle. Fills with the accent dot when its sibling input is checked.
`.ren-radio-group`	Container for multiple radios. Default is vertical stack with consistent spacing.
`.ren-radio-group-horizontal`	Lays the group out as a wrap-friendly horizontal row.

No JavaScript or Web Component. The browser handles the radio-group selection logic via the shared name attribute.

Inclusive by default

Accessibility

Radios are one of the platform's most accessible form controls — when grouped correctly, the browser handles the rest.

Keyboard

TabMoves focus to the currently selected radio in the group (or the first radio if none is selected).

↑ / ↓ / ← / →Move focus AND selection to the next radio in the group. Skips disabled radios.

SpaceSelects the focused radio (rarely needed — arrow keys already select).

Group labelling

Always wrap a radio group in a <fieldset> with a <legend>. Screen readers announce the legend before each option, so users hear the question and the answer in context.

One radio is not enough. A single radio with no siblings is meaningless — it can't be turned off. Use a Checkbox or Switch instead.

Patterns

Examples

Choosing a plan

<fieldset>
  <legend>Choose a plan</legend>
  <div class="ren-radio-group">
    <label class="ren-radio">
      <input type="radio" name="plan" value="basic" checked>
      <span class="ren-radio-control"></span>
      <span>
        <strong>Basic</strong> — $9/mo, 1 project
      </span>
    </label>
    <label class="ren-radio">
      <input type="radio" name="plan" value="pro">
      <span class="ren-radio-control"></span>
      <span>
        <strong>Pro</strong> — $29/mo, unlimited
      </span>
    </label>
  </div>
</fieldset>