# Text Input & Textarea
URL: /components/text-input
Source: https://github.com/daangn/seed-design/blob/dev/docs/content/components/text-input.mdx

사용자로부터 텍스트를 입력받는 컴포넌트입니다.

| Platform | Status | Note |
| --- | --- | --- |
| Figma | Done |  |
| [React](/react/components/text-field-input) | Done |  |
| [Lynx](/lynx/components/text-field-input) | Done | Textarea는 /lynx/components/text-field-textarea 문서를 참고하세요. |
| iOS | Done |  |
| Android | Done |  |

## Text Input

한 줄 텍스트를 입력받는 컴포넌트입니다.

<Card href="/components/field" title="Field">
  Text Input을 Field 내부에서 사용하여 Text Field로 활용할 수 있습니다.
</Card>

### Anatomy

![Text Input의 Anatomy 이미지. 입력 필드, Container, Clear Button, Prefix/Suffix Slot으로 구성됩니다.](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/c2902deb-e4bd-40af-a1b8-f3d8c5ac2ec8)

Text Input은 입력 필드, 이를 감싸는 Container, Clear Button (Optional), 그리고 Prefix/Suffix Slot으로 구성됩니다.

### Properties

#### State

![Text Input의 State - Enabled, Focused, Error, Error Focused, Disabled, Read Only, AI Loading](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/c2ea5720-07e5-4885-be4a-191951612896)

Text Input은 Enabled, Focused, Error, Error Focused, Disabled, Read Only, AI Loading (Figma Only) 상태를 가집니다.

#### Has Value Property

![Text Input의 Has Value Property](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/d08d3fcf-5684-46d6-a2aa-edb8ff6dae46)

Text Input에 값이 있는 경우 Has Value Property를 사용할 수 있습니다.

#### Clear Button Property

![Text Input의 Clear Button Property](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/bf4025e2-0c0b-434d-bca4-2482b4b4404f)

Text Input에 값이 존재하는 경우, 해당 값을 한 번에 삭제할 수 있는 Clear Button을 표시할 수 있습니다.

#### Variant

![Text Input의 Variant - Outline, Underline](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/5352a4ac-fb39-40db-a726-784d38051dd6)

Text Input은 Outline과 Underline 두 가지 스타일을 제공합니다.

![화면의 유일한 Text Input에 Underline Variant가 사용된 예시](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/3edb12d9-c240-48e3-9fd9-6743dbba3ed4)

<DontImage alt="화면의 유일한 Text Input에 Outline Variant가 사용된 예시" body="화면에 하나의 Input만 있는 경우 Underline Variant를 사용하세요." />

화면에 하나의 Input만 있는 경우 Underline 사용을 권장합니다.

### Custom Input

![Text Input의 Custom Input 예시](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/4fbc5d18-737f-4ec6-867b-e3277bba0cf3)

Text Input의 입력 영역은 Slot으로 구성되어 있습니다.

특수한 포맷이나 마스킹 등의 기능이 필요한 경우, 포맷과 동작을 직접 정의해서 사용할 수 있습니다.

### Text Input을 2열로 구성하기

한 화면에서 입력할 내용이 많을 경우, Input을 2열 레이아웃으로 구성할 수 있습니다.

{/* <Grid>

  <FigmaImage id="" alt="가로로 나열한 Text Input 간 16px 간격을 유지한 예시" />
  <DontImage
  figmaId=""
  alt="주민등록번호 입력을 두 개의 Text Input으로 나누어 구성한 예시"
  body="입력값이 하나인 경우 한 번에 입력할 수 있도록 해주세요."
  />

  </Grid> */}

레이블과 입력값이 짧을 때만 사용하는 것을 권장하며, 레이아웃 사이 간격을 충분히 확보하여 사용자가 실수로 옆 Input을 선택하지 않도록 주의해주세요.

주민등록번호나 전화번호처럼 입력 형식이 정해진 경우, Input을 나누지 말고 값에 포맷을 자동으로 적용해서 추가 인터랙션 없이 한 번에 입력할 수 있도록 해주세요.

***

## Textarea

여러 줄의 텍스트를 입력받을 수 있는 컴포넌트로, 자동 리사이즈를 지원합니다.

<Card href="/components/field" title="Field">
  Textarea를 Field 내부에서 사용하여 Textarea Field로 활용할 수 있습니다.
</Card>

### Anatomy

![Textarea의 Anatomy 이미지. 입력 필드와 Container로 구성됩니다.](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/be73f2f0-cbb1-4cc8-9a89-d59fecb9d4ae)

Textarea는 입력 필드, 이를 감싸는 Container로 구성됩니다.

### Properties

#### State

![Textarea의 State - Enabled, Focused, Error, Error Focused, Disabled, Read Only, AI Loading](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/ce962424-a1e7-41d8-9639-44a2e47f7cfd)

Textarea는 Enabled, Focused, Error, Error Focused, Disabled, Read Only, AI Loading (Figma Only) 상태를 가집니다.

#### Has Value Property

![Textarea의 Has Value Property](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/09cdbf63-5cc7-4441-9400-0738ff8fb862)

Textarea에 값이 있는 경우 Has Value Property를 사용할 수 있습니다.

#### Auto Size

![Textarea의 Auto Size 옵션 - 자동 높이 조절](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/4813aef2-2964-4221-b2a9-dbf1fca6de06)

Auto Size 옵션을 사용하면 입력된 글자 수에 따라 Textarea의 높이가 자동으로 늘어납니다. 이 경우 Textarea의 최소 높이는 3줄(95px)을 유지해야 합니다. 최대 높이는 기본적으로 제한이 없으며, 필요에 따라 최대 높이를 별도로 지정할 수 있습니다.

![Textarea의 Auto Size 비활성화 시 스크롤 동작](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/c80eafca-6dc1-4d1d-b1cc-7d6bee62a842)

Auto Size를 비활성화할 경우, 최소 높이는 2줄(70px)이어야 합니다. 이때는 반드시 최대 높이 값을 지정해야 하며, 내용이 최대 높이를 초과하면 Input 영역 내에서 스크롤이 생성됩니다.

## Specification

Component spec (JSON): /rootage/components/text-input.json