Components

Field

Docs

API 사용가이드입니다. 조합·파츠 프리뷰는 Overview를 참고하세요.

API

Field · FieldLabel · FieldDescription · FieldError · FieldGroup로 한 필드의 의미 단위를 구성합니다. 컨트롤(Input 등)은 children으로 넣습니다.

import {
  Field,
  FieldGroup,
  FieldLabel,
  FieldDescription,
  FieldError,
} from "@/components/field";
import { Input } from "@/components/input";

<Field className="flex flex-col gap-[var(--gap-8)]">
  <FieldLabel htmlFor="email">이메일</FieldLabel>
  <Input id="email" type="email" placeholder="name@example.com" />
  <FieldDescription>회사 메일 주소를 입력하세요.</FieldDescription>
</Field>

<Field className="flex flex-col gap-[var(--gap-8)]" data-invalid>
  <FieldLabel htmlFor="password">비밀번호</FieldLabel>
  <Input id="password" type="password" aria-invalid />
  <FieldError>8자 이상 입력해 주세요.</FieldError>
</Field>

Props

Name	Type	Default	Description
`Field.className`	`string`	—	레이아웃은 orientation prop 없이 className으로 지정합니다. 예: flex flex-col gap-…
`Field data-invalid`	`boolean (attribute)`	—	필드 단위 무효 표시용 훅. 컨트롤의 aria-invalid와 함께 쓰는 것을 권장합니다.
`FieldLabel`	`React.ReactNode (children)`	—	레이블 문구. htmlFor로 컨트롤 id와 연결합니다. 내부적으로 Label과 동일 스타일입니다. Field 밖 단독 라벨은 @/components/label을 쓰세요.
`FieldDescription`	`React.ReactNode (children)`	—	도움말 문구. 필요한 위치에 children으로 배치합니다.
`FieldError`	`React.ReactNode (children)`	—	검증 실패 메시지. role="alert". 입력 검증 보더와 함께 사용합니다.
`FieldGroup`	`React.ReactNode (children)`	—	여러 Field를 세로로 묶는 컨테이너.

Notes

소비 앱 필수: React 19, Tailwind CSS v4, ClaBi tokens.css(+ @theme 매핑), clsx.
clsx 패키지가 필수입니다. className 병합에 import { clsx } from "clsx" 를 사용합니다.
Field는 Input에 종속되지 않습니다. Select · Checkbox 등에도 동일하게 조합합니다.
Field 밖 단독 라벨이 필요하면 이후 Label 프리미티브를 추가할 수 있습니다. 폼 필드 안에서는 FieldLabel을 사용합니다.
이전 Input 패키지의 FieldInputLabel은 FieldLabel로 이름이 바뀌었고 @/components/field로 이동했습니다.