跳到主要内容

Textarea

  • 组件说明：多行文本输入框，用于评论、描述等长文本录入场景。
  • 尺寸基线：最小高度 120px、最大高度 600px、水平内边距 16px、垂直内边距 8px、圆角 5px。
  • 实现约定：ui/textarea 保留多行输入结构，design 层接管尺寸、边框与状态视觉。
  • Figma 规范

基础用法​

结果
Loading...
实时编辑器
<div style={{ display: 'flex', flexDirection: 'column', gap: 16, maxWidth: 400 }}>
  <Textarea placeholder="请输入内容..." />
  <Textarea placeholder="带初始值" defaultValue="Hello world, this is a textarea." />
</div>

状态​

4 种视觉状态：Default / Focused / Error / Disabled。

结果
Loading...
实时编辑器
<div style={{ display: 'flex', flexDirection: 'column', gap: 16, maxWidth: 400 }}>
  <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
    <span style={{ fontSize: 12, color: '#999' }}>Default</span>
    <Textarea placeholder="默认状态" />
  </div>
  <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
    <span style={{ fontSize: 12, color: '#999' }}>Error</span>
    <Textarea error placeholder="错误状态" />
  </div>
  <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
    <span style={{ fontSize: 12, color: '#999' }}>Disabled（空）</span>
    <Textarea disabled placeholder="禁用" />
  </div>
  <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
    <span style={{ fontSize: 12, color: '#999' }}>Disabled（有值）</span>
    <Textarea disabled defaultValue="不可编辑的内容" />
  </div>
</div>
状态边框背景说明
DefaultSeparators/Emphasized#CCCCCC透明—
FocusedLabels/Primary#000000透明点击预览
ErrorStatus/Destructive#FF503F透明error 属性
DisabledSeparators/Emphasized#CCCCCCGrays/Gray-1#EBEBEBdisabled 属性

主矩阵​

当前 spec 验收以 State × Filled × Status 为主。文档站优先展示当前实现对应的核心组合。

结果
Loading...
实时编辑器
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: 16, maxWidth: 860 }}>
  <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
    <span style={{ fontSize: 12, color: '#999' }}>Normal / Empty / Default</span>
    <Textarea placeholder="请输入描述..." />
  </div>
  <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
    <span style={{ fontSize: 12, color: '#999' }}>Normal / Filled / Default</span>
    <Textarea defaultValue="已填写的多行内容" />
  </div>
  <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
    <span style={{ fontSize: 12, color: '#999' }}>Focused / Empty / Default</span>
    <Textarea className="border-[var(--Labels-Primary)]" placeholder="Focused state" />
  </div>
  <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
    <span style={{ fontSize: 12, color: '#999' }}>Focused / Filled / Default</span>
    <Textarea className="border-[var(--Labels-Primary)]" defaultValue="Focused value" />
  </div>
  <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
    <span style={{ fontSize: 12, color: '#999' }}>Normal / Empty / Error</span>
    <Textarea error placeholder="Error state" />
  </div>
  <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
    <span style={{ fontSize: 12, color: '#999' }}>Normal / Filled / Error</span>
    <Textarea error defaultValue="Error value" />
  </div>
  <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
    <span style={{ fontSize: 12, color: '#999' }}>Disabled / Empty / Default</span>
    <Textarea disabled placeholder="Disabled empty" />
  </div>
  <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
    <span style={{ fontSize: 12, color: '#999' }}>Disabled / Filled / Default</span>
    <Textarea disabled defaultValue="Disabled value" />
  </div>
</div>

行数控制​

通过 rows 属性控制初始显示行数，用户可通过拖拽手柄调整高度（resize-y）。

结果
Loading...
实时编辑器
<div style={{ display: 'flex', flexDirection: 'column', gap: 16, maxWidth: 400 }}>
  <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
    <span style={{ fontSize: 12, color: '#999' }}>rows=3</span>
    <Textarea rows={3} placeholder="3 行高度" />
  </div>
  <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
    <span style={{ fontSize: 12, color: '#999' }}>rows=8</span>
    <Textarea rows={8} placeholder="8 行高度" />
  </div>
</div>

尺寸规范​

维度值
最小高度120px
最大高度600px
水平内边距16px
垂直内边距8px
圆角5px
字体Body/Regular（14px，行高 22）

Props​

属性类型默认值说明
placeholderstring-占位文本
valuestring-受控值
defaultValuestring-初始值（非受控）
rowsnumber-初始显示行数
errorbooleanfalse错误状态，边框使用 Status/Destructive
disabledbooleanfalse禁用状态
onChangeChangeEventHandler-变化回调
aria-labelstring-无障碍标签