表单
Basic Input
A labelled text input with helper text wired to it via aria-describedby.
#input#text#label
6 个框架初级
Loading…
A segmented control - the look of a button row, the behaviour of a native radio group.
<!--
A segmented control is a radio group wearing a different coat. Built this way it
is exclusive for free, arrow keys walk the segments, and it posts `range` with
the form - none of which a row of buttons with a `.is-active` class gets.
A selected segment cannot be signalled by the fill alone: the tick tells anyone
who cannot separate the two greys which one is on.
-->
<fieldset class="segmented">
<legend class="segmented__legend">Date range</legend>
<div class="segmented__track">
<label class="segmented__option" for="range-7d">
<input class="segmented__input" type="radio" id="range-7d" name="range" value="7d" checked />
<span class="segmented__face">
<svg class="segmented__tick" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" focusable="false">
<path d="M16.7 5.3a1 1 0 0 1 0 1.4l-7.5 7.5a1 1 0 0 1-1.4 0L3.3 9.7a1 1 0 1 1 1.4-1.4l3.8 3.8 6.8-6.8a1 1 0 0 1 1.4 0Z" />
</svg>
7 days
</span>
</label>
<label class="segmented__option" for="range-30d">
<input class="segmented__input" type="radio" id="range-30d" name="range" value="30d" />
<span class="segmented__face">
<svg class="segmented__tick" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" focusable="false">
<path d="M16.7 5.3a1 1 0 0 1 0 1.4l-7.5 7.5a1 1 0 0 1-1.4 0L3.3 9.7a1 1 0 1 1 1.4-1.4l3.8 3.8 6.8-6.8a1 1 0 0 1 1.4 0Z" />
</svg>
30 days
</span>
</label>
<label class="segmented__option" for="range-90d">
<input class="segmented__input" type="radio" id="range-90d" name="range" value="90d" />
<span class="segmented__face">
<svg class="segmented__tick" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" focusable="false">
<path d="M16.7 5.3a1 1 0 0 1 0 1.4l-7.5 7.5a1 1 0 0 1-1.4 0L3.3 9.7a1 1 0 1 1 1.4-1.4l3.8 3.8 6.8-6.8a1 1 0 0 1 1.4 0Z" />
</svg>
90 days
</span>
</label>
</div>
</fieldset>| Prop | 类型 | 默认值 | 说明 |
|---|---|---|---|
name必填 | string | - | 限定互斥分组的范围。页面上每个手风琴请传入唯一值。 |
disabled | boolean | false | 禁止交互并将控件置灰。 |
className | string | - | 合并到根元素上的额外类名。 |
The reason to build a segmented control this way rather than as buttons with an `.is-active` class: exclusivity, arrow-key traversal, one tab stop and form submission all come from the radio type, and none of them are in this snippet's code. The selected face is the raised surface on both themes - `bg-white` on a `gray-100` track, `bg-gray-700` on a `gray-800` one - because inverting that reads as recessed rather than selected. The tick is laid out at `opacity-0` rather than removed so the label does not shift sideways when the selection moves, and it is what keeps the selected state readable for anyone who cannot separate the two greys.