Forms
Basic Input
A labelled text input with helper text wired to it via aria-describedby.
#input#text#label
6 frameworksBeginner
Loading…
Selectable cards for a single choice - a plan picker built on a real radio group.
<!--
Selectable cards, one choice. Same trick as the checkbox card - the card IS the
label and the radio inside it is clipped, not removed - so the group keeps the
behaviour people forget to rebuild: arrow keys move the selection between
cards, Tab enters and leaves the group as one stop, and the form posts `plan`.
The <fieldset>/<legend> names the group. The dot on the right marks the choice,
so the ring and tint are reinforcement rather than the only signal.
-->
<fieldset class="radio-cards">
<legend class="radio-cards__legend">Choose a plan</legend>
<label class="radio-card" for="plan-starter">
<input class="radio-card__input" type="radio" id="plan-starter" name="plan" value="starter" checked />
<span class="radio-card__body">
<span class="radio-card__title">Starter</span>
<span class="radio-card__meta">$12 / month · 3 projects</span>
</span>
<span class="radio-card__dot" aria-hidden="true"></span>
</label>
<label class="radio-card" for="plan-growth">
<input class="radio-card__input" type="radio" id="plan-growth" name="plan" value="growth" />
<span class="radio-card__body">
<span class="radio-card__title">Growth</span>
<span class="radio-card__meta">$29 / month · Unlimited projects</span>
</span>
<span class="radio-card__dot" aria-hidden="true"></span>
</label>
<label class="radio-card" for="plan-scale">
<input class="radio-card__input" type="radio" id="plan-scale" name="plan" value="scale" />
<span class="radio-card__body">
<span class="radio-card__title">Scale</span>
<span class="radio-card__meta">$79 / month · SSO and audit log</span>
</span>
<span class="radio-card__dot" aria-hidden="true"></span>
</label>
</fieldset>| Prop | Type | Default | Description |
|---|---|---|---|
namerequired | string | - | Scopes the exclusive group. Pass a unique value per accordion on a page. |
disabled | boolean | false | Prevents interaction and dims the control. |
className | string | - | Additional classes merged onto the root element. |
Same pattern as the checkbox card, with the exclusivity the radio type gives you for free: arrow keys move the selection between cards, Tab enters and leaves the group as one stop, and the form posts one value. None of that survives being rebuilt on divs. The dot is drawn with a `radial-gradient` background rather than a nested element, so there is nothing to show and hide - it simply appears under `peer-checked:`. Retint `has-[:checked]:bg-blue-50` for your brand and keep the dot; the tint is reinforcement, not the signal.