ds
Components
Radio and option cards

Radio and option cards

Pick one: native radios, and cards for plans and regions.

Radio

Retry failed tasks Never Up to 3 times, with backoff Until it succeeds On another worker pool (Team plan)

Code

<fieldset class="fs">
  <legend>Retry failed tasks</legend>
  <label class="chk"><input class="radio" type="radio" name="retry" /><span>Never</span></label>
  <label class="chk"><input class="radio" type="radio" name="retry" checked /><span>Up to 3 times, with backoff</span></label>
  <label class="chk"><input class="radio" type="radio" name="retry" /><span>Until it succeeds</span></label>
  <label class="chk"><input class="radio" type="radio" name="retry" disabled /><span>On another worker pool (Team plan)</span></label>
</fieldset>

A native radio drawn to match the checkbox: a 1px ring that turns accent with a dot when chosen. Wrap the set in fieldset.fs with a legend, so the question is read before the answers.

With descriptions, in a row

Write mode AppendAdd new rows. Existing rows are never changed. MergeUpdate rows that match the primary key, insert the rest. OverwriteReplace the table on every run.

Format Parquet CSV JSON lines

Code

<fieldset class="fs">
  <legend>Write mode</legend>
  <label class="chk"><input class="radio" type="radio" name="mode" checked /><span><b>Append</b><small>Add new rows. Existing rows are never changed.</small></span></label>
  <label class="chk"><input class="radio" type="radio" name="mode" /><span><b>Merge</b><small>Update rows that match the primary key, insert the rest.</small></span></label>
  <label class="chk"><input class="radio" type="radio" name="mode" /><span><b>Overwrite</b><small>Replace the table on every run.</small></span></label>
</fieldset>
<fieldset class="fs row">
  <legend>Format</legend>
  <label class="chk"><input class="radio" type="radio" name="fmt" checked />Parquet</label>
  <label class="chk"><input class="radio" type="radio" name="fmt" />CSV</label>
  <label class="chk"><input class="radio" type="radio" name="fmt" />JSON lines</label>
</fieldset>

Option cards

FreeTwo pipelines, community support.$0 / month Most teamsTeamUnlimited pipelines, SSO, audit log.$24 / seat / month EnterprisePrivate networking, 99.95% SLA.Talk to us

Code

<fieldset class="opts">
  <legend class="sr-only">Plan</legend>
  <label class="opt"><input class="radio" type="radio" name="plan" /><b>Free</b><span>Two pipelines, community support.</span><span class="opt-v">$0 <small>/ month</small></span></label>
  <label class="opt"><span class="badge accent">Most teams</span><input class="radio" type="radio" name="plan" checked /><b>Team</b><span>Unlimited pipelines, SSO, audit log.</span><span class="opt-v">$24 <small>/ seat / month</small></span></label>
  <label class="opt"><input class="radio" type="radio" name="plan" /><b>Enterprise</b><span>Private networking, 99.95% SLA.</span><span class="opt-v">Talk to us</span></label>
</fieldset>

The whole card is the label, so a click anywhere picks it. The card lights up with :has(:checked): an accent ring and a faint wash. The radio stays visible in the corner, so it still looks like a choice and not a set of buttons.

As rows

Mumbaiap-south-118 ms Frankfurteu-central-1121 ms Virginiaus-east-1212 ms Singaporeap-southeast-1 · at capacity54 ms

Code

<fieldset class="opts rows">
  <legend class="sr-only">Region</legend>
  <label class="opt"><input class="radio" type="radio" name="region" checked /><b>Mumbai</b><small>ap-south-1</small><span class="opt-v">18 ms</span></label>
  <label class="opt"><input class="radio" type="radio" name="region" /><b>Frankfurt</b><small>eu-central-1</small><span class="opt-v">121 ms</span></label>
  <label class="opt"><input class="radio" type="radio" name="region" /><b>Virginia</b><small>us-east-1</small><span class="opt-v">212 ms</span></label>
  <label class="opt"><input class="radio" type="radio" name="region" disabled /><b>Singapore</b><small>ap-southeast-1 · at capacity</small><span class="opt-v">54 ms</span></label>
</fieldset>

For longer lists with one figure each: latency, price, size. The figure is mono and right-aligned so the column lines up.

API

Class	On	What it does
`input.radio`	input[type=radio]	The drawn radio. Inside .chk for a label.
`fieldset.fs`	fieldset	A group with its legend. `.row` lays the options out in a line.
`b, small`	.chk > span	A bold option name and a description under it. The radio aligns to the top.
`.opts`	fieldset, div	A grid of option cards. `--opt-min` sets the narrowest card (12rem).
`.opt`	label	A card: input, <b>, a line, a `.opt-v` figure, an optional .badge.
`.rows`	.opts	Cards joined into a list, figure on the right.

A default that most people want, already selected.
Radios for two to six choices; a select past that.
Cards when each choice needs a price, a size or a sentence.

Don't

Radios for on and off. Use a switch.
Cards with no visible radio or check: they read as buttons.
Changing something the moment a radio is picked, in a form with a save button.

Accessibility

Native radios move with the arrow keys and Tab enters the group once. Keep every radio in a group on the same name.
Option cards keep the real input, so screen readers announce "radio button, 2 of 3, checked".