Textarea

미리보기

로컬 미리보기입니다. 실제 계정, 환경, 실행 데이터에는 영향을 주지 않습니다.

사용법

여러 줄 설명과 메모를 입력하세요. 텍스트는 위에서 시작합니다. 사용자는 필드를 세로로 크기 조절할 수 있습니다. Field.Root 안에서는 필드의 라벨, 설명, 오류를 그대로 받습니다.

대량의 코드를 편집하는 데 사용하지 마세요. 전용 코드 편집기를 사용하세요.

크기: SizeProvider size="small" 포털까지 포함해 구성 전체의 크기를 바꿉니다. 기본 크기는 Default입니다. 크기 안내 및 비교

구성

Field.Root → Field.Label + Textarea (native textarea) + Field.Description + Field.Error

키보드와 접근성

Enter는 줄 바꿈을 삽입합니다. Tab은 다음 입력으로 이동합니다. 네이티브 텍스트 편집과 한국어 IME 입력이 계속 작동합니다.

각 컨트롤에 목적을 설명하는 이름을 지정하세요. 오류 메시지를 해당 컨트롤에 연결하고, 상태를 색만으로 알리지 마세요. 자동 검사는 수동 키보드 및 보조 기술 테스트를 대신하지 않습니다.

예시 코드

공유 컴포넌트는 디자인 토큰에서 스타일을 가져옵니다. 각 예시는 자체 구성과 접근성 속성을 설정합니다. 호출하는 화면이 콜백, ref, 제품 데이터를 정의합니다.

import { Field, Textarea } from '@surflane/ui'

<Field.Root name='description'>
  <Field.Label>Description</Field.Label>
  <Textarea rows={4} required placeholder='Describe the deployment goal' />
  <Field.Description>Keep the context concise.</Field.Description>
  <Field.Error />
</Field.Root>

주요 API

표는 공통 래퍼의 주요 props를 나열합니다. 전체 타입은 패키지 타입 선언을 참조하세요.

관련 토큰