DWG · 01.02 · COMPONENT SPEC

Input

A text field with a small annotation above the field showing the input type and any length constraint. Errors and hints render in the annotation line below.

Basic

01.02·A
PREVIEWPX · 1:1
<Input label="Project name" placeholder="e.g. North Wing" />

With constraints

01.02·B
PREVIEWPX · 1:1

Used in the drawing title block.

<Input
  label="Reference"
  maxLength={12}
  hint="Used in the drawing title block."
/>

Disable annotation

01.02·C
PREVIEWPX · 1:1
<Input label="Project name" placeholder="e.g. North Wing" annotation={false} />

Error state

01.02·D

When error is set it takes over the annotation line — replacing any hint — and turns the field and message danger-red. Type below to clear it.

PREVIEWPX · 1:1
Sheet number is required
const [value, setValue] = useState("");

<Input
  label="Sheet number"
  value={value}
  onChange={(e) => setValue(e.target.value)}
  hint="Shown in the title block"
  error={value.trim() ? undefined : "Sheet number is required"}
/>