Components

Input

Single-line text input. Three sizes, four tones for inline validation feedback.

Sizes

tsx

<Input size="sm" placeholder="Small" />
<Input size="md" placeholder="Medium (default)" />
<Input size="lg" placeholder="Large" />

Tones

Use only for inline validation. Plain neutral by default.

tsx

<Input tone="neutral" placeholder="Neutral" />
<Input tone="success" defaultValue="[email protected]" />
<Input tone="warning" defaultValue="must be 8+ characters" />
<Input tone="danger"  defaultValue="invalid" />

Disabled

tsx

<Input disabled defaultValue="Read-only" />