HUA Docs - The Syntax of Emotion

v1.1.0

bash

npm install @hua-labs/hua

tsx

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

v1.1.0

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

Username

Bio

Write a short bio about yourself

Invalid email format


`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

Returns


`errors`	`Record<string, string>`	-	Current validation errors object
`validate`	`(rules) => boolean`	-	Validates fields and returns true if valid
`clearError`	`(field: string) => void`	-	Clears error for a specific field
`clearAllErrors`	`() => void`	-	Clears all errors

Basic

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

<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 { FormControl, Input, useFormValidation } from '@hua-labs/hua';

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>

•Error Role: Error messages have role='alert' for screen readers
•Aria Live: Error messages use aria-live='polite' for announcements
•Label For: Label is connected to input via htmlFor attribute
•Required Indicator: Visual asterisk and aria-required for required fields

Label Checkbox