Label

Labels are essential for accessibility and usability. They tell users what information to enter, make forms easier to understand, improve click targets (clicking label focuses input), and are required for screen readers to announce form fields properly.

Yes! Every form input needs a visible label. Even "obvious" inputs like search boxes benefit from labels. If you must hide a label visually for design reasons, keep it in the DOM for screen readers using sr-only classes.

Add an asterisk (*) or "(required)" text to labels of required fields. Be consistent: if you mark required fields, do it for all of them. Alternatively, mark optional fields with "(optional)" if most fields are required.

Yes! Labels can include helper text or hints, but keep the main label concise. For longer explanations, use description text below the label or a helper icon with a tooltip rather than making labels too long.

Checkboxes and radio buttons need labels just like other inputs. The label should clearly describe what the control does. Make labels clickable—users should be able to select checkboxes by clicking the text, not just the tiny box.

Yes, this Figma Label component matches the shadcn/ui implementation, ensuring your form labels maintain proper semantic HTML, accessibility attributes, and consistent styling from design to production.