Field
설치 확인레이블·설명·오류를 묶는 입력 틀
1. 목적과 출처
레이블·설명·오류를 묶는 입력 틀
- 출처
- shadcn 기본 제공 (Base UI 기반 base-nova 스타일)
- 프로젝트
src/components/ui/field.tsx- Registry
@adcapsule/field
2. 프리뷰와 변형
오른쪽 위에서 색 모드를 바꾸면 라이트·다크를 비교할 수 있습니다.
| 구성 | 모양 |
|---|---|
| 세로 vertical | 팀원에게 보이는 이름입니다. |
| 가로 horizontal | |
| 오류 data-invalid | 제목을 입력하세요. |
| 묶음 FieldSet |
3. 속성 바꿔 보기
알림을 받을 주소입니다.
orientation
4. 설치와 사용
- npm 패키지
- class-variance-authority
- 함께 설치
- @adcapsule/label, @adcapsule/separator, @adcapsule/utils
처음 쓰는 프로젝트는 @adcapsule/theme를 먼저 설치합니다. Registry 연결
5. 바꿔도 되는 것과 유지할 토큰
제품에서 바꿔도 되는 것
- orientation: vertical·horizontal·responsive
- data-invalid와 FieldError로 오류
- FieldSet·FieldLegend로 묶음
- FieldContent로 입력과 설명 묶기
공통으로 유지할 토큰
- text.secondary (설명)
- status.danger (FieldError)
- font.size.body (레이블·설명·legend)
- radius.lg (선택 카드형 레이블)