Field
입력 컨트롤에 라벨, 설명, 에러를 붙이고 서로 연결해요(aria-describedby).
변형
Figma 원본의 모든 variant예요. hover, focus는 컴포넌트가 처리해서 따로 그리지 않아요.
로그인할 때 써요.
https://로 시작하는 주소를 입력하세요.
로그인할 때 써요.
사용법
- 에러는 설명을 대신해요아래 줄이 늘지 않아 레이아웃이 밀리지 않고, 화면 낭독기도 에러 하나만 읽어요. 그래서 에러 문구에 고치는 방법을 꼭 써요.
- 안의 Input에 invalid를 따로 주지 않아요Field가 넘겨 줘요. 라벨 색은 invalid여도 그대로예요.
- 간격라벨 ↔ 입력 ↔ 설명·에러 space/2.
Props
| prop | 값 | 기본값 |
|---|---|---|
| label | 라벨 문구 (필수) | — |
| description | 설명 문구 | — |
| error | invalid일 때 설명 자리를 대신하는 문구 | — |
| invalid · disabled | boolean. 안의 컨트롤에 자동으로 전달돼요 | false |
| children | Input, Textarea, Select, FileDropzone | — |
코드
tsx
<Field label="이메일" description="로그인할 때 써요." error="https://로 시작하는 주소를 입력하세요." invalid>
<Input />
</Field>