Text fields
Outline for free text, secondary for values.
Outline - the default
Outline, filled in
With a leading icon
Secondary
Read only
Numeric, centred, with a unit
Error - the outline reddens, never the fill
Outline, hovered
Read only, monospace - ids and skus
Use it for
- Outline for free text: names, search, a composer, a form.
- Secondary for numeric property values and read-only values.
- Inside a property row the field is forced to secondary. You dont pick.
- A read-only value is a read-only, disabled field. Never bare text.
Dont
- Hand-roll a red line under a field. Use the row's error slot.
- Put a secondary field in a settings list, or an outline one in a properties section.
- Colour or size the icon. The field does it.