Field
FieldGroup과 FieldSet으로 레이블, 입력, 설명, 오류를 완전한 폼 구역으로 구성합니다.
- 성숙도
- 후보
- 소스 경로
components/ui/field.tsx- 소스
- 소스
실제 미리보기
사용할 때
사용 기준
하나의 입력은 Field로, 관련 입력 묶음은 FieldGroup과 FieldSet으로 구성합니다.
사용하지 않을 때
읽기 전용 정보나 관련 없는 입력을 하나의 레이블로 묶지 않습니다.
변형과 상태
default고정 예시레이블과 입력이 하나의 항목으로 읽히는지 확인합니다.
required고정 예시필수 표시와 native required 상태를 함께 확인합니다.
invalid고정 예시오류 문구와 aria-invalid 연결을 확인합니다.
접근성
중첩된 FieldContent 안의 설명과 오류도 컨트롤에 연결하고 FieldLegend로 그룹 목적을 알립니다.
API
| 속성 | 타입 | 필수 | 설명 |
|---|---|---|---|
required | boolean | 아니요 | 중첩 컨트롤의 필수 상태입니다. |
invalid | boolean | 아니요 | 오류 상태와 오류 설명 연결을 활성화합니다. |
orientation | "vertical" | "horizontal" | "responsive" | 아니요 | 레이블 영역과 컨트롤의 배치 방식입니다. |
children | ReactNode | 아니요 | FieldContent, 레이블, 설명, 오류와 하나의 컨트롤 조합입니다. |
사용 예시
지원 importimport {
Field,
FieldContent,
FieldDescription,
FieldError,
FieldGroup,
FieldLabel,
FieldLegend,
FieldSeparator,
FieldSet,
FieldTitle,
} from "@/components/ui/field"
<FieldSet>
<FieldLegend>Document settings</FieldLegend>
<FieldGroup>
<Field orientation="responsive">
<FieldContent>
<FieldTitle>Publishing</FieldTitle>
<FieldLabel>Slug</FieldLabel>
<FieldDescription>Public identifier</FieldDescription>
</FieldContent>
<Input />
</Field>
</FieldGroup>
</FieldSet>