How they help
Labels in a UI help users by clearly identifying and describing elements such as buttons or fields, making the interface more intuitive and easier to understand. They provide context and guidance, ensuring users know the purpose and function of each element, which improves usability and efficiency. Well-chosen labels enhance the overall user experience by reducing confusion and enabling users to interact with the interface more confidently and effectively.
Example of label options
Anatomy
- Required asterisk: signifies that this field is required for user to input
- Label text: clear and concise text giving the user insight into the content
- Optional: use this if a field is optional
- Info button❖: add if you have additional context for user to see
Visual reference for anatomy
Variants
Delish has 4 variants of the component: text only, required, optional and with info button.
- Required: use this variant if a field is mandatory
- Optional: use this variant if a field is not required
- With info button: if you have additional context for the user
Visual of label variants