フォーム
Basic Input
A labelled text input with helper text wired to it via aria-describedby.
#input#text#label
6 個のフレームワーク初級
Loading…
A native checkbox wired to its own label and hint - the three-element field every form starts from.
<!--
Three elements, three links between them. `for` matches `id`, so clicking the
text toggles the box - that is also what gives the control a target far larger
than the 20px square. `aria-describedby` points at the hint, so a screen
reader reads it after the label instead of leaving it orphaned on screen.
-->
<div class="checkbox-field">
<input
class="checkbox-field__input"
type="checkbox"
id="newsletter"
name="newsletter"
aria-describedby="newsletter-hint"
checked
/>
<div class="checkbox-field__text">
<label class="checkbox-field__label" for="newsletter">Email me product updates</label>
<p class="checkbox-field__hint" id="newsletter-hint">
About one email a month. Unsubscribe at any time.
</p>
</div>
</div>| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
disabled | boolean | false | 操作を無効にし、コントロールを淡色表示にします。 |
className | string | - | ルート要素にマージされる追加クラス。 |
The whole component is `accent-color`, and that is deliberate: it keeps the platform's own checkmark, so the checked state is carried by a glyph rather than by blue alone and survives greyscale. Recolour it with `accent-blue-600`, and lift it a step in dark mode - a mid-blue that reads well on white goes muddy on `gray-900`. The 20px box looks small against the 24px minimum target, but the label is `htmlFor`-linked and therefore part of the same target; keep it a real `<label>` and the size takes care of itself.