Radio

FrontAlign radios are built directly on native <input type="radio"> elements — no JavaScript, no synthetic controls. Custom appearance is applied via CSS, so they remain fully accessible, keyboard-navigable, and form-serializable out of the box.

Basic Usage

Wrap .form-radio inputs inside .group-radio. All radios in a group share the same name attribute so only one can be selected at a time.

<div class="group-radio">
  <input class="form-radio" id="plan-free" type="radio" name="plan" value="free" checked />
  <label class="form-label" for="plan-free">Free</label>
</div>

<div class="group-radio">
  <input class="form-radio" id="plan-pro" type="radio" name="plan" value="pro" />
  <label class="form-label" for="plan-pro">Pro</label>
</div>

<div class="group-radio">
  <input class="form-radio" id="plan-enterprise" type="radio" name="plan" value="enterprise" />
  <label class="form-label" for="plan-enterprise">Enterprise</label>
</div>

Free

Pro

Enterprise

Inline Layout

Add .group-inline to .group-radio to place the control and its label side by side on one line. Stack multiple inline groups in a flex row for a horizontal option list.

<div class="is-flex flex-wrap gap-3">
  <div class="group-radio group-inline">
    <input class="form-radio" id="size-sm" type="radio" name="size" value="sm" />
    <label class="form-label" for="size-sm">Small</label>
  </div>
  <div class="group-radio group-inline">
    <input class="form-radio" id="size-md" type="radio" name="size" value="md" checked />
    <label class="form-label" for="size-md">Medium</label>
  </div>
  <div class="group-radio group-inline">
    <input class="form-radio" id="size-lg" type="radio" name="size" value="lg" />
    <label class="form-label" for="size-lg">Large</label>
  </div>
</div>

Small

Medium

Large

Customize Color

For the color of all form elements, use --accent and --accent-constrast. By default, accent takes its value from --primary. The style of all form elements will be styled from --primary. However, if you want to separate and differentiate this design, provide a separate value for --accent.

:root {
    --accent:#f5db13;
}

Size Variants

Radios support is-small, is-medium, and is-large to scale the control glyph independently of the label text.

<div class="group-radio group-inline">
  <input class="form-radio" id="sz-rad-md" type="radio" name="sz-radio" />
  <label class="form-label" for="sz-rad-md">Default</label>
</div>

<div class="group-radio group-inline">
  <input class="form-radio is-medium" id="sz-rad-lg" type="radio" name="sz-radio" />
  <label class="form-label" for="sz-rad-lg">Medium</label>
</div>

<div class="group-radio group-inline">
  <input class="form-radio is-large" id="sz-rad-xl" type="radio" name="sz-radio" />
  <label class="form-label" for="sz-rad-xl">Large</label>
</div>

Default

Medium

Large

Disabled State

A disabled radio is non-interactive, reduced to 65% opacity, and shows an × glyph to communicate unavailability clearly.

<div class="group-radio">
  <input class="form-radio" id="rad-dis" type="radio" name="rad-disabled" disabled />
  <label class="form-label" for="rad-dis">Unavailable plan</label>
</div>

Unavailable plan

Class Reference

Class	Element	Purpose
`.group-radio`	Wrapper	Vertical spacing and alignment container for a radio + label pair.
`.group-inline`	Modifier on wrapper	Renders the control and label on a single horizontal line using `inline-flex`.
`.form-radio`	`input[type="radio"]`	Custom radio with accent-colored dot and focus ring.
`.radio-invalid`	`.form-radio`	Manual invalid state for radio inputs.
`.is-small` / `.is-medium` / `.is-large`	`.form-radio`	Scales the control glyph size independently of the label.
`--radio-icon`	`.form-radio`	CSS custom property holding the checked-state glyph. Override the same way as `--check-icon`.