Canarist UI

Input

Text input with label, helper text, and error state. Fully accessible with auto-generated IDs.

Basic

import { Input } from '@canarist/ui'

<Input label="Email" placeholder="you@example.com" />

With helper text

Must be 3–20 characters.

<Input
  label="Username"
  placeholder="johndoe"
  helperText="Must be 3–20 characters."
/>

Error state

Please enter a valid email address.

<Input
  label="Email"
  placeholder="you@example.com"
  error="Please enter a valid email address."
/>

Disabled

<Input label="Read-only field" value="Cannot edit this" disabled readOnly />

Reference

PropTypeDefaultDescription
labelstring—Label rendered above the input.
errorstring—Error message displayed below the input. Applies error styles.
helperTextstring—Helper text shown below when no error is present.
idstring—Explicit ID. Auto-generated if omitted.
...InputHTMLAttributesReact.InputHTMLAttributes<HTMLInputElement>—All native input attributes are forwarded.