Mushilu-San UI Form field
Wraps one control with its label, hint text and error message.
Selector: mui-form-field
import { FormField } from '@mushilu-san/ui/forms';Loading example…
Overview
controlId, so give the control the same id.
role="alert", so it is announced as soon as it appears. Show it only after the user has interacted with the field.
When to use
Every standalone input, select or textarea that needs a label and a message. Forms where the same label, hint and error layout should repeat.
When not to use
A control that already has a visible label from its parent, such as a checkbox inside a sentence.
Guidelines
Do
Write the error so it says how to fix the problem. Use the hint for format rules, such as "8 characters or more".
Don't
Do not show an error before the user has typed anything. Do not set errorfor a warning. Use a hint.
Accessibility
Roles and attributes
| Element | Role | Notes |
|---|---|---|
label | — | for. |
error | alert |
Set requiredon the control, not only the marker, so the requirement is announced.Connect the control to the hint and error with aria-describedbywhen the form field does not do it for you.
API
FormField
| Name | Type | Default | Description |
|---|---|---|---|
label | string | undefined | — | Visible label text, linked to the control through `controlId`. |
hint | string | undefined | — | Helper text shown under the control, for format rules or guidance. |
error | string | undefined | — | Error message shown under the control. Announced when it appears. |
required | boolean | false | Shows the required marker on the label. Accepts attribute presence, e.g. <… required>. |
disabled | boolean | false | Dims the label and hint to match a disabled control. Accepts attribute presence, e.g. <… disabled>. |
controlId | string | '' | Pass the id of the control inside so the label `for` wires correctly. |
CSS parts
::part(root)
Tokens
--mui-space-1--mui-space-2--mui-color-text-muted--mui-color-danger