Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Input - Required Field
A React input field marked as required with red asterisk in label and legend explaining indicator built with shadcn/ui Input and Label
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Forms with unclear required fields frustrate users who submit incomplete data repeatedly. This React input adds red asterisk to label with Required field legend below—visual and explanatory indicators. Built with shadcn/ui Input with required attribute and Label with text-destructive asterisk, it's perfect for registration forms, checkout flows, or any form where distinguishing required from optional fields prevents submission errors and user frustration.
* Required field
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Optional Field
Input marked as optional
Input with Label
Basic input without indicator
Required Field Validation
Form with required validation
Text Field with Validation
Form field with validation
Label Component
Standalone label styling
Input with Description
Input with helper text
Questions you might have
React Input with Helper Text
A React input field with helper text below providing reassurance about data privacy after input built with shadcn/ui Input and Label
React Input - Optional Field
A React input field marked as optional with muted parenthetical indicator in label built with shadcn/ui Input and Label components