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

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

<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/6b04d235-cba6-4240-b8a4-1b869a12d3a9)

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/46e16404-a7ab-4b77-b0a7-aeb4ca3e5f2e)

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/d8e106c3-2b64-4dc7-8110-0f7890e9d696)

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/be99fad0-a093-4ac1-a5ad-35f4ef22ea7f)

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

## Guidelines

### Input Button의 활용

![Input Button 활용 예시 - Bottom Sheet나 피커와 함께 사용](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/8dc1ce74-8848-47ee-8fec-6882477eb996)

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