Foundations
Colors
Iconography
Grid + Spacing
Responsive
Shadows
Typography
Layout
Modals
Modals / Confirmation
Panels
Tabs
Actions & Inputs
Buttons
Checkboxs
Dropdowns
Forms
Links
Radio Buttons
Selects
Text Fields
Status & Feedback
Badges
Progress Indicators
Tooltips
◢
Anatomy
1. Field label
Label for the text field.
2. Field description
Use to include help, instructions or explaining how the field's information will be used.
3. Error message
Use to show an error message, as required.
4. Placeholder text
Use to set expectactions about the type of interaction / information required and indicating if a field is optional.
5. Text field
Use for short strings of text.
6. Text area
Use when text may span multiple lines.
7. Value field
Use for numeric fields, optionally can include a left or right unit/icon.
8. Search field
Use to indicate the field will trigger a search behaviour.