Anatomy
- Label Text: The core textual content of the label. It must be concise and descriptive.
- Optional Indicator: (Optional) A visual indicator (the word "Optional") to denote if the associated form field is not required.
- Tooltip trigger: (Optional) A mechanism (usually an icon or the label itself) that triggers a tooltip on hover or focus to provide extra context.
- Badge: (Optional) A badge that provides additional context to a field or form control.
Usage Guidelines
When to use this component
Identifying Form Elements
Always use a Label component to associate descriptive text with form input fields (Text, Password, Textarea), selectors (Dropdowns), and selection controls (Checkboxes, Radio Buttons) and fieldset.
Contextual Definitions
Use the optional tooltip feature to provide definitions, detailed instructions, or data sources without cluttering the main form layout. For example, when the label is jargon or an acronym.
Badge
Use the badge when you need to indicate if a field or form element is different than a similarly or identically named field. Ie, if a user adds a secondary contact and the UI needs to indicate the primary one.
These should be used rarely, and not as a replacement for clear label text.
When not to use this component
- Interactive Elements Do not use a Label where the text itself needs to be clickable to perform an action, navigate, or open a modal. Use a Button or Link component instead.
- Large Content Blocks Labels are designed for single lines of text. Do not use them to display paragraphs of text, warnings, or extensive help documentation. Use a dedicated paragraph/text component or a dedicated Alert component.
Best Practices
Clarity and Conciseness: Keep label text short, clear, and focused. Ambiguous or overly long labels decrease usability and readability.
Don't use for long content: Labels are single-line identifiers. Do not use them for warnings, descriptions, or paragraphs. Use a Text or Alert component.
Alignment: For form labels, ensure consistent vertical alignment (top or middle) with the associated input field, depending on the overall form layout.
Don't truncate text: Ensure labels wrap to a new line if they exceed the available width to prevent information loss, unless explicitly styled for compact status.
Don't hide important info in the tooltip: The main Label must always be understandable without the tooltip. The tooltip is an optional layer of detail.
General Component Behaviors
- Non-Interactive: By default, the Label component is static and does not respond to hover, focus, or click events, except when serving as a form label to focus its associated input.
- Text Overflow: If the label text exceeds the available container width, it should wrap to a new line to prevent horizontal scrolling or truncation, unless explicitly configured to truncate (e.g., for very compact status labels).
- Tooltip Display: The associated tooltip should appear on hover or focus of the label or its designated trigger icon, and disappear when the pointer leaves or focus is lost.
Form Label Interaction
When a user clicks on a form label, the cursor automatically moves focus to the linked text input field, ready for typing.
Responsive Behavior
Fluid Width
The Label component should adapt to the width of its container.
Content Guidelines
- Capitalization: Use sentence case for all labels unless they are proper nouns or abbreviations.
- Max Length: Aim for no more than three words for form labels (e.g., "Project Title," "Start Date"). Language: Use clear, unambiguous, and jargon-free language.
- Punctuation: Do not use terminal punctuation (periods, exclamation marks) on labels
- Tooltip Content: Tooltip text should be concise but may contain more detail than the main label. It should not exceed three short sentences.
- Badge Content: Badge content must be visually minimal.
For further information, see the Content Styleguide.