# SNumberInput

> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.

### SNumberInput

#### Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `value?` | `string \| number \| null` | — | 입력 값 |
| `size?` | `SNumberInputSize` | `'sm'` | 크기 |
| `min?` | `number` | `Number.NEGATIVE_INFINITY` | 최솟값 |
| `max?` | `number` | `Number.POSITIVE_INFINITY` | 최댓값 |
| `step?` | `number` | `1` | 스텝 단위 |
| `useButton?` | `boolean` | `false` | 증감 버튼 표시 |
| `useDecimal?` | `boolean` | `false` | 소수점 입력 허용 |
| `maxDecimalLength?` | `number` | — | 소수점 이하 최대 자리수 |
| `inputPrefix?` | `string` | `''` | 입력 앞 접두 텍스트 |
| `inputSuffix?` | `string` | `''` | 입력 뒤 접미 텍스트 |
| `inputClass?` | `string` | — | 네이티브 input className |
| `inputStyle?` | `CSSProperties` | — | 네이티브 input style |
| `autoFocus?` | `boolean` | — | 마운트 시 자동 포커스 |
| `name?` | `string` | — | 폼 연동 name |
| `placeholder?` | `string` | `'입력해 주세요.'` |  |
| `disabled?` | `boolean` | `false` |  |
| `readOnly?` | `boolean` | `false` |  |
| `rules?` | `Rule[]` | — | 유효성 규칙 — blur 시 검증 |
| `status?` | `SFieldStatus` | — |  |
| `focused?` | `boolean` | — |  |
| `hovered?` | `boolean` | — |  |
| `label?` | `string` | — |  |
| `labelWidth?` | `number \| string` | — |  |
| `icon?` | `SIconName` | — |  |
| `iconColor?` | `SColor` | — |  |
| `labelTooltip?` | `string` | — |  |
| `labelTooltipProps?` | `Partial<STooltipProps>` | — |  |
| `addonLabel?` | `string` | — |  |
| `addonAlign?` | `SFieldAddonAlign` | — |  |
| `hint?` | `string` | — |  |
| `error?` | `boolean` | — |  |
| `errorMessage?` | `string` | — |  |
| `width?` | `number \| string` | — |  |
| `className?` | `string` | — |  |
| `style?` | `CSSProperties` | — |  |

#### Events

| Event | Type | Description |
|-------|------|-------------|
| `onValueChange` | `(value: number \| null) => void` | 값 변경 (sdUpdate) — number|null 전달 |
| `onFocus` | `(e: React.FocusEvent<HTMLInputElement>) => void` | 포커스 이벤트 (sdFocus) |
| `onBlur` | `(e: React.FocusEvent<HTMLInputElement>) => void` | 블러 이벤트 (sdBlur) |

## Dependencies

### Used by

 - [SKeyValueTable](../SKeyValueTable)

### Depends on

- [SField](../SField)
- [SIcon](../SIcon)

### Graph

```mermaid
graph TD;
  SNumberInput --> SField
  SNumberInput --> SIcon
  SKeyValueTable --> SNumberInput
  style SNumberInput fill:#f9f,stroke:#333,stroke-width:4px
```