# Component/Form/FormField

## Props


| Name | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `className` | `string | undefined` | No |  |  |
| `status` | `undefined "info" "success" "error"` | No |  | FormField의 상태를 지정하면 children과 formHelperText 상태를 공유합니다. PDS의 Input, Dropdown, DropdownInput, NumericInput 컴포넌트만 공유하도록 제한합니다. 다른 컴포넌트는 사용하더라도 formHelperText에만 status가 적용됩니다. |
| `label` | `ReactNode` | No |  |  |
| `rightAddon` | `ReactNode` | No |  | 라벨 우측 렌더링될 Addon 요소 |
| `required` | `boolean | undefined` | No |  |  |
| `helper` | `HelpTextProps | undefined` | No |  | HelpTextProps 타입으로 넘길 경우 라벨 우측 IconHelp14에 자동으로 popover 처리됩니다. |
| `formHelperText` | `ReactNode` | No |  | FormHelperText 컴포넌트로 children 아래에 메세지를 표시합니다. |
| `formHelperTextProps` | `Omit<FormHelperTextProps, "children" | "status"> | undefined` | No |  |  |
| `labelWidth` | `CSSValueWithLength | undefined` | No | 80 | 최소너비 80px이상인 경우 라벨 너비를 지정할 수 있습니다. |
| `alignment` | `undefined "center" "top"` | No | center |  |
| `position` | `undefined "left" "top"` | No | left | label 위치를 지정할 수 있습니다.  - position 이 top 인 경우 좌측 정렬 고정입니다. |
| `width` | `CSSValueWithLength | undefined` | No | 100% |  |
