# Input

> Single-line text field.

Import from `@aspyn-io/kit`. Scaffold source: `npx shadcn@latest add https://design.aspyn.io/r/input.json`

## Install

```tsx
import { Input } from "@aspyn-io/kit";
import { Label } from "@aspyn-io/kit";
```

### With label

```tsx
<div className="space-y-2">
  <Label htmlFor="email">Email</Label>
  <Input id="email" type="email" placeholder="you@aspyn.io" />
</div>
```

### With helper text and error

Wire validation messages with aria-describedby and aria-invalid.

```tsx
<div className="space-y-2">
  <Label htmlFor="handle">Workspace handle</Label>
  <Input
    id="handle"
    aria-invalid="true"
    aria-describedby="handle-error"
    defaultValue="aspyn design"
  />
  <p id="handle-error" className="text-sm text-destructive">
    Handles cannot contain spaces: try aspyn-design.
  </p>
</div>
```

### Inline with a button

```tsx
<div className="flex gap-2">
  <Input placeholder="Invite by email" type="email" aria-label="Invite by email" />
  <Button>Invite</Button>
</div>
```

### File input

```tsx
<div className="space-y-2">
  <Label htmlFor="avatar">Avatar</Label>
  <Input id="avatar" type="file" />
</div>
```

### Disabled

```tsx
<div className="space-y-2">
  <Label htmlFor="workspace">Workspace</Label>
  <Input id="workspace" defaultValue="aspyn-design" disabled />
</div>
```

### Invalid

Set aria-invalid to surface the destructive ring and border.

```tsx
<div className="space-y-2">
  <Label htmlFor="port">Port</Label>
  <Input id="port" aria-invalid defaultValue="99999" />
</div>
```

### Required

```tsx
<div className="space-y-2">
  <Label htmlFor="name">
    Full name <span className="text-destructive">*</span>
  </Label>
  <Input id="name" required aria-required placeholder="Ada Lovelace" />
</div>
```