Radio

A native radio with Harmo's appearance, the sibling of Checkbox. For a few short options side by side, use a segmented control instead.

Installation

bun add @harmo-ui/css @harmo-ui/react

npm install @harmo-ui/css @harmo-ui/react

pnpm add @harmo-ui/css @harmo-ui/react

yarn add @harmo-ui/css @harmo-ui/react

bunx harmo-ui add radio

npx harmo-ui add radio

pnpm dlx harmo-ui add radio

yarn dlx harmo-ui add radio

Usage

import { Field, Radio, RadioGroup } from "@harmo-ui/react";

<RadioGroup label="Export format" name="export-format" defaultValue="csv">
  <Field orientation="horizontal" label="CSV">
    <Radio value="csv" />
  </Field>
  <Field orientation="horizontal" label="Excel workbook">
    <Radio value="xlsx" />
  </Field>
</RadioGroup>

Examples

This site is using your theme

Group

Radios that share a name form one group: Tab reaches the chosen one and the Arrow keys move the choice. A Field with role="radiogroup" names the group, with one horizontal Field per option.

Export format

CSV

Excel workbook

PDF report

<RadioGroup label="Export format" name="export-format" defaultValue="csv">
  <Field orientation="horizontal" label="CSV">
    <Radio value="csv" />
  </Field>
  <Field orientation="horizontal" label="Excel workbook">
    <Radio value="xlsx" />
  </Field>
  <Field orientation="horizontal" label="PDF report">
    <Radio value="pdf" />
  </Field>
</RadioGroup>

<div class="hfield" role="radiogroup" aria-labelledby="export-format-label">
  <span class="hlabel" id="export-format-label">Export format</span>
  <div class="hfield" data-orientation="horizontal">
    <input class="hradio" type="radio" name="export-format" id="export-csv" value="csv" checked />
    <label class="hlabel" for="export-csv">CSV</label>
  </div>
  <div class="hfield" data-orientation="horizontal">
    <input class="hradio" type="radio" name="export-format" id="export-xlsx" value="xlsx" />
    <label class="hlabel" for="export-xlsx">Excel workbook</label>
  </div>
  <div class="hfield" data-orientation="horizontal">
    <input class="hradio" type="radio" name="export-format" id="export-pdf" value="pdf" />
    <label class="hlabel" for="export-pdf">PDF report</label>
  </div>
</div>

With descriptions

.hfield-content holds an option's label and description, connected to the radio with aria-describedby.

Delivery

Send now

Starts delivering as soon as you publish.

Schedule

Pick a date and time in your account's time zone.

<RadioGroup label="Delivery" name="delivery" defaultValue="now">
  <Field
    orientation="horizontal"
    label="Send now"
    description="Starts delivering as soon as you publish."
  >
    <Radio value="now" />
  </Field>
  <Field
    orientation="horizontal"
    label="Schedule"
    description="Pick a date and time in your account's time zone."
  >
    <Radio value="scheduled" />
  </Field>
</RadioGroup>

<div class="hfield" role="radiogroup" aria-labelledby="delivery-label">
  <span class="hlabel" id="delivery-label">Delivery</span>
  <div class="hfield" data-orientation="horizontal">
    <input
      class="hradio"
      type="radio"
      name="delivery"
      id="delivery-now"
      value="now"
      aria-describedby="delivery-now-description"
      checked
    />
    <div class="hfield-content">
      <label class="hlabel" for="delivery-now">Send now</label>
      <p class="hdescription" id="delivery-now-description">Starts delivering as soon as you publish.</p>
    </div>
  </div>
  <div class="hfield" data-orientation="horizontal">
    <input
      class="hradio"
      type="radio"
      name="delivery"
      id="delivery-scheduled"
      value="scheduled"
      aria-describedby="delivery-scheduled-description"
    />
    <div class="hfield-content">
      <label class="hlabel" for="delivery-scheduled">Schedule</label>
      <p class="hdescription" id="delivery-scheduled-description">
        Pick a date and time in your account's time zone.
      </p>
    </div>
  </div>
</div>

Disabled

disabled dims an option, and its label turns gray, whether or not it's chosen.

<>
  <RadioGroup
    label="Template category"
    name="category"
    defaultValue="marketing"
  >
    <Field orientation="horizontal" label="Marketing">
      <Radio value="marketing" />
    </Field>
    <Field orientation="horizontal" label="Utility">
      <Radio value="utility" />
    </Field>
    <Field orientation="horizontal" label="Authentication">
      <Radio value="authentication" disabled />
    </Field>
  </RadioGroup>
  <RadioGroup
    label="Data region, set by your administrator"
    name="region"
    defaultValue="eu"
    disabled
  >
    <Field orientation="horizontal" label="European Union">
      <Radio value="eu" />
    </Field>
    <Field orientation="horizontal" label="United States">
      <Radio value="us" />
    </Field>
  </RadioGroup>
</>

<div class="hfield" role="radiogroup" aria-labelledby="category-label">
  <span class="hlabel" id="category-label">Template category</span>
  <div class="hfield" data-orientation="horizontal">
    <input class="hradio" type="radio" name="category" id="category-marketing" value="marketing" checked />
    <label class="hlabel" for="category-marketing">Marketing</label>
  </div>
  <div class="hfield" data-orientation="horizontal">
    <input class="hradio" type="radio" name="category" id="category-utility" value="utility" />
    <label class="hlabel" for="category-utility">Utility</label>
  </div>
  <div class="hfield" data-orientation="horizontal">
    <input
      class="hradio"
      type="radio"
      name="category"
      id="category-authentication"
      value="authentication"
      disabled
    />
    <label class="hlabel" for="category-authentication">Authentication</label>
  </div>
</div>
<div class="hfield" role="radiogroup" aria-labelledby="region-label">
  <span class="hlabel" id="region-label">Data region, set by your administrator</span>
  <div class="hfield" data-orientation="horizontal">
    <input class="hradio" type="radio" name="region" id="region-eu" value="eu" checked disabled />
    <label class="hlabel" for="region-eu">European Union</label>
  </div>
  <div class="hfield" data-orientation="horizontal">
    <input class="hradio" type="radio" name="region" id="region-us" value="us" disabled />
    <label class="hlabel" for="region-us">United States</label>
  </div>
</div>

Required

required on the radios asks for an answer before the form submits. It changes nothing visible; mark the question as required in its wording.

Why are you closing your account?

It costs too much

It's missing features I need

Something else

<RadioGroup
  label="Why are you closing your account?"
  name="reason"
  required
>
  <Field orientation="horizontal" label="It costs too much">
    <Radio value="cost" />
  </Field>
  <Field orientation="horizontal" label="It's missing features I need">
    <Radio value="features" />
  </Field>
  <Field orientation="horizontal" label="Something else">
    <Radio value="other" />
  </Field>
</RadioGroup>

<div class="hfield" role="radiogroup" aria-labelledby="reason-label">
  <span class="hlabel" id="reason-label">Why are you closing your account?</span>
  <div class="hfield" data-orientation="horizontal">
    <input class="hradio" type="radio" name="reason" id="reason-cost" value="cost" required />
    <label class="hlabel" for="reason-cost">It costs too much</label>
  </div>
  <div class="hfield" data-orientation="horizontal">
    <input class="hradio" type="radio" name="reason" id="reason-features" value="features" required />
    <label class="hlabel" for="reason-features">It's missing features I need</label>
  </div>
  <div class="hfield" data-orientation="horizontal">
    <input class="hradio" type="radio" name="reason" id="reason-other" value="other" required />
    <label class="hlabel" for="reason-other">Something else</label>
  </div>
</div>

API reference

React

<RadioGroup> renders the group: a Field with role="radiogroup", named by its label, that gives its radios one name. <Radio> renders the <input type="radio">; put each in a horizontal Field for its label and description. Other props are the group <div>'s, or the input's.

Prop	Effect
`label`, `optional`, `description`, `error`	As for a Field
`name`	The name its radios submit under; generated when left out
`value` or `defaultValue`	The chosen radio's value; a controlled `value` is `null` while none is chosen
`onValueChange`	Called with the newly chosen value
`required`, `disabled`	Set on every radio in it

HTML

An <input class="hradio" type="radio">, with a <label for> per radio and the same name on every radio in a group. A group is a Field with role="radiogroup" and aria-labelledby, holding one horizontal Field per option. Load radio.css; field.css for the group and labels. It needs no script.

Hook	Effect
`checked`	Chosen
`disabled`	Dimmed, not-allowed cursor; its Field label turns gray
`required`	On the radios, when an answer is required

See Radio's full contract.

Accessibility

Radios that share a name form one group: Tab reaches the chosen one, and the Arrow keys move the choice. The role="radiogroup" Field names the group.