Hidden form label

Hidden form label names a native text input for screen readers when a visible label does not fit.

Use Form field when the layout can show a label. For number input, pass aria-label (or use form field context). For select and combobox, use form field context — a wrapping label does not become those controls' accessible name.

#Example

A mapping-table row of text inputs is the usual home. Each control keeps an accessible name without a visible label:

#Guidelines

#When to use

• When a native labelable text input (TextInput, Textarea, SlugInput) cannot have a visible label because of UI constraints (mapping tables, filter bars, toolbars).

#When not to use

• When a visible label fits — use Form field.
• Inside a Form field — the field already names the control.
• For select, multi select, or combobox — use form field context. A wrapping label does not become those controls' accessible name.
• For number input — pass aria-label (or use form field context). Number input reads its name from those props and warns in development when they are missing.
• For controls that label themselves: checkbox, radio, and switch.

#Accessibility

• The wrapper is a native <label>, so the hidden text names a native labelable descendant without an id / htmlFor pair.
• Keep label a short noun or noun phrase that names the control, matching what a visible label would say.

#Props

Name	Default	Description
label	—	stringAccessible name for the wrapped form control. Not shown on screen.
children	—	ReactNodeThe native labelable text control to name (for example TextInput or Textarea). Wrapping associates the hidden text with that control without an id / htmlFor pair. Select and combobox do not take their name from a wrapping label. Number input reads its name from aria-label or FormField context.