フォーム
Basic Input
A labelled text input with helper text wired to it via aria-describedby.
#input#text#label
6 個のフレームワーク初級
Loading…
A textarea with a bounded drag handle - vertical only, between a min and a max.
<!--
The opposite trade to the autosize field: the user drags, not the script. The
browser's own handle does the work, so this needs no JavaScript at all - the
entire component is three CSS properties.
min-height and max-height are the actual design decisions. resize: vertical
with no bounds lets someone drag the box to 4px or to 9000, and both are
layouts you never designed. resize is vertical only, never both: horizontal
dragging breaks out of the form column and there is no reason to allow it.
-->
<div class="rz-field">
<label class="rz-field__label" for="rz-field-notes">Release notes</label>
<textarea
class="rz-field__input"
id="rz-field-notes"
name="notes"
rows="3"
placeholder="What changed in this release?"
aria-describedby="rz-field-notes-help"
></textarea>
<p class="rz-field__help" id="rz-field-notes-help">Drag the corner to resize.</p>
</div>| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
label必須 | string | - | 読み込み中に読み上げられるアクセシブルなラベル。 |
value | string | - | 指標の現在値。フォーマット済みの文字列を渡します。 |
disabled | boolean | false | 操作を無効にし、コントロールを淡色表示にします。 |
className | string | - | ルート要素にマージされる追加クラス。 |
The opposite trade to the autosize field: the user drags, not the script, so the browser's own handle does all the work and the component needs no JavaScript at all. `min-h` and `max-h` are the real design decisions - unbounded `resize-y` lets someone drag the box to 4px or to 9000, and both are layouts you never designed. Keep it `resize-y`, never `resize` (both): horizontal dragging escapes the form column and there is no reason to allow it. Disabling the field also disables the handle, since resizing something you cannot edit is a control that lies about being live.