FormControl

@hua-labs/ui

v1.1.0

Wrapper for form fields with label, description, and error handling.

설치

bash

npm install @hua-labs/hua

Import

tsx

import { FormControl } from "@hua-labs/hua";

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

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

신규 v1.1.0

Import

import { FormControl, useFormValidation } from '@hua-labs/hua';

라이브 데모

기본

Username

설명 포함

Bio

Write a short bio about yourself

필수 필드

에러 상태

Invalid email format

전체 폼 예시

Props

이름	타입	기본값	설명
`label`	`string`	-	Field label text
`description`	`string`	-	Helper text below the label
`error`	`string`	-	Error message to display
`required`	`boolean`	`false`	Show required indicator (*)
`htmlFor`	`string`	-	Label's for attribute
`showErrorIcon`	`boolean`	`true`	Show error icon with message
`suppressBrowserValidation`	`boolean`	`true`	Suppress browser's native validation
`children*`	`ReactNode`	-	Form input element

useFormValidation 훅

폼 유효성 검사를 위한 훅으로, 커스텀 에러 메시지를 지원합니다.

Returns

Props

이름	타입	기본값
`errors`	`Record<string, string>`	-
`validate`	`(rules) => boolean`	-
`clearError`	`(field: string) => void`	-
`clearAllErrors`	`() => void`	-

코드 예시

Basic

import { Input } from '@hua-labs/ui';
import { FormControl } from '@hua-labs/ui/form';

<FormControl label="Email" htmlFor="email">
  <Input id="email" type="email" placeholder="name@example.com" />
</FormControl>

With Description

<FormControl
  label="Password"
  description="Must be at least 8 characters"
  htmlFor="password"
>
  <Input id="password" type="password" />
</FormControl>

With Error

<FormControl
  label="Email"
  error="Invalid email format"
  htmlFor="email"
>
  <Input id="email" type="email" aria-invalid />
</FormControl>

With Validation Hook

import { Input } from '@hua-labs/ui';
import { FormControl, useFormValidation } from '@hua-labs/ui/form';

const { errors, validate, clearError } = useFormValidation();

const handleSubmit = (e) => {
  e.preventDefault();
  const isValid = validate({
    email: {
      value: email,
      required: true,
      pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
      messages: {
        required: "Email is required",
        pattern: "Invalid email format",
      },
    },
  });
  if (isValid) { /* submit */ }
};

<FormControl label="Email" error={errors.email} required>
  <Input
    value={email}
    onChange={(e) => { setEmail(e.target.value); clearError('email'); }}
    aria-invalid={!!errors.email}
  />
</FormControl>

접근성

•에러 role: 에러 메시지에 role='alert' 적용하여 스크린 리더에 전달
•aria-live: 에러 메시지에 aria-live='polite'를 사용하여 동적 알림 처리
•라벨 연결: htmlFor 속성으로 라벨과 입력 필드 연결
•필수 표시: 시각적 별표(*)와 aria-required로 필수 필드 표시

Label Checkbox