FormField
<FormField>TailwindCSS ModulesA structural wrapper component that provides consistent styling for labels, descriptions, required indicators, and validation errors.
InstallationColoxo CLI
npx coloxo add form-field --style coloxo-cssES Module ImportPlayground / npm package
import { FormField } from '@coloxo/ui';Design Tokens:
--cx-text-secondary: #475569--cx-error-500: #EF4444asterisk: red-500
1. Variant Matrix
FormField handles the layout of metadata around any form control.
| Default | Required & Description | Invalid State | |
|---|---|---|---|
| States | Finance code | Unknown code |
2. Interactive Props Configurator
Required Indicator
Optional Indicator
Show Description
Invalid / Error State
Visual Render Canvas
Finance code
tsx
<FormField label="Cost center" htmlFor="cc" required description="Finance code"> <input id="cc" className="..." /></FormField>3. Dark theme
FormField text colors are carefully calibrated to remain legible against dark backgrounds.
Finance code
Accessibility
HTMLFor Binding
The `htmlFor` prop is critical. It must match the `id` of the child input element to ensure screen readers announce the label when the input is focused.
Role Alert
When an `error` is provided, it is rendered inside a `role="alert"` container, meaning screen readers will immediately announce the error message.
Props
| Name | Type | Default | Description |
|---|---|---|---|
| label | ReactNode | — | Field label. |
| description | ReactNode | — | Helper text below the label. |
| error | ReactNode | — | Validation message. Announced with role=alert. |
| htmlFor | string | — | ID of the associated form control. |
| required | boolean | — | Shows a required indicator. |
| optional | boolean | — | Shows an optional indicator. |