फ़ॉर्म
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.