Field.Textarea

Field.Textarea는 Field 안에서 여러 줄 텍스트를 받는 네이티브 <textarea>입니다. 높이는 CSS로만 정해집니다. rows는 높이와 드래그 최솟값을, maxRows는 상한을 정합니다. 패딩은 셸 안쪽의 textarea에 있습니다. 이벤트가 필요하면 onChange를, 새 문자열만 필요하면 onValueChange를 넘기거나 둘 다 넘기세요. 둘 다 없으면 textarea는 읽기 전용입니다.

<Field.Root aria-label="Note">
  <Field.Textarea value={note} onChange={(event) => setNote(event.target.value)} rows={3} />
</Field.Root>

높이

autoGrow는 브라우저가 지원하면 field-sizing: content를 쓰고, maxRows를 생략하면 상한 없이 늘어납니다. field-sizing이 없는 브라우저에서는 rows에 머물고 안에서 스크롤됩니다. autoGrow가 켜져 있을 때는 인라인 height를 설정하지 마세요. 늘어나는 동작을 덮어씁니다.

autoGrow와 maxRows={6}.

<Field.Root aria-label="Note">
  <Field.Textarea value={note} onChange={(event) => setNote(event.target.value)} autoGrow maxRows={6} />
</Field.Root>

rows 없이 maxRows만 주면 min(3, maxRows)에서 시작합니다.

autoGrow를 끈 상태에서 드래그로 크기를 바꾸면 rows와 maxRows에서 멈춥니다.

밀도와 상태

compact, comfortable, spacious.

네이티브 스크롤바를 위한 다크 appearance.

레이블, 설명, 오류, invalid, disabled.

하이라이트

highlights는 텍스트의 범위를 textarea 뒤의 레이어에 토큰으로 그립니다. 이 레이어는 textarea의 글꼴, 패딩, 스크롤을 따라 합니다. 범위마다 { start, end }이고, data-kind로 설정되는 kind, 팝오버가 놓일 수 있는 anchorName, 앵커만 남기는 draw: false를 선택적으로 받습니다. 멘션과 슬래시 명령에는 useMentions가 getTextareaProps()로 이 값을 설정합니다. 토큰은 field.token.bg와 field.token.radius를 읽습니다.

접근성을 지키는 조합

Todae가 맡는 것: textarea는 Field.Root에서 id, name, aria-label, aria-labelledby, aria-describedby를 받고, Root나 바깥 Fieldset에서 네이티브 disabled와 aria-invalid를 받습니다.

직접 제공할 것: 이름. htmlFor가 Root id인 Label이나, Root의 aria-label / aria-labelledby입니다.

주의할 점: autoGrow가 켜진 상태에서 인라인 height를 주면 늘어나지 않습니다. field-sizing이 없으면 autoGrow textarea는 rows에 머물고 스크롤됩니다.

언제 쓰나요

Field.Textarea

언제: 메모, 메시지, 설명 같은 여러 줄 자유 텍스트. rows가 시작 높이를 정하고, autoGrow는 CSS만으로 maxRows까지 늘립니다. 쓰지 않을 때: 한 줄 값에는 Field.TextInput을 쓰세요. 개별 태그나 토큰에는 Field.ChipInput을 쓰세요. 서식 있는 텍스트나 서식 지정은 제공하지 않습니다.

Props