表单初级MIT英文

Resizable Textarea

A textarea with a bounded drag handle - vertical only, between a min and a max.

#textarea#resize#handle#multiline#form

预览

代码

<!--
  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.

详情

作者: ADYSRE
版本: 1.0.1
创建时间: 2026-05-08
更新时间: 2026-07-04

代码

<!--
  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

-

合并到根元素上的额外类名。

自定义

预览

代码

属性

变体

自定义

详情

相关组件

预览

代码

属性

变体

自定义

详情

相关组件