Input

Single-line text field.

Installation

npm install @aspyn-io/kit @aspyn-io/tokens

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

With label

<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.

Workspace handle

Handles cannot contain spaces — try aspyn-design.

<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

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