表单
Basic Input
A labelled text input with helper text wired to it via aria-describedby.
#input#text#label
6 个框架初级
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 | 类型 | 默认值 | 说明 |
|---|---|---|---|
name必填 | string | - | 限定互斥分组的范围。页面上每个手风琴请传入唯一值。 |
disabled | boolean | false | 禁止交互并将控件置灰。 |
className | string | - | 合并到根元素上的额外类名。 |
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.