フォーム
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.