Text fields let users enter and edit text. Norbielink provides outlined text fields with a consistent purple focus ring, used across all forms — user profiles, quote submissions, filters, and search.
Default state
Focused
Filled
Invalid email format
States
All input states — across both light and dark themes. Focus ring uses color.primary (Purple) and a 2px ring at 20% opacity.
Light Mode
Default
Helper text
Focused
Filled
Error
Please enter a valid email address
Disabled
Dark Mode
Default
Focused
Filled
Error
Please enter a valid email address
Disabled
Select / Dropdown
Dropdowns share the same shape and state tokens as text fields. The chevron icon indicates selectability.
Default
Select a role...▾
Focused
Select a role...▾
Selected
Producer▾
Disabled
Select a role...▾
Search
The search bar uses a full pill shape (shape.full) and appears in the top bar. It shares the same focus ring as other inputs.
Default
Search clients, quotes or policies...
Focused
Search clients, quotes or policies...
With value
VRG Plumbing
Specs
| Property | Value |
|---|---|
| Height | 44px (11px top + bottom padding) |
| Padding horizontal | 14px (space-3.5) |
| Border default | 1.5px solid color.outline (#E5E7EB) |
| Border focused | 1px solid color.primary (#A614C3) |
| Focus ring | 0 0 0 2px rgba(92,46,212,0.2) |
| Border error | 2px solid color.error (#EF4444) |
| Error ring | 0 0 0 3px rgba(#EF4444, 10%) |
| Background light | white |
| Background dark | rgba(#FFF, 5%) |
| Shape | shape.sm (10px) for inputs · shape.full for search |
| Font size | 14px / Body Medium |
| Label font | 12px / Label Medium / 600 |
| Helper text | 12px / Label Small / color.on-surface-variant |