# PercentageInput

## Introduction

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

```tsx
<PercentageInput placeholder="Enter a percentage" />
```

| Field           | Description | Default |
| --------------- | ----------- | ------- |
| value           | —           | —       |
| defaultValue    | —           | —       |
| onChange        | —           | —       |
| name            | —           | —       |
| label           | —           | —       |
| disabled        | —           | —       |
| required        | —           | —       |
| error           | —           | —       |
| helperText      | —           | —       |
| useMinorUnit    | —           | —       |
| maxDecimalScale | —           | —       |
| min             | —           | —       |
| max             | —           | —       |

### Sizes

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

### Disabled

```tsx
<PercentageInput
  placeholder="Enter a percentage"
  disabled
/>
```

### Error

```tsx
<PercentageInput
  placeholder="Enter a percentage"
  error
/>
```

### WithLabel

```tsx
<PercentageInput
  placeholder="Enter a percentage"
  label="Percentage Input"
/>
```

### WithHelperText

```tsx
<PercentageInput
  placeholder="Enter a percentage"
  label="Percentage Input"
  helperText="Please enter a percentage"
/>
```

### WithErrorText

```tsx
<PercentageInput
  placeholder="Enter a percentage"
  label="Percentage Input"
  helperText="Please enter a percentage"
  error
/>
```

### Required

```tsx
<PercentageInput
  placeholder="Enter a percentage"
  label="Percentage Input"
  helperText="Please enter a percentage"
  required
/>
```

### Min

```tsx
<PercentageInput
  placeholder="Enter a percentage"
  label="Percentage Input"
  helperText="Please enter a percentage"
  min={10}
  defaultValue={5}
/>
```

### Max

```tsx
<PercentageInput
  placeholder="Enter a percentage"
  label="Percentage Input"
  helperText="Please enter a percentage"
  max={500}
  defaultValue={5000}
/>
```
