表单
Basic Input
A labelled text input with helper text wired to it via aria-describedby.
#input#text#label
6 个框架初级
Loading…
A field with attached prefix and suffix addons - https:// … .com.
<!--
The addons are aria-hidden, and that is the point: "https://" and ".com" are
scaffolding the user cannot edit, not part of the field's name. Left audible
they turn the announcement into "https:// Site domain .com edit text", which
is noise. The label says what to type; the addons show where it lands.
The focus ring goes on the WRAPPER, not the input - the input has no border of
its own, so a ring on it would draw inside the group and look like a bug.
-->
<div class="addon-field">
<label class="addon-field__label" for="addon-field-domain">Site domain</label>
<div class="addon-field__group">
<span class="addon-field__addon addon-field__addon--prefix" aria-hidden="true">https://</span>
<input
class="addon-field__input"
id="addon-field-domain"
name="domain"
type="text"
placeholder="adysre"
aria-describedby="addon-field-domain-help"
/>
<span class="addon-field__addon addon-field__addon--suffix" aria-hidden="true">.com</span>
</div>
<p class="addon-field__help" id="addon-field-domain-help">Lowercase letters and hyphens only.</p>
</div>| Prop | 类型 | 默认值 | 说明 |
|---|---|---|---|
label必填 | string | - | 加载时朗读的无障碍标签。 |
value | string | - | 指标的当前值，需预先格式化。 |
disabled | boolean | false | 禁止交互并将控件置灰。 |
className | string | - | 合并到根元素上的额外类名。 |
The addons are `aria-hidden`, and that is the point: `https://` and `.com` are scaffolding the user cannot edit, not part of the field name. Left audible they turn the announcement into "https:// Site domain .com edit text". The label says what to type; the addons show where it lands. The wrapper owns the border, the radius and - via `focus-within` - the focus ring, because the group is what the user perceives they are focusing; a ring on the borderless input would draw inside the group and look like a bug. Pass either `prefix` or `suffix` alone for a one-sided field.