입력
Betelgeuse 의 입력 필드는 굵은 선과 강한 focus 면으로 입력 상태를 드러낸다. 정숙한 폼 필드보다 포스터형 인터페이스에 가까운 물성을 가진다.
상태
default
disabled
활용 방법
검색형 입력
아이콘과 대문자 플레이스홀더가 네오브루탈 톤에 잘 맞는다.
Preview
tsx
<Input icon={<Search size={14} />} placeholder="SEARCH MISSION" />
스타일 원칙
- · focus 는 색면과 위치 변화로 분명하게 표현한다.
- · 작은 입력도 굵은 테두리를 유지한다.
속성
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| icon | ReactNode | - | 선두 아이콘 |
| className | string | "w-full" | 폭 조절 |
| ...props | InputHTMLAttributes | - | placeholder·value·disabled 등 |