Radio Group

A fieldset that groups radio buttons or checkboxes under a shared legend. No class name needed.

Composed of

Fieldset: The group and its legend
Radio: The options to choose between

Works with

Checkbox: Checkboxes for picking several options

Standalone

<link rel="stylesheet" href="https://esm.sh/@erikt/ui/radio-group.css" />

Radio

Favorite fruit Apple Banana Cherry

<fieldset>
  <legend>Favorite fruit</legend>
  <label> <input type="radio" name="fruit" value="apple" /> Apple </label>
  <label> <input type="radio" name="fruit" value="banana" /> Banana </label>
  <label> <input type="radio" name="fruit" value="cherry" /> Cherry </label>
</fieldset>

Checkbox

Toppings Cheese Tomato Onion

<fieldset>
  <legend>Toppings</legend>
  <label>
    <input type="checkbox" name="toppings" value="cheese" /> Cheese
  </label>
  <label>
    <input type="checkbox" name="toppings" value="tomato" /> Tomato
  </label>
  <label> <input type="checkbox" name="toppings" value="onion" /> Onion </label>
</fieldset>

With description

Add a small element for a hint below the options.

Notifications Email SMS Push Choose how you'd like to be notified.

<fieldset>
  <legend>Notifications</legend>
  <label> <input type="checkbox" name="notify" value="email" /> Email </label>
  <label> <input type="checkbox" name="notify" value="sms" /> SMS </label>
  <label> <input type="checkbox" name="notify" value="push" /> Push </label>
  <small>Choose how you'd like to be notified.</small>
</fieldset>

Required

Add required to any input and a * appears on the legend automatically.

Plan Free Pro Enterprise

<fieldset>
  <legend>Plan</legend>
  <label> <input type="radio" name="plan" value="free" required /> Free </label>
  <label> <input type="radio" name="plan" value="pro" required /> Pro </label>
  <label>
    <input type="radio" name="plan" value="enterprise" required /> Enterprise
  </label>
</fieldset>

API reference

Type	Classes / attributes	What it does
Required	`[required]`	Adds a red asterisk to the legend