Textarea

여러 줄 입력이다. rows 기본값은 4다.

import { Textarea } from "@nui-kit/react";
// 서브패스로 좁힐 때
import { Textarea } from "@nui-kit/react/textarea";
import "@nui-kit/react/styles/textarea.css";   // 온디맨드일 때

기본

문의 내용

기본rows 4

문의 내용

입력한 내용

value값을 소유한다

<Textarea placeholder="내용" value={v} onChange={onChange} />

글자 수 카운터

maxLength 를 주면 영역 아래 오른쪽에 카운터가 붙는다. 제한이 곧 조건이라 켜고 끄는 별도 prop 은 없다. 세는 단위는 브라우저의 maxlength 와 같은 UTF-16 코드 단위여서 이모지는 2로 세진다 — 카운터가 100 인데 더 쳐지는 일이 없다.

문의 내용

0 / 100

maxLength입력에 따라 갱신된다

문의 내용

내용을 조금 더 적어주세요

10자 이상 입력해주세요.

14 / 100

에러 메시지와 함께왼쪽 메시지 · 오른쪽 카운터

<Textarea maxLength={100} value={v} onChange={onChange} />

카운터에는 aria-live 를 붙이지 않는다. 글자마다 갱신되므로 live 로 두면 스크린리더가 타이핑 한 글자마다 숫자를 읽는다. 대신 aria-describedby 로 이어서 포커스가 들어올 때 "글자 수 12 / 100" 으로 읽힌다. 이 앞말은 counterLabel 로 바꾼다.

크기 조절

resize 기본값은 vertical 이라 사용자가 세로로 늘릴 수 있다. none 을 주면 고정된다.

늘릴 수 있다

vertical기본

고정

none

<Textarea resize="none" rows={3} />

상태

문의 내용

기본

문의 내용

10자 이상 입력해주세요

isError테두리·글자·메시지

문의 내용

disabled조건이 맞으면 다시 쓸 수 있다

문의 내용

입력한 내용

readOnly값은 보여주되 바꿀 수 없다

isError · disabled · readOnly

react-hook-form

RHFTextarea 는 /rhf 서브패스에 있다. control 과 name 만 넘기면 값과 에러를 스스로 소유한다. value · onChange · name · onBlur 는 타입에서 제외되어 중복 소유가 생기지 않는다.

소개

80자 이내로 적어 주세요.

{
  "values": {
    "bio": ""
  },
  "isValid": false
}

<RHFTextarea control={control} name="bio" rules={{ required: "…", maxLength: { value: 80, message: "…" } }} />

mode: "onChange" — 값이 바뀔 때마다 검증한다

formatValue 를 주면 입력값이 폼 상태에 들어가기 전에 가공된다. errorMessage 를 직접 넘기면 RHF 에러가 없을 때의 대체값으로 쓰인다. react-hook-form 은 optional peer 라 래퍼를 쓸 때만 설치한다.

autoComplete 를 기본으로 끄지 않는다. 긴 글에는 브라우저가 제안할 것이 거의 없지만, 끄고 싶으면 autoComplete="off" 를 명시한다.

커스터마이징

색은 컴포넌트별로 열지 않는다. 한 곳만 바꾸려면 className 을, 화면 전체를 바꾸려면 브랜드 프리셋을 쓴다.

컴포넌트	변수	기본값	비고
Textarea	--nui-textarea--border-width	`var(--nui-border-width-1)`	—
	--nui-textarea--min-height	`calc(var(--nui-size-field) * 2)`	—
	--nui-textarea--radius	`var(--nui-radius-1_5)`	—

API

이름	타입	기본값	설명
`className`	string \| undefined	—	—
`counterLabel`	string	`"글자 수"`	글자 수 카운터의 sr-only 라벨. 소비자의 어휘·언어로 바꿀 수 있어야 한다 (a11y.md §9). 카운터는 `maxLength` 가 있을 때만 렌더된다.
`disabled`	boolean	`false`	—
`errorMessage`	string	`""`	—
`id`	string	—	—
`infoMessage`	string	`""`	—
`placeholder`	string	—	—
`readOnly`	boolean	`false`	—
`resize`	TextareaResize	`"vertical"`	사용자 크기 조절 허용 여부
`rows`	number \| undefined	`4`	—
`value`	string	—	여러 줄 텍스트. 네이티브 타입(`string \| number \| readonly string[]`)에서 `string` 으로 좁혔다 — 배열은 React 가 `<select multiple>` 때문에 넣은 갈래라 textarea 에는 쓸 일이 없고, 넘기면 `'' + value` 로 합쳐져 쉼표가 값에 섞인다. 글자 수 카운터도 그 쉼표를 함께 센다. 여는 것은 non-breaking 이므로 필요해지면 그때 넓힌다 (tokens.md §1-4).

TextareaProps 에서 자동 생성됨 (components/Textarea/Textarea.tsx). 표준 DOM 속성 284개는 그대로 전달되며 표에서 생략했다.