Radio

Material Design 3 radio button component with multiple variants, colors, and sizes

Radio

Native Contract And Imports

Individual example prerequisites (including composition and demo actions):

@import "@duskmoon-dev/core/base.css";
@import "@duskmoon-dev/core/themes/sunshine";
@import "@duskmoon-dev/core/components/radio.css";
@import "@duskmoon-dev/core/components/form-group.css";

base.css supplies global focus/utility definitions and shared spacing/shape tokens; use your framework reset when appropriate. Substitute the Moonlight theme for dark forms.

Aggregate: @duskmoon-dev/core with Tailwind v4; no-Tailwind: @duskmoon-dev/core/standalone.css. Individual: @duskmoon-dev/core/components/radio.css plus base/theme and form-group.css for associated labels/help. Extensionless components/radio exports generated css and constructable styles, not a behavior runtime.

Use native inputs for values, selection, constraints, submission and reset. Actual disabled or fieldset disabled owns semantic disabling. Use .validator for native interaction-based errors and add .validator-success for native success. Explicit aria-invalid="true" wins over those states and color modifiers, including focus. Supply described error text as well as color. See Validator and Field composition.

Give choices one shared name, distinct value attributes and a native fieldset/legend. Native arrow keys change selection; reset restores the initially checked choice.

Radio buttons allow users to select a single option from a set of mutually exclusive choices. @duskmoon-dev/core provides a complete set of Material Design 3 radio button variants.

Basic Usage

Simply add the .radio class to an <input type="radio">:

Basic Radio

With Label

Wrap the radio in a label for better UX:

Radio with Label

Checked State

Checked Radio

Sizes

Five sizes are available:

Radio Sizes

Color Variants

Primary (Default)

Primary Radio

Secondary

Secondary Radio

Tertiary

Tertiary Radio

Success

Success Radio

Warning

Warning Radio

Error

Error Radio

Info

Info Radio

All Colors Comparison

All Color Variants

States

Disabled

Disabled Radio

Radio Groups

Vertical Group (Default)

Vertical Radio Group

Select a plan

Horizontal Group

Horizontal Radio Group

Form Integration

Radio in Form

Shipping Method

Best Practices

Usage Guidelines

  1. Use for mutually exclusive choices: Radio buttons are ideal when users can select only one option
  2. Provide clear labels: Each option should have a descriptive label
  3. Default selection: Consider providing a sensible default selection
  4. Limit options: Keep the number of options manageable (typically 2-7 items)

Accessibility

  • Use semantic <label> elements to associate labels with radio buttons
  • Ensure all radio buttons in a group share the same name attribute
  • Support keyboard navigation (built-in with native inputs)
  • Provide meaningful labels

Touch Targets

The radio provides adequate touch targets. For mobile-first designs, use larger sizes:

Mobile-Friendly Radio

API Reference

Class Names

Class Description
.radio Base radio styling (required, on input element)
.radio-xs Extra small size (14px)
.radio-sm Small size (16px)
.radio-md Medium size (20px, default)
.radio-lg Large size (24px)
.radio-xl Extra large size (28px)
.radio-primary Primary color variant (default)
.radio-secondary Secondary color variant
.radio-tertiary Tertiary color variant
.radio-success Success color variant
.radio-warning Warning color variant
.radio-error Error color variant
.radio-info Info color variant
.radio-label Label wrapper for radio + text
.radio-group Container for vertical radio group
.radio-group-horizontal Horizontal layout modifier
.radio-group-label Group label text

HTML Structure

Simple radio:

<input type="radio" name="group" class="radio" value="option" aria-label="Example option" />

With label:

<label class="radio-label">
  <input type="radio" name="group" class="radio" />
  <span>Label text</span>
</label>

Radio group:

<div class="radio-group">
  <span class="radio-group-label">Group Label</span>
  <label class="radio-label">
    <input type="radio" name="group" class="radio" value="a" />
    <span>Option A</span>
  </label>
  <label class="radio-label">
    <input type="radio" name="group" class="radio" value="b" />
    <span>Option B</span>
  </label>
</div>

States

State How to Apply
Checked checked attribute
Disabled disabled attribute
Focus Automatic via :focus-visible

Ghost Variant

The ghost variant removes the visible border when not selected — useful for minimal UI contexts.

Ghost Radio