# CurrencyInput

## Introduction

> 💡 **Form 구성 시 내장 prop 사용을 권장합니다**
>
> 이 컴포넌트는 `label`, `helperText` 등의 Form 요소를 자체적으로 지원합니다.
> Form을 구성할 때 Typography로 별도의 label이나 helperText를 만드는 대신, 컴포넌트의 내장 prop을 사용하세요.

```tsx
<CurrencyInput
  name="currency-input"
  defaultValue={1000}
/>
```

| Field        | Description | Default          |
| ------------ | ----------- | ---------------- |
| size         | —           | —                |
| name         | —           | "currency-input" |
| value        | —           | —                |
| defaultValue | —           | 1000             |
| currency     | —           | —                |
| label        | —           | —                |
| helperText   | —           | —                |
| required     | —           | —                |
| error        | —           | —                |
| disabled     | —           | —                |
| max          | —           | —                |
| useMinorUnit | —           | —                |
| onChange     | —           | —                |

### KRW

```tsx
<CurrencyInput
  name="currency-input"
  defaultValue={1000}
  currency="KRW"
/>
```

### Sizes

```tsx
<Stack gap={2}>
  <CurrencyInput size="sm" label="Small" defaultValue={1000} />
  <CurrencyInput size="md" label="Medium" defaultValue={1000} />
  <CurrencyInput size="lg" label="Large" defaultValue={1000} />
</Stack>
```

### WithLabel

```tsx
<CurrencyInput
  name="currency-input"
  defaultValue={1000}
  label="Currency Input"
/>
```

### WithHelperText

```tsx
<CurrencyInput
  name="currency-input"
  defaultValue={1000}
  label="Currency Input"
  helperText="Please enter a currency"
/>
```

### Error

```tsx
<CurrencyInput
  name="currency-input"
  defaultValue={1000}
  label="Currency Input"
  helperText="Please enter a currency"
  error
/>
```

### PriceLimitError

```tsx
<CurrencyInput
  name="currency-input"
  defaultValue={10000000}
  label="Currency Input"
  helperText="Please enter a currency"
  max={1000000}
/>
```
