Field

Input, Textarea, Select, ComboBox, Checkbox, RadioGroup, Toggle, and Slider inherit Field labels, help, and errors automatically, and so do all of them but Slider, which has no required state, for the required state. NumberInput, CoordinateInput, and MultiSelect carry their own label and description, so they are not placed in a Field.

The label, help, and error wrap, and long identifiers break anywhere, so a Field never widens its container. Inside a Field, a text control, a Select, or a Slider fills its width.

Basic

With help text

With error

Required

A required Field marks its label and makes its control required. Every control announces it to a screen reader: an input, a checkbox, a radio group and a switch carry the requirement themselves, and a Select, whose trigger is a button that cannot, adds a visually hidden "Required" to its description. The browser also stops a native form submission while the control is empty, with its own message. Set required={false} on a control to keep that one control optional.

A form that validates itself and shows its own errors should set noValidate on the <form>: the browser then shows no message of its own and blocks nothing, and the controls are still announced as required. Do not set required={false} for this, which also removes the announcement.

Stable control targets

Use controlId when an error summary or another form action needs to focus a specific control. The label, help/error references and child context use this ID. The native id prop continues to identify the Field wrapper.

<Field id="name-field" controlId="resource-name" label="Name">
  <Input />
</Field>

IDs must be unique within the document. Generated control IDs remain the default; leave the child control's own id unset so it inherits Field's association.

Props

Accessibility

• The label targets controlId or a generated ID; aria-describedby links help or error text.
• Errors replace help, set aria-invalid="true", and use role="alert".
• The required asterisk is hidden from assistive technology; the control announces the requirement itself (required or aria-required, and a hidden "Required" in a Select's description) and the browser checks it on submit. A control's own required={false} wins, and removes the announcement.
• A control's own id, aria-label, aria-labelledby, aria-describedby, and aria-invalid (or invalid) win over what the Field supplies.

Manifest entry

<Field label="ENDPOINT" error="Required">
  <Input placeholder="api.system.io" />
</Field>

{
  "description": "Form field wrapper providing label, help text, and error display. Labels, help, errors, and entered values preserve their original casing. A required Field makes its control required. NumberInput, CoordinateInput and MultiSelect carry their own label and are not placed in a Field.",
  "props": {
    "controlId": {
      "type": "string",
      "description": "Stable child control ID used by the label and context. Native id remains the wrapper ID; generated control IDs are the default."
    },
    "label": {
      "type": "string",
      "required": true
    },
    "help": {
      "type": "string"
    },
    "error": {
      "type": "string"
    },
    "required": {
      "type": "boolean",
      "default": false,
      "description": "Marks the label and makes the control inside required: announced as required, and the browser stops a native submission while it is empty. A form that validates itself sets noValidate on the form, which keeps the announcement. A control's own required={false} wins."
    }
  },
  "slots": {
    "children": {
      "type": "Input | Textarea | Select | ComboBox | Checkbox | RadioGroup | Toggle | Slider",
      "required": true
    }
  },
  "composable_with": [
    "Card",
    "FormSection",
    "FormErrorSummary"
  ],
  "never_inside": [
    "Field",
    "Button"
  ],
  "example": "<Field label=\"ENDPOINT\" error=\"Required\">\n  <Input placeholder=\"api.system.io\" />\n</Field>"
}