FieldHelp

FieldHelp is the supporting copy under a control — the line that explains a format or a constraint. Inside a Field it claims the help id, so the control announces it.

What it is

A Text styled as muted, small-size copy. Inside a Field it reads the helpId from context and sets its own id to it. The control's aria-describedby list already names that id, so the help text is announced as part of the control's description.

Install

FieldHelp is exported from usemotif. No separate install.

import { FieldHelp } from 'usemotif';

API

function FieldHelp(props: FieldHelpProps): JSX.Element

Accessibility

FieldHelp's id is the link. Inside a Field, the control's aria-describedby already points at the help id — FieldHelp simply claims it, and the description connects. Used standalone, FieldHelp is plain text with no id wiring; supply your own id and aria-describedby if the help must be announced.

Keep help text persistent. It explains the field before anything goes wrong — distinct from FieldError, which appears only on failure.

Examples

Format hint inside a Field:

<Field>
<Label>Username</Label>
<Input />
<FieldHelp>Letters, numbers, and dashes only.</FieldHelp>
</Field>