Input
한 줄 텍스트를 입력받아요. 라벨, 설명, 에러는 Field로 감싸서 붙여요.
변형
Figma 원본의 모든 variant예요. hover, focus는 컴포넌트가 처리해서 따로 그리지 않아요.
default
disabled
invalid
invalid · disabled
사용법
- 너비는 부모를 채워요높이 32(space/8), 좌우 space/3. 폭은 감싸는 레이아웃이 정해요.
- invalid면 빨간 링에러 상태에서는 포커스 링도 border/danger예요. 파란 링과 섞이지 않게 해요.
Props
| prop | 값 | 기본값 |
|---|---|---|
| invalid | boolean. Field 안에서는 자동으로 전달돼요 | false |
| disabled | boolean | false |
| 그 외 | 기본 <input> 속성 전부 (placeholder, type …) | — |
코드
tsx
<Field label="이메일" description="로그인할 때 써요.">
<Input placeholder="you@example.com" />
</Field>