Mushilu-San UI Label
A styled text label linked to a form control, with a required marker.
Selector: mui-label
import { Label } from '@mushilu-san/ui/forms';Loading example…
Overview
<label> and links it to the control with for. Clicking the label focuses the control, and screen readers read the label as the control name.
required to show the required marker. The marker is decorative (aria-hidden), so also mark the control itself with required.
When to use
Naming any form control that is not wrapped in a Form field. Labelling a custom control while keeping the same styling as other labels.
When not to use
A whole field with a hint and error message. Use a Form field, which includes the label. Use Form field instead.
Guidelines
Do
Keep labels short and visible at all times. Put the label above the control.
Don't
Do not use a placeholder in place of a label. Do not use the required marker alone. Explain what required means if it is not obvious.
Accessibility
Roles and attributes
| Element | Role | Notes |
|---|---|---|
label | — | aria-hidden="true". |
A label is not focusable. Clicking it moves focus to the linked control.
API
Label
| Name | Type | Default | Description |
|---|---|---|---|
for | string | undefined | — | Id of the control this label names. Sets the `for` attribute. |
required | boolean | false | Shows a required marker after the text. The marker is decorative; set `required` on the control too. Accepts attribute presence, e.g. <… required>. |
disabled | boolean | false | Dims the label to match a disabled control. Accepts attribute presence, e.g. <… disabled>. |
CSS parts
::part(root)
Tokens
--mui-color-text--mui-color-text-muted--mui-font-weight-medium--mui-color-danger