# SField

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

### SField

#### Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `name?` | `string` | — | 폼 연동용 name 속성 |
| `label?` | `string` | `''` | 레이블 텍스트 |
| `icon?` | `SIconName` | — | 레이블 영역 아이콘명 (크기는 size 토큰 16px 고정) |
| `iconColor?` | `SColor` | — | 레이블 영역 아이콘 색상. 미지정 시 currentColor 상속 |
| `labelTooltip?` | `string` | `''` | 레이블 툴팁 텍스트 |
| `labelTooltipProps?` | `Partial<STooltipProps>` | — | 레이블 툴팁 상세 옵션 (SdTooltipProps 대응) |
| `labelWidth?` | `number \| string` | — | 레이블/어드온 레이블 너비 (숫자=px). label·addonLabel 폭에 공통 적용 |
| `labelHeight?` | `number \| string` | — | 레이블 박스 높이 (숫자=px). 미지정 시 size별 기본값 사용. 컨트롤 박스가 기본 필드 높이보다 큰 경우(multiline 등) 첫 행에 세로 중앙 정렬을 맞추기 위해 컨트롤 박스 높이를 넘겨받는다. |
| `size?` | `SFieldSize` | `'sm'` | 필드 크기 |
| `addonLabel?` | `string` | `''` | 우측 어드온 레이블 |
| `addonAlign?` | `SFieldAddonAlign` | `'start'` | 어드온 정렬 |
| `error?` | `boolean` | `false` | 에러 상태 |
| `errorMessage?` | `string` | `''` | 에러 메시지 |
| `status?` | `SFieldStatus` | — | 필드 상태 — 'error' | 'pass' | 'default'. 'pass'면 초록 테두리 |
| `focused?` | `boolean` | `false` | 포커스 상태 (제어/반영) |
| `hovered?` | `boolean` | `false` | 호버 상태 (제어/반영) |
| `rules?` | `Rule[]` | — | 유효성 규칙 (검증은 컨트롤에서 수행, API 패리티) |
| `hint?` | `string` | `''` | 하단 힌트 |
| `disabled?` | `boolean` | `false` | 비활성 |
| `readOnly?` | `boolean` | `false` | 읽기 전용 (회색 배경) |
| `width?` | `number \| string` | — | 컨트롤 너비 (숫자=px). 지정하면 필드가 부모 폭을 다 먹지 않고 (레이블 + width) 만큼만 차지한다. 다른 요소와 나란히 놓으려면 부모를 flex 로 두면 된다. |
| `minWidth?` | `number \| string` | — | 컨트롤 최소 너비 (숫자=px). 하한선만 지정하며 필드는 계속 부모 폭을 채운다 |
| `multiline?` | `boolean` | `false` | 멀티라인(textarea) — 컨트롤 높이를 고정하지 않고 min-height만 적용 |
| `borderless?` | `boolean` | `false` | 테두리 박스 제거 (inline 컨트롤용) — border/배경/hover·focus 강조만 사라지고 label·hint·errorMessage 등 나머지 필드 구성은 그대로 동작한다. |
| `children?` | `ReactNode` | — | 실제 컨트롤 (input/select 등) — 테두리 없이 렌더, 테두리는 SField가 제공 |
| `className?` | `string` | — |  |
| `style?` | `CSSProperties` | — |  |

#### Events

| Event | Type | Description |
|-------|------|-------------|
| `onMouseEnter` | `() => void` |  |
| `onMouseLeave` | `() => void` |  |

#### Methods (ref)

| Method | Type | Description |
|--------|------|-------------|
| `focus` | `() => void` | 내부 컨트롤에 포커스하고 필드를 화면에 스크롤합니다. |

## Dependencies

### Used by

 - [SBarcodeInput](../SBarcodeInput)
 - [SChipInput](../SChipInput)
 - [SDatePicker](../SDatePicker)
 - [SDateRangePicker](../SDateRangePicker)
 - [SFilePicker](../SFilePicker)
 - [SInput](../SInput)
 - [SNumberInput](../SNumberInput)
 - [SSelect](../SSelect)
 - [STextarea](../STextarea)
 - [STimePicker](../STimePicker)
 - [STimeRangePicker](../STimeRangePicker)

### Depends on

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

### Graph

```mermaid
graph TD;
  SField --> SIcon
  SField --> STooltip
  SBarcodeInput --> SField
  SChipInput --> SField
  SDatePicker --> SField
  SDateRangePicker --> SField
  SFilePicker --> SField
  SInput --> SField
  SNumberInput --> SField
  SSelect --> SField
  STextarea --> SField
  STimePicker --> SField
  STimeRangePicker --> SField
  style SField fill:#f9f,stroke:#333,stroke-width:4px
```