Form Field Select
A pre-configured Select wrapper with a simplified API that composes Field, FieldLabel, FieldDescription, and FieldError. Automatically generates SelectTrigger, SelectValue, and SelectContent, so you only provide SelectItem children.
Default
A basic
FormFieldSelect with string values. Provide SelectItem components as ChildContent. Use DisplayTextSelector to show display names in the trigger instead of raw values.Selected: (none)
With Icons
Add flag emojis or icons alongside text in
SelectItem children for a richer dropdown. Use DisplayTextSelector to show the icon in the trigger too.Selected: (none)
With Avatars
Use
Avatar components inside SelectItem to show user avatars in the dropdown. The DisplayTextSelector provides the plain-text display for the trigger.Selected: (none)
With Helper Text
Use
HelperText to provide guidance below the select. The helper text is hidden when the field enters an error state.Choose your country of residence.
With Error
Use
ErrorText to manually set a validation error. Click Validate to trigger the error when no priority is selected, or select a value to clear it.Disabled
Set
Disabled to true to prevent interaction.Custom Variant
Use
InputClass to apply custom Tailwind CSS classes to the inner select trigger and Class to style the outer field container. This lets you create project-specific styles such as accent colors, tinted backgrounds, or rounded shapes.EditForm Validation
Inside an
EditForm, validation errors from DataAnnotationsValidator display automatically. Try submitting with empty fields.