表单
Basic Input
A labelled text input with helper text wired to it via aria-describedby.
#input#text#label
6 个框架初级
Loading…
A native radio group in a fieldset, with a legend that gives it an accessible name.
<!--
The <fieldset>/<legend> is not decoration. A bare list of radios announces as
"Weekly, radio button, 1 of 3" with no clue what is being chosen - the legend
is what makes it "Billing period: Weekly, radio button, 1 of 3". A group with
no accessible name is a bug, not a style choice.
The shared `name` is what makes them exclusive and what makes arrow keys walk
the group. Every input still gets its own id and its own label.
-->
<fieldset class="radio-group" aria-describedby="billing-hint">
<legend class="radio-group__legend">Billing period</legend>
<label class="radio-group__row" for="billing-monthly">
<input class="radio-group__input" type="radio" id="billing-monthly" name="billing" value="monthly" checked />
<span class="radio-group__label">Monthly</span>
</label>
<label class="radio-group__row" for="billing-quarterly">
<input class="radio-group__input" type="radio" id="billing-quarterly" name="billing" value="quarterly" />
<span class="radio-group__label">Every 3 months</span>
</label>
<label class="radio-group__row" for="billing-yearly">
<input class="radio-group__input" type="radio" id="billing-yearly" name="billing" value="yearly" />
<span class="radio-group__label">Yearly</span>
</label>
<p class="radio-group__hint" id="billing-hint">You can change this at any time from Settings.</p>
</fieldset>| Prop | 类型 | 默认值 | 说明 |
|---|---|---|---|
name必填 | string | - | 限定互斥分组的范围。页面上每个手风琴请传入唯一值。 |
disabled | boolean | false | 禁止交互并将控件置灰。 |
className | string | - | 合并到根元素上的额外类名。 |
The `<fieldset>`/`<legend>` is the component. Without it the group announces as "Monthly, radio button, 1 of 3" and never says what is being chosen - a group with no accessible name is a bug, not a style choice. The shared `name` is what makes the options exclusive and what gives you arrow-key traversal and a single tab stop with no roving-tabindex code. `accent-color` keeps the platform dot, so the selection is a mark and not just a hue. Drop the `value`/`onChange` pair for `defaultChecked` and the whole thing becomes a Server Component that posts with the form.