Input

Simple standalone input field. When inside a Field, inherits its invalid state (setting aria-invalid) unless hasError is passed explicitly. For inputs with icons, addons, or buttons, use InputGroup.

Usage

@desk/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.
Give every Input an associated Label (via Field/FieldLabel or htmlFor); 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