フォーム
Basic Input
A labelled text input with helper text wired to it via aria-describedby.
#input#text#label
6 個のフレームワーク初級
Loading…
A radio group laid out in a row, for two to four short options.
<!--
The same radio group as `radio-basic`, laid out in a row - for two or three
short options where a stacked list wastes a whole block of the form.
`flex-wrap` is not optional. A row of options that cannot wrap either overflows
the form or forces a horizontal scroll at 320px, and at 200% zoom that is a
reflow failure, not a cosmetic one.
-->
<fieldset class="radio-inline">
<legend class="radio-inline__legend">Priority</legend>
<div class="radio-inline__options">
<label class="radio-inline__row" for="priority-low">
<input class="radio-inline__input" type="radio" id="priority-low" name="priority" value="low" />
<span class="radio-inline__label">Low</span>
</label>
<label class="radio-inline__row" for="priority-normal">
<input class="radio-inline__input" type="radio" id="priority-normal" name="priority" value="normal" checked />
<span class="radio-inline__label">Normal</span>
</label>
<label class="radio-inline__row" for="priority-high">
<input class="radio-inline__input" type="radio" id="priority-high" name="priority" value="high" />
<span class="radio-inline__label">High</span>
</label>
<label class="radio-inline__row" for="priority-urgent">
<input class="radio-inline__input" type="radio" id="priority-urgent" name="priority" value="urgent" />
<span class="radio-inline__label">Urgent</span>
</label>
</div>
</fieldset>| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
name必須 | string | - | 排他グループのスコープを決めます。ページ内のアコーディオンごとに一意の値を渡してください。 |
disabled | boolean | false | 操作を無効にし、コントロールを淡色表示にします。 |
className | string | - | ルート要素にマージされる追加クラス。 |
Use it where a stacked list would waste a whole block of the form and the labels are one or two words. `flex-wrap` is load-bearing: a row that cannot break either overflows the form or forces a horizontal scroll at 320px, and at 200% zoom that is a reflow failure rather than a cosmetic one. The `gap-y-2` matters for the same reason - it is what stops wrapped rows colliding. Everything else is `radio-basic`: same fieldset, same legend, same native dot.