Skip to content
Docs

@hua-labs/ui
v1.1.0

bash
npm install @hua-labs/hua
tsx
import { Form, FormField, FormGroup } from "@hua-labs/hua";

Form Props

variant"default" | "glass""default"Form visual variant
onSubmit(e: FormEvent) => void-Form submit handler
classNamestring-Additional CSS class

FormField Props

errorstring-Error message to display
requiredbooleanfalseMark field as required

FormGroup Props

inlinebooleanfalseDisplay fields inline (horizontal layout)

docs:common.basicUsagetsx
import { Form, FormField, Label, Input, Button } from '@hua-labs/hua';

<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>
With Errortsx
<Form onSubmit={handleSubmit}>
  <FormField error={errors.email} required>
    <Label htmlFor="email">Email</Label>
    <Input id="email" type="email" />
  </FormField>
</Form>
Inline Grouptsx
<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>
Glass Varianttsx
<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': Error messages are announced to screen readers
  • •aria-live: Error updates are announced dynamically
  • •aria-describedby: Input fields are linked to their error messages
  • •aria-invalid: Invalid state is communicated to assistive technology
PanelLabel