Form
Field
Form field wrapper providing label, help text, and validation message around an input control.
Overview
The Field component wraps form controls with a label, optional description, and error message. It provides consistent layout and accessibility (e.g. linking label to control) for inputs, selects, and custom controls.
Key Business & UX Benefits
- Keeps labels, descriptions, and errors aligned and accessible.
- One wrapper for any control so forms look and behave consistently.
- Clear error display improves completion and reduces support.
- Required indicator and description support complex forms.
Pro-Tip from Larry: Use Field for every form control so labels and errors are always linked correctly.
Usage
Field
<Field label="Label And Description" description="This is a default description.">
<Input placeholder="Input placeholder" />
</Field>
Feature List
- Label and optional description for form controls
- Error message display with accessible association
- Required indicator support
- Consistent layout for inputs, selects, and custom controls
API Reference
| Prop | Default | Type |
|---|---|---|
label | string | |
description | string | |
descriptionIcon | string | |
required | false | boolean |
disabled | false | boolean |
error | string | |
forId | string |
| Slot | Type |
|---|---|
default | any |