Field

The default Field uses a vertical layout with the FieldLabel above the input and FieldContent wrapping the form control. This is the most common form layout, placing the label directly above its associated input for clear visual association.

Use FieldDescription to display helper text below the input. The description renders in muted foreground with text-balance for optimal line wrapping. It provides contextual guidance about the expected input without cluttering the label.

Set IsInvalid to true on the Field to activate error styling, and use FieldError to display a validation message in destructive red. The field sets data-invalid on the container, which can cascade visual changes to child elements like the input border colour.

Use the Errors parameter on FieldError to display multiple validation messages as a bulleted list. This is useful for complex validation rules where a single field can fail multiple checks simultaneously, such as password strength requirements.

Set Orientation to FieldOrientation.Horizontal to place the label beside the input in a side-by-side layout. Use a fixed width on the FieldLabel (e.g. w-32) for consistent alignment across multiple horizontal fields in a form.

Set Orientation to FieldOrientation.Responsive to switch between vertical layout on small screens and horizontal layout on larger screens. This is ideal for forms that need to work well across mobile and desktop viewports without separate layouts.

Use the Class parameter on Field to apply custom Tailwind CSS classes. This example adds a border, padding, and rounded corners to create a card-like field appearance. Custom classes can also be applied to FieldLabel and FieldContent for fine-grained control.

A real-world composition showing multiple Field components in a registration form layout. Each field uses FieldLabel, optional FieldDescription, and various input types. This demonstrates how the field system creates a consistent, accessible form structure with minimal effort.