필드 (Field)
필드는 레이블과 입력 요소, 보조 텍스트를 하나로 묶어 사용자가 무엇을 어떻게 입력해야 하는지 명확히 안내하는 폼 단위예요. 제목과 필수·선택 표시로 입력의 목적과 요구 조건을 알려주고, 도움말 텍스트나 글자 수처럼 입력을 돕는 정보를 함께 제공해 사용자가 망설임 없이 정확하게 입력하도록 도와요. 일관된 필드 체계는 구성 요소를 규칙에 맞게 배치해 폼 전반의 가독성과 작성 흐름을 일정하게 유지하는 역할을 해요.
Usage
import { Field, Input } from "podo-ui/react";import "podo-ui/styles.css";
// countMax만 지정하면 글자 수는 필드가 스스로 세요.<Field label="제목" required helperText="도움말 텍스트" countMax={500}> <Input placeholder="내용을 입력해 주세요" /></Field>응용 (composition)
필드 응용은 입력의 맥락과 안내 수준에 따라 requirement, sub-label, suffix-icon, footer, helper-text, character-count를 조합해 구성해요. requirement는 필수(*)·선택 여부를 제목 옆에 표시하고, sub-label은 제목을 보충하는 부가 설명을, suffix-icon은 도움말이나 상태를 알리는 보조 아이콘을 제목 영역에 더해요. footer는 입력 아래 안내 영역으로, 그 안에서 helper-text는 입력 방법이나 오류를 안내하고 character-count는 입력 길이를 실시간으로 보여줘요. 필요한 요소만 선택해 조합하면 과하지 않게 꼭 필요한 안내만 전달할 수 있어요.
속성 (props)
podo-ui/react의 Field가 받는 속성이에요. children은 슬롯이라 인풋뿐 아니라 버튼, 콤보박스 등 어떤 컨트롤이든 넣을 수 있고, 필드가 레이블·설명의 접근성 연결(aria)을 자동으로 처리해요. 이 밖에 표준 div 속성(className, id 등)도 그대로 전달돼요.
| Prop | Type | Default | 설명 |
|---|---|---|---|
label | ReactNode | — (필수) | 필드 제목. 컨트롤과 label로 연결돼요 |
subLabel | ReactNode | — | 제목을 보충하는 부가 설명 (시안 sub-label) |
suffixIcon | ReactNode | — | 제목 영역 오른쪽 보조 아이콘 (시안 suffix-icon) |
helperText | ReactNode | — | 입력 아래 도움말 (시안 helper-text) |
error | ReactNode | — | 오류 메시지. helperText 자리를 대체하고 danger 색으로 표시돼요 |
count | number | — (자동) | 현재 글자 수. 생략하면 필드가 컨트롤의 입력을 따라 자동으로 세고, 지정하면 그 값으로 고정돼요(제어형) |
countMax | number | — | 최대 글자 수. footer에 카운터가 나타나고, 컨트롤에 maxLength로 전달돼 초과 입력을 막아요 |
required | boolean | false | 필수 입력 표시(*)와 aria-required를 함께 적용해요 |
invalid | boolean | false | 오류 상태. 컨트롤에 aria-invalid를 전달해요 |
disabled | boolean | false | 비활성 상태 |
children | ReactNode | — (필수) | 컨트롤 슬롯. 인풋·버튼·콤보박스 등 어떤 컨트롤이든 넣을 수 있어요 |