Field

폼 필드를 구성하는 레이아웃 컴포넌트

Basic Usage

Field는 Label, Input, Description, Error 메시지를 그룹화합니다.

tsx

<Field>
  <FieldLabel htmlFor="email">Email</FieldLabel>
  <Input id="email" type="email" placeholder="you@example.com" />
  <FieldDescription>업무용 이메일을 입력하세요.</FieldDescription>
</Field>

With Error

유효성 검증 실패 시 에러 메시지를 표시합니다.

tsx

<Field data-invalid="true">
  <FieldLabel htmlFor="email">Email</FieldLabel>
  <Input id="email" type="email" aria-invalid="true" defaultValue="invalid-email" />
  <FieldError>유효한 이메일 주소를 입력하세요.</FieldError>
</Field>

Horizontal Orientation

가로 방향 레이아웃을 지원합니다.

이용약관에 동의합니다

서비스 이용을 위해 필수입니다.

tsx

<Field orientation="horizontal">
  <Checkbox id="terms" />
  <FieldContent>
    <FieldLabel htmlFor="terms">이용약관에 동의합니다</FieldLabel>
    <FieldDescription>서비스 이용을 위해 필수입니다.</FieldDescription>
  </FieldContent>
</Field>

Field Group

FieldGroup과 FieldSet으로 여러 필드를 그룹화할 수 있습니다.

개인정보

tsx

<FieldSet>
  <FieldLegend>개인정보</FieldLegend>
  <FieldGroup>
    <Field>
      <FieldLabel htmlFor="name">이름</FieldLabel>
      <Input id="name" placeholder="홍길동" />
    </Field>
    <Field>
      <FieldLabel htmlFor="phone">연락처</FieldLabel>
      <Input id="phone" placeholder="010-0000-0000" />
    </Field>
  </FieldGroup>
</FieldSet>

Usage

tsx

import {
  Field,
  FieldLabel,
  FieldDescription,
  FieldError,
  FieldGroup,
  FieldSet,
  FieldLegend,
  FieldContent,
} from '@gpters-internal/ui';

function Example() {
  return (
    <Field>
      <FieldLabel htmlFor="email">Email</FieldLabel>
      <Input id="email" type="email" />
      <FieldDescription>업무용 이메일을 입력하세요.</FieldDescription>
    </Field>
  );
}