# Input Button
URL: /components/input-button
Source: https://github.com/daangn/seed-design/blob/dev/docs/content/components/input-button.mdx

입력 필드 형태의 버튼으로, 선택창이나 피커를 열 때 사용합니다. 선택이 완료되면 버튼 라벨에 선택된 값이 표시됩니다.

| Platform | Status |
| --- | --- |
| Figma | Done |
| [React](/react/components/field-button) | Done |
| Lynx | Not Ready |
| iOS | Done |
| Android | Done |

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

## Anatomy

![Input Button의 Anatomy 이미지. Value, Container, Clear Button (Optional), Prefix/Suffix Slot으로 구성됩니다.](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/ba3fabb1-f114-4a9f-bcc6-c2d24d2caa20)

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

## Properties

### State

![Input Button의 State - Enabled, Pressed, Error, Error Pressed, Disabled, Read Only](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/5bdd8007-e747-4e28-b15a-ae221b7e966e)

Input Button은 Enabled, Pressed, Error, Error Pressed, Disabled, Read Only 상태를 가집니다.

### Value Property

![Input Button의 Value Property - Text와 Chip 컴포넌트](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/dd0c7b8e-ef5e-4f19-8a52-6342b9ec2d94)

Input Button에 값이 있는 경우 Value Property를 사용할 수 있습니다. Value에는 일반 텍스트와 [Chip](/components/chip) 컴포넌트를 표시할 수 있습니다.

### Clear Button Property

![Input Button의 Clear Button Property](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/2045d79b-90b8-450d-8da0-0d74c78825ed)

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

## Guidelines

### Input Button의 활용

![Input Button 활용 예시 - Bottom Sheet나 피커와 함께 사용](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/89d889d0-f348-46bd-bcec-6441a9796be8)

Input Button은 Input과 유사한 외형이지만 직접 값을 입력할 수 없는 버튼 컴포넌트입니다. 선택하면 [Bottom Sheet](/components/bottom-sheet)나 Picker 등이 열려 값을 선택할 수 있으며, 선택이 완료되면 버튼 라벨에 해당 값이 표시됩니다.

Input Button은 단독으로 사용할 수 없으며, 항상 [Bottom Sheet](/components/bottom-sheet), Date/Time Picker 등 선택 가능한 아이템 목록을 제공하는 UI 요소와 함께 사용해야 합니다.

## Specification

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