Label
Form labels with clean typography following the Tinted Trays design system. Clear hierarchy with Dark Slate text for optimal readability.
Basic Label
Simple text labels for form inputs with proper font weight and color.
Label Sizes
Different sizes for various contexts and hierarchies.
Label with Input
Labels paired with input fields in a tray container.
Label with Icon
Labels can include icons for additional context or visual indication.
Required Fields
Visual indicator for required form fields using showRequired prop.
Label with Checkbox
Labels work seamlessly with checkbox components.
Label with Switch
Settings pattern with labels and switches in a tray container.
Tray-first defaults
Keep trays aligned
Border + micro shadow
Never go dark
Disabled State
Labels automatically adjust opacity when associated inputs are disabled.
Complete Form Layout
A complete form demonstrating labels in the Tinted Trays design pattern.