Field

Field is a composition that bundles a label, input control, optional description, and error message together. It provides consistent spacing, styling, and accessibility attributes, making it easier to build forms that look good and work well for all users.

Error messages appear below the input when validation fails. They should be specific ("Email is required" not "Error") and helpful ("Password must be at least 8 characters" not "Invalid"). The Field component automatically associates error messages with inputs for screen readers.

Yes! Field supports optional description text that appears between the label and input. Use it for hints like "We'll never share your email" or format requirements like "Use letters, numbers, and underscores only".

Absolutely. While Field commonly wraps text inputs, it works with any form control: selects, textareas, checkboxes, radio groups, or custom components like rich text editors or file uploaders. The label and error handling work the same way.

Required fields typically show an asterisk (*) next to the label. The Field component handles this automatically when you mark the input as required, ensuring consistent indication across your forms and proper communication to assistive technologies.

Yes, this Figma Field component matches the shadcn/ui implementation exactly, ensuring your form fields maintain consistent structure, spacing, and accessibility from design to production code.