Form Field
FreeA wrapper component that provides a consistent structure for any input: a label, the input slot, helper text, and error messaging. Handles accessible linkage between the label, input, and error/helper text via htmlFor, id, and aria-describedby automatically.
6 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Default | Form field with label, input slot, and optional helper text. | Use to wrap any input component for consistent spacing, labelling, and validation messaging. |
| Required | Form field with a required indicator (*) next to the label. | Use for mandatory fields to indicate that a value must be provided. |
| With Error | Form field showing error message in red below the input. | Use when the field fails validation after form submission or on blur. |
| With Help |
Usage Guidelines
Do
Use Form Field as the standard wrapper for all form inputs.
Don't
Skip the Form Field wrapper and manually wire up labels and errors.
Do
Show error messages below the input, not above or beside it.
Don't
Show errors before the user has interacted with the field.
Do
Include helper text for fields that need additional context.
Don't
Use red text for helper text — reserve red for error messages only.
Do
Mark required fields with both a visual indicator and aria-required.
Don't
Code
HTML
<div class="lex-field">
<label class="lex-label" for="username-field">
Username <span class="lex-field__required" aria-hidden="true">*</span>
</label>
...CSS Custom Properties
.lex-field {
display: flex;
flex-direction: column;
gap: var(--lex-space-4);
}
.lex-field__error {
color: var(--lex-text-error);
font-size: var(--lex-font-size-xs);
}
...React
// Using Lexicon CSS classes with React
<FormField label="Username" required error="Username is already taken.">
<Input placeholder="Enter a username" />
...Design Tokens
| Token | Value (dark) | Value (light) | CSS property |
|---|---|---|---|
| --lex-field-label-size | — | — | size |
| --lex-field-label-color | — | — | color |
| --lex-field-help-size | — | — | size |
| --lex-field-help-color | — | — | color |
| --lex-field-error-color | — | — | color |
| --lex-field-gap | — | — | gap |
Accessibility
- Automatically generates matching htmlFor/id pairs for label-input association.
- Error messages are linked via aria-describedby so screen readers announce them.
- Required indicator uses aria-hidden="true" on the visual asterisk and aria-required="true" on the input.
- Helper text is also linked via aria-describedby when present, combined with error text.
- Error icon is decorative and uses aria-hidden="true" — the text conveys the message.