Label

Design the label component used in forms and settings screens. This is the text that names a field, toggle, or control, so it needs to read clearly on its own and stay visually attached to the element it describes.

Show the label in a few real placements: above a text input, left of a checkbox or switch, and beside a field with helper text or validation copy. Include required and optional indicators, plus a long-label case that wraps without collapsing the layout.

Define the visual treatment for default, focus-linked, error, disabled, and success states. The label should change only as much as needed to communicate status; the control still does the heavy lifting. Keep hierarchy simple, spacing consistent, and the label easy to scan in dense UI.

Infuse personality into your labels with typography that aligns with your design's overall theme, but never at the cost of readability. Play with font weights, styles, and colors to create a hierarchy and focus.