Input

A text input with sizes, labels, error states, and help text.

Import

import { Input } from '@aspect/react';

With label and help text

<Input label="Email" helpText="We won't share this." />

Error state

<Input label="Price" error="Must be greater than 0" />

Sizes

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

Props

| Prop | Type | Default | Description | | ---------- | ---------------------- | ------- | -------------------------- | | size | 'sm' \| 'md' \| 'lg' | 'md' | Input height | | label | string | — | Auto-wraps in a form group | | error | string \| boolean | — | Error message or state | | helpText | ReactNode | — | Help text below | | disabled | boolean | false | Disables the input |

All native <input> attributes are also accepted.

Guidelines

Do:

• Always provide a visible label or aria-label
• Show validation errors inline

Don't:

• Don't use placeholder text as a label substitute