로고SEED Design
Text Fields

Multiline Text Field

이 문서는 정리 중이에요. 문의 내용은 #_design_core 채널을 찾아주세요.

Installation

npx @seed-design/cli@latest add text-field

Props

TextField

PropTypeDefault
asChild?
boolean
false
maxGraphemeCount?
number
-
onValueChange?
((values: { value: string; graphemes: string[]; slicedValue: string; slicedGraphemes: string[]; }) => void)
-
name?
string
-
invalid?
boolean
false
readOnly?
boolean
false
disabled?
boolean
false
required?
boolean
false
defaultValue?
string
-
value?
string
-
size?
"xlarge" | "large" | "medium"
medium
hideCharacterCount?
boolean
-
errorMessage?
ReactNode
-
description?
ReactNode
-
suffix?
ReactNode
-
suffixIcon?
ReactNode
-
prefix?
ReactNode
-
prefixIcon?
ReactNode
-
indicator?
ReactNode
-
label?
ReactNode
-

TextFieldTextarea

PropTypeDefault
asChild?
boolean
false
autoresize?
boolean
true

Examples

State

Enabled

Disabled

Read Only

Sizing

Fixed Height

Auto Height with Constraints

Customizable Parts

Required Indicator

(필수)

Optional Indicator

(선택)

Grapheme Count

Size

XLarge

Large

Medium

Use Cases

Form

(필수)
(필수)

React Hook Form

(필수)
(필수)

Formatting

Slicing

On this page