# Input

> A single-line text field with sizes, affixes and validation states.

Category: Forms · Status: stable · Package: @bindshq/stance-react@0.1.1 · Docs: https://stanceui.com/components/input

Use Input for short free-text values: names, emails, URLs, reference numbers. Wrap it in FormField to get a label, help text and error message wired up automatically. For multi-line text use Textarea; for numbers with steppers use NumberInput.

## Import

```tsx
import { Input, FormField } from '@bindshq/stance-react';
```

Styles are imported once per app: `@bindshq/stance-tokens/css` and `@bindshq/stance-react/styles.css`.

## Examples

### Basic

```tsx
import { FormField, Input } from '@bindshq/stance-react';

export function Basic() {
  return (
    <div style={{ width: '100%', maxWidth: 360 }}>
      <FormField label="Work email" description="We send signing requests to this address.">
        <Input type="email" autoComplete="email" placeholder="name@company.com" />
      </FormField>
    </div>
  );
}
```

### Sizes

Heights match Button sizes so controls line up in toolbars.

```tsx
import { Input } from '@bindshq/stance-react';

export function Sizes() {
  return (
    <div style={{ display: 'grid', gap: 12, width: '100%', maxWidth: 360 }}>
      <Input size="sm" aria-label="Small" placeholder="Small" />
      <Input size="md" aria-label="Medium" placeholder="Medium" />
      <Input size="lg" aria-label="Large" placeholder="Large" />
    </div>
  );
}
```

### Prefix and suffix

Static text or icons inside the field box.

```tsx
import { FormField, Icon, Input } from '@bindshq/stance-react';

export function Affixes() {
  return (
    <div style={{ display: 'grid', gap: 12, width: '100%', maxWidth: 360 }}>
      <FormField label="Company website">
        <Input prefix="https://" placeholder="binds.si" />
      </FormField>
      <FormField label="Signature link">
        <Input prefix={<Icon name="link" />} suffix=".esignify.com" defaultValue="acme" />
      </FormField>
    </div>
  );
}
```

### States

```tsx
import { FormField, Input } from '@bindshq/stance-react';

export function States() {
  return (
    <div style={{ display: 'grid', gap: 16, width: '100%', maxWidth: 360 }}>
      <FormField label="Contract reference" error="Reference must start with CT-">
        <Input defaultValue="2026-114" />
      </FormField>
      <FormField label="Account ID" disabled>
        <Input defaultValue="acc_81f2" />
      </FormField>
      <FormField label="Created by" readOnly>
        <Input defaultValue="Priya Raman" />
      </FormField>
    </div>
  );
}
```

## API reference

| Component | Prop | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Input | `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Control height: 32, 40 or 48px. |
| Input | `invalid` | `boolean` | None | Marks the field invalid. Set automatically inside a FormField with an error. |
| Input | `prefix` | `ReactNode` | None | Content before the text, inside the field box. |
| Input | `suffix` | `ReactNode` | None | Content after the text, inside the field box. |
| Input | `wrapperClassName` | `string` | None | Class for the outer box; className goes to the <input>. |
| Input | `type` | `string` | `'text'` | Native input type. |
| Input | `...props` | `InputHTMLAttributes` | None | All native input attributes; the ref targets the <input>. |

## Accessibility

- Always give the input a visible label via FormField, or aria-label when a visible label is genuinely redundant.
- Inside FormField the input receives id, aria-describedby (description and error), aria-invalid, required and disabled automatically.
- Placeholders are hints, not labels: they disappear on input and have lower contrast.
- Focus is shown by a solid ring on the whole field box, including in high contrast mode.
- Use the correct type and autoComplete (email, tel, url) to get the right mobile keyboard and autofill.

## Keyboard

| Keys | Action |
| --- | --- |
| `Tab` | Moves focus to and from the input. |

## Guidelines

**Do**

- Size the field to the expected length of the value.
- Explain format requirements in the description, before the user makes a mistake.

**Don’t**

- Use placeholder text as the only label.
- Disable paste on email or password fields.

## Related

- https://stanceui.com/components/form-field
- https://stanceui.com/components/textarea
- https://stanceui.com/components/search-input
- https://stanceui.com/components/password-input
- https://stanceui.com/components/number-input