FormField
Complete form field wrapper with label, error display, helper text, and required indicator. Automatically handles error states and accessibility attributes. Wraps any form input component.
Live Preview
Basic
Basic Form Field
Simple form field with label and input
Required Field
Field marked as required with asterisk
Helpers
Field with Helper Text
Provides additional guidance to users
Must be at least 8 characters
Errors
Field with Error
Display validation errors
This email is already registered
Types
Different Input Types
FormField works with various input components
Usage Guidance
✓ When to Use
Use to wrap all form inputs (Input, Textarea, Select, etc.) to provide consistent labeling, error display, and accessibility. Essential for building accessible, well-structured forms.
✗ When NOT to Use
Don't use for standalone inputs without labels, checkboxes/switches with inline labels, or custom form layouts that need different styling.
Props
labelerrorhelperTextrequiredhtmlForclassNamestylechildrenonClickonChange