Example of two fields
Anatomy
Fields are made up of two Delish components put together: Label and Input/Dropdown/Textarea.
- Label❖: clear and concise text giving the user insight into the content
- Helper text: optional text to help guide user on what’s expected
- Input, Dropdown or Textarea❖: holds options, selected value(s) of user or text input
- Error text: required text when there is an error on the field
Visual reference for anatomy
Variants
There are 5 variants of the component: input, dropdown, textarea, error and helper text.
- Text input❖: users can enter text or data to provide information; primarily shorter in nature
- Dropdown❖: users can select a single or multiple options from a list of options
- Textarea❖: users can enter text or data to provide information; primarily longer in nature
- Error: if user misses a required field or enters the wrong information
- Helper text: optional text to help guide user on what’s expected
Visual of field variants