Input

Simple standalone input field (Base UI Input). Inside a Field it is the field's control: the FieldLabel targets it, FieldDescription/FieldError describe it, and it inherits the field's invalid state (aria-invalid). hasError forces error styling and aria-invalid on a standalone input. For inputs with icons, addons, or buttons, use InputGroup.

Usage

@instruments/materia-ui/components/input

<Stack className="w-80" gap="lg">
  <Field>
    <FieldLabel htmlFor="material-name">Material name</FieldLabel>
    <FieldContent>
      <Input
        defaultValue="Calacatta Gold marble"
        id="material-name"
        placeholder="e.g. Reclaimed oak"
      />
      <FieldDescription>Shown across the catalogue.</FieldDescription>
    </FieldContent>
  </Field>
  <Field>
    <FieldLabel htmlFor="material-price">List price</FieldLabel>
    <FieldContent>
      <InputGroup>
        <InputGroupAddon variant="muted">$</InputGroupAddon>
        <InputGroupInput defaultValue="148.00" id="material-price" />
        <InputGroupAddon align="inline-end" variant="muted">
          per m²
        </InputGroupAddon>
      </InputGroup>
    </FieldContent>
  </Field>
</Stack>

Best practices

For icons, addons, prefixes, or trailing buttons use InputGroup, not Input plus manually absolute-positioned decorations.
Inside a Field, let invalid state cascade - omit hasError; pass hasError only to force error styling on a standalone Input. An invalid Field keeps aria-invalid on its control even with hasError={false}.
Give every Input an associated label - inside a Field a FieldLabel targets it with no ids to wire; standalone, point a Label's htmlFor at its id. A placeholder is not an accessible name.
size defaults to "xl" (48px); pass a responsive object like { base: "sm", md: "xl" } rather than swapping components per breakpoint.

Props

Prop	Type	Default	Description
testId	`string`
radius	`"rounded" \| "square" \| "full" \| null \| undefined`
size	`ResponsiveSize`	`"xl" (48px)`	Field size - a single token or a per-breakpoint object like `{ base: "sm", md: "lg" }`.
hasError	`boolean`		Force error styling; overrides invalid state inherited from an ancestor Field.
focused	`boolean`		Force focus ring display (for documentation/testing)

Also exports

typeInputProps
typeInputSize
conststandaloneInputVariants

Composition

Builds on

Field

Used by

Sidebar, TagSelector