FormField

Preview

Compose a labeled field with an application-owned control.

Usage

<FormField label="Reporting timezone" htmlFor="timezone"
  messageId="timezone-hint" hint="Dates are grouped in this timezone.">
  <select id="timezone" name="timezone" aria-describedby="timezone-hint" defaultValue="UTC">
    <option value="UTC">UTC</option>
    <option value="America/New_York">America/New_York</option>
  </select>
</FormField>

Keep htmlFor and the child control id equal. Quartile input components already support labels, hints and errors, so they do not need an additional FormField wrapper.

FormField

PropTypeDefaultDescription

labelReactNode—Visible label, associated with the control through htmlFor.

hintReactNode—Help text under the control. Hidden while error has a message.

errorReactNode—Error message (or true for invalid styling without a message).

disabledboolean——

htmlForstring—id of the labelled control.

labelIdstring—id for the label element, for controls named with aria-labelledby.

messageIdstring—id for the hint or error, for the control's aria-describedby.

classNamestring——

styleCSSProperties——

childrenReactNode——

Report an issueBuilt Oct 21, 2026