Forms
Basic Input
A labelled text input with helper text wired to it via aria-describedby.
#input#text#label
6 frameworksBeginner
Loading…
Each option carries a title and an explaining line, wired with aria-describedby.
<!--
Each option is a title plus a line explaining it. The split matters: the title
is inside the <label>, so it is the option's NAME; the description is outside
it and wired with aria-describedby, so it is announced after the name rather
than being welded into it. Putting both in the label gives you an option called
"Private Only people you invite can open the workspace", read out in full on
every arrow-key press.
-->
<fieldset class="radio-desc">
<legend class="radio-desc__legend">Workspace visibility</legend>
<div class="radio-desc__row">
<input class="radio-desc__input" type="radio" id="vis-private" name="visibility" value="private" aria-describedby="vis-private-desc" checked />
<div class="radio-desc__text">
<label class="radio-desc__title" for="vis-private">Private</label>
<p class="radio-desc__desc" id="vis-private-desc">Only people you invite can open the workspace.</p>
</div>
</div>
<div class="radio-desc__row">
<input class="radio-desc__input" type="radio" id="vis-team" name="visibility" value="team" aria-describedby="vis-team-desc" />
<div class="radio-desc__text">
<label class="radio-desc__title" for="vis-team">Everyone at ADYSRE</label>
<p class="radio-desc__desc" id="vis-team-desc">Anyone with a verified company email can join.</p>
</div>
</div>
<div class="radio-desc__row">
<input class="radio-desc__input" type="radio" id="vis-public" name="visibility" value="public" aria-describedby="vis-public-desc" />
<div class="radio-desc__text">
<label class="radio-desc__title" for="vis-public">Public</label>
<p class="radio-desc__desc" id="vis-public-desc">Anyone with the link can read; only members can edit.</p>
</div>
</div>
</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. |
The split between the title and the description is the whole point. The title sits inside the `<label>` and is the option's name; the description sits outside it and is referenced with `aria-describedby`, so it is announced *after* the name. Wrap both in the label instead and you get an option called "Private Only people you invite can open the workspace", read in full on every arrow-key press. The description is the smallest text here and the first thing to fail contrast - `text-gray-600` on white and `text-gray-400` on `gray-900` both clear 4.5:1; do not dim them further to make the line look secondary, the size already does that.