A field label: the text, an optional required mark, and an optional info icon that carries a tooltip.
Options
| Choice | Values | Default | What it does |
|---|---|---|---|
tonesmbk-label--tone-<value> | strongsubtle | strong | Default text or subtle text. Figma calls this "Variant". |
typesmbk-label--type-<value> | defaultsmall | default | The body style, or the small label style, as used over groups in the command palette. |
Examples
Usage
A field label.
Tones
Strong in the default text, subtle in the secondary.
Small
The small label style, for headings over groups.
Required
A mark after the text.
With info
An info icon carrying the help text: pointing at it shows the text in a tooltip, as does the keyboard focus on the field it names.
Guidelines
Purpose
The text above or beside a form control that says what it is for, with the two marks a field label commonly needs: a required mark and an information icon that opens help. It exists so that every field in the system labels itself the same way. Its small type, the small label style, also names groups, such as the groups of the command palette.
When to use
- Above every input, select, search field, checkbox group and switch that has a visible name, in the default type.
- Over a group of items, in the small type, as the command palette does.
When not to use
- As a heading. Use a heading preset.
- For a caption under a control. That is help text, which belongs to the field.
Usage rules
Do
- Associate every label with exactly one control.
- Use the subtle tone for secondary fields in dense forms, the strong tone otherwise.
- Keep small labels to a word or two, so each reads as the name of what is under it.
Don't
- Use the required mark without marking the control required.
- Put a link inside a label.
Getting started
Keep a small label to a word or two, so it reads as the name of what is under it.
Everything you need to know before you start your first project
A long small label reads as a sentence in tiny type, and no longer names the group under it.
Anatomy
- The block, a real label element, or a span where there is no control to name.
- The text part.
- The required part, an asterisk in the danger text color, hidden from assistive technology because the control itself carries the required state.
- The icon part, an information glyph at the icon size that goes with its text, in the subtlest text color, with help text as its accessible name. Its help shows in a tooltip over it.
Behavior
The icon's help shows in a tooltip over it while the pointer rests on the icon, after a shorter wait than other tooltips since pointing at the icon is asking for it, and while the control the label names has the keyboard focus, so a reader who never points sees it too; it stays while pointed at and goes on Escape. Without the for attribute, only pointing shows it.
Accessibility
What it does for you
- Associated with its control, it names the control. It takes no focus itself.
- The asterisk is decorative, hidden from assistive technology.
- The information icon carries its help text as a name, so the help is reachable without a pointer. The tooltip showing the same words is hidden from assistive technology, so they are not read twice.
- The help shows in a tooltip while the control the label names has the keyboard focus, so a reader who never points sees it too. Escape dismisses it.
What you must do
- Associate the label with its control, either by wrapping it or through the
forattribute; the wrapper passes that attribute through. Withoutfor, only pointing shows the help. - Where there is no control, render the label as a span and point the group it names at it with
aria-labelledby. - Mark the control
required: the control'srequiredattribute is what assistive technology reads, not the asterisk.
How to test
- With a screen reader, focus the control: it is read with the label's text, and with the help text when there is an information icon, which is read once.
- With the keyboard, Tab to the control the label names: the help shows in a tooltip, and Escape dismisses it.
- With a required field, check that the control itself is marked required, not only the label.
- With text at 200% and the page 320 pixels wide, the label's text stays whole beside its marks.
- In a forced-color mode, the label's text stays visible.
Keyboard
| Key | What it does |
|---|---|
| Tab | Moves focus to the control the label names, which shows the help when the label has an information icon. |
| Escape | Hides the help while the control keeps focus. |
Source
The files the label is made of. Its folder on GitHub (opens in a new tab) holds them with its wrapper and its document.
Stylesheet
/* smbk-label — Label. Figma "Label" 4255:6252 (Variant: Strong, Subtle × Type: Default, Small).
* The small type sets the text in the small label style, Geist medium in
* sentence case; the required mark stays in the body style at either type, as
* Figma draws it. */
.smbk-label {
display: inline-flex;
align-items: center;
gap: var(--smbk-space-inline-xs);
color: var(--smbk-color-text-default);
font-family: var(--smbk-typography-body-sm-font-family);
font-size: var(--smbk-typography-body-sm-font-size);
font-weight: var(--smbk-typography-body-sm-font-weight);
line-height: var(--smbk-typography-body-sm-line-height);
letter-spacing: var(--smbk-typography-body-sm-letter-spacing);
}
.smbk-label--tone-subtle {
color: var(--smbk-color-text-subtle);
}
.smbk-label--type-small .smbk-label__text {
font-family: var(--smbk-typography-label-sm-font-family);
font-size: var(--smbk-typography-label-sm-font-size);
font-weight: var(--smbk-typography-label-sm-font-weight);
line-height: var(--smbk-typography-label-sm-line-height);
letter-spacing: var(--smbk-typography-label-sm-letter-spacing);
text-transform: var(--smbk-typography-label-sm-text-transform);
}
.smbk-label__required {
color: var(--smbk-color-feedback-danger-text-on-subtle);
}
/* The info icon follows the 14 px text: 16, in the subtlest text color, as Figma binds it. */
.smbk-label__icon {
color: var(--smbk-color-text-subtlest);
font-size: var(--smbk-size-icon-sm);
}Tokens it reads
| Token and CSS | Value | Preview | Foundation |
|---|---|---|---|
| space.inline.xs--smbk-space-inline-xs | 4px | Spacing | |
| color.text.default--smbk-color-text-default | light: #232527dark: #e7ebf0changes with theme | Color | |
| typography.body-sm--smbk-typography-body-sm-font-family--smbk-typography-body-sm-font-size--smbk-typography-body-sm-font-weight--smbk-typography-body-sm-line-height--smbk-typography-body-sm-letter-spacing--smbk-typography-body-sm-text-transform | fontFamily: Geist, Geist Fallback, system-ui, sans-seriffontSize: 14pxfontWeight: 400lineHeight: 1.5letterSpacing: 0px | The quick brown fox | Typography |
| color.text.subtle--smbk-color-text-subtle | light: #4e555edark: #9ba5b1changes with theme | Color | |
| typography.label-sm--smbk-typography-label-sm-font-family--smbk-typography-label-sm-font-size--smbk-typography-label-sm-font-weight--smbk-typography-label-sm-line-height--smbk-typography-label-sm-letter-spacing--smbk-typography-label-sm-text-transform | fontFamily: Geist, Geist Fallback, system-ui, sans-seriffontSize: 12pxfontWeight: 500lineHeight: 1.4letterSpacing: 0px | The quick brown fox | Typography |
| color.feedback.danger.text-on-subtle--smbk-color-feedback-danger-text-on-subtle | light: #a51d17dark: #febdb2changes with theme | Color | |
| color.text.subtlest--smbk-color-text-subtlest | light: #606a75dark: #7c8692changes with theme | Color | |
| size.icon.sm--smbk-size-icon-sm | 16px | Size |
Manifest
{
"name": "label",
"block": "smbk-label",
"summary": "A field label: the text, an optional required mark, and an optional info icon that carries a tooltip.",
"adapt": "css",
"axes": {
"tone": {
"values": [
"strong",
"subtle"
],
"default": "strong",
"description": "Default text or subtle text. Figma calls this \"Variant\"."
},
"type": {
"values": [
"default",
"small"
],
"default": "default",
"description": "The body style, or the small label style, as used over groups in the command palette."
}
},
"flags": {},
"parts": [
"text",
"required",
"icon"
],
"figmaNodeId": "4255:6252"
}