Anex UI logoAnex UI
npm install anexui
Documentation

Documentation

FormField

A wrapper that bundles a Label, any input, helper text, and error text. Automatically injects id, aria-describedby, aria-invalid, and aria-required into the child control via cloneElement.

Preview

We'll never share your email.
Must be at least 8 characters.
Max 200 characters.

Usage

import { FormField, Input } from "anexui";

<FormField label="Email address">
  <Input type="email" placeholder="you@example.com" />
</FormField>
Copy code

Required field

<FormField label="Full name" required>
  <Input placeholder="Debayan Sen" />
</FormField>
Copy code

Helper text

<FormField label="Username" helperText="Only letters, numbers, and underscores.">
  <Input placeholder="debayan_7" />
</FormField>
Copy code

Error state

<FormField
  label="Password"
  error
  errorText="Must be at least 8 characters."
>
  <Input type="password" />
</FormField>
Copy code

With Textarea

<FormField label="Bio" helperText="Max 160 characters.">
  <Textarea rows={3} />
</FormField>
Copy code

With Select

<FormField label="Country" required>
  <Select placeholder="Choose a country">
    <option value="us">United States</option>
    <option value="in">India</option>
    <option value="uk">United Kingdom</option>
  </Select>
</FormField>
Copy code

Props

| Prop | Type | Default | Description | |---|---|---|---| | label | string | — | Label text shown above the input | | required | boolean | false | Adds * indicator and sets aria-required on the child | | helperText | string | — | Muted hint text below the input | | errorText | string | — | Error message below the input | | error | boolean | false | Activates error styling and aria-invalid on the child | | children | ReactNode | — | Required. Single form control |

Accessibility