Form

@hua-labs/ui

v1.1.0

구조화되고 접근성 있는 폼을 만들기 위한 폼 컨테이너 컴포넌트입니다. FormField와 FormGroup을 함께 사용합니다.

설치

bash

npm install @hua-labs/hua

Import

tsx

import { Form, FormField, FormGroup } from "@hua-labs/hua";

@hua-labs/ui의 UI 컴포넌트를 @hua-labs/hua에서 통합 제공합니다.

UI 컴포넌트, 모션 훅, i18n을 하나의 패키지로 사용할 수 있습니다.

라이브 데모

기본 폼

에러 상태

인라인 그룹

글래스 변형

하위 컴포넌트

FormField

에러 메시지 지원이 있는 개별 폼 필드 래퍼

FormGroup

여러 폼 필드를 그룹화, 인라인 레이아웃 지원

Form Props

Props

이름	타입	기본값	설명
`variant`	`"default" \| "glass"`	`"default"`	폼 스타일 변형
`onSubmit`	`(e: FormEvent) => void`	-	Form submit handler
`className`	`string`	-	추가 CSS 클래스

FormField Props

Props

이름	타입	기본값	설명
`error`	`string`	-	표시할 에러 메시지
`required`	`boolean`	`false`	필수 필드 표시 (자식 입력에 전달됨)

FormGroup Props

Props

이름	타입	기본값	설명
`inline`	`boolean`	`false`	필드를 한 줄에 표시 (flex 레이아웃)

코드 예시

docs:common.basicUsagetsx

import { Label, Input, Button } from '@hua-labs/ui';
import { Form, FormField } from '@hua-labs/ui/form';

<Form onSubmit={(e) => console.log('submitted')}>
  <FormField>
    <Label htmlFor="name">Name</Label>
    <Input id="name" placeholder="Enter your name" />
  </FormField>
  <Button type="submit">Submit</Button>
</Form>

docs:components.form.accessibility.withErrortsx

<Form onSubmit={handleSubmit}>
  <FormField error={errors.email} required>
    <Label htmlFor="email">Email</Label>
    <Input id="email" type="email" />
  </FormField>
</Form>

docs:components.form.accessibility.inlineGrouptsx

<Form>
  <FormGroup inline>
    <FormField>
      <Label htmlFor="firstName">First Name</Label>
      <Input id="firstName" />
    </FormField>
    <FormField>
      <Label htmlFor="lastName">Last Name</Label>
      <Input id="lastName" />
    </FormField>
  </FormGroup>
</Form>

docs:components.form.accessibility.glassVarianttsx

<Form variant="glass" onSubmit={handleSubmit}>
  <FormField>
    <Label variant="glass">Email</Label>
    <Input variant="glass" type="email" />
  </FormField>
  <Button variant="glass">Submit</Button>
</Form>

접근성

•role='alert': 에러 메시지를 스크린 리더에 자동으로 알림
•aria-live: 에러 업데이트를 동적으로 알림
•aria-describedby: 입력 필드와 에러 메시지를 연결
•aria-invalid: 보조 기술에 유효하지 않은 상태를 전달

Prose Label