ACTIONS & SURFACES

Input

Single-line text field. Native <input> with the Memphis 2-px border and focus shadow. Pairs with Label for accessibility.

Import

import { Input, Label } from 'damo-ui'

Basic usage

1<Label htmlFor="email">Email</Label>
2<Input id="email" type="email" placeholder="hello@example.com" />

Invalid state

1<Label htmlFor="invalid-email">Email</Label>
2<Input id="invalid-email" type="email" defaultValue="not-an-email" invalid />

Disabled

<Input defaultValue="readonly@example.com" disabled />

API

Input props
PropTypeDefaultDescription
invalidbooleanfalseMarks the input as invalid (sets aria-invalid + applies the destructive shadow).
disabledbooleanfalseDisables the input and applies the muted background.
...restInputHTMLAttributes<HTMLInputElement>—All native input attributes are forwarded.

Accessibility

  • Always associate a Label via matching htmlFor / id — placeholders are not labels.
  • Use invalid together with aria-describedby pointing at an error message for screen readers.
← BannerTextarea →