Radio Group

A native radio group with vertical and horizontal orientations.

Formsforminputselection

Workbench

Rendering Radio Group…

Installation

Copy the source into your project with the CLI. It lands under @/components/ui and is yours to edit.

npx mlola-ui add radio-group

Usage

TSX

import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";

export default function Example() {
  return (
    <RadioGroup label="Billing" defaultValue="yearly" name="billing">
      <RadioGroupItem value="monthly" label="Monthly" />
      <RadioGroupItem value="yearly" label="Yearly" description="Two months free." />
    </RadioGroup>
  );
}

Styling comes from the engine stylesheet and the nearest theme. Set it once at the root:

HTML

<html data-theme="graphite" data-mode="light">

HTML

The markup the example above renders, exactly. It needs no script: write it from any language or template.

HTML

<div class="ml-radio-group" role="radiogroup" aria-labelledby="billing-label" aria-orientation="vertical" data-orientation="vertical">
  <div class="ml-radio-group-label" id="billing-label">Billing</div>
  <div class="ml-radio-group-items">
    <label class="ml-radio-item" for="billing-1" data-state="unchecked"><span class="ml-radio-control"><input class="ml-radio-input" id="billing-1" type="radio" name="billing" value="monthly"/><span class="ml-radio-indicator" aria-hidden="true"></span></span><span class="ml-radio-copy"><span class="ml-radio-label">Monthly</span></span></label>
    <label class="ml-radio-item" for="billing-2" data-state="checked"><span class="ml-radio-control"><input class="ml-radio-input" id="billing-2" type="radio" aria-describedby="billing-2-description" name="billing" checked="" value="yearly"/><span class="ml-radio-indicator" aria-hidden="true"></span></span><span class="ml-radio-copy"><span class="ml-radio-label">Yearly</span><span class="ml-radio-description" id="billing-2-description">Two months free.</span></span></label>
  </div>
</div>

Options

Prop	Values	Default
`orientation`	`horizontalvertical`	`vertical`

Every prop with a fixed set of values, read from the exported TypeScript types with its doc comment. Open the Code tab above for the rest of the API.

Classes and attributes

A class names each element; data-* and aria-* attributes carry its variant and state. The values listed are the ones the stylesheet draws; the default needs no attribute.

Class	Attributes
`ml-radio-item`	`data-state="checked"`
`ml-radio-control`	—
`ml-radio-input`	—
`ml-radio-indicator`	—
`ml-radio-label`	—
`ml-radio-copy`	—
`ml-radio-description`	—
`ml-radio-group-error`	—
`ml-radio-group`	`data-orientation="horizontal"`
`ml-radio-group-items`	—
`ml-radio-group-label`	—
`ml-radio-group-description`	—

Accessibility and theming

Semantic elements, accessible names and state relationships are part of the contract.
Keyboard, pointer and touch paths are operable; focus stays visible in every theme.
Light and dark modes pass WCAG AA contrast in all 5 canonical themes.
Reduced motion and forced colors keep meaning and operation.

Open the standalone preview