Input

Installation

pnpm dlx saastro add input

cd apps/ui
REGISTRY_URL=http://localhost:3456/r node ../../packages/saastro/dist/index.js add input --yes

pnpm add tailwind-variants

Usage

---
import { Input } from "@/components/ui-saastro/input"
---

<Input type="email" placeholder="Email" />

Examples

Default

<Input placeholder="Email" />

With Label

---
import { Input } from "@/components/ui-saastro/input"
import { Label } from "@/components/ui-saastro/label"
---

<div class="grid w-full max-w-sm items-center gap-1.5">
  <Label for="email">Email</Label>
  <Input type="email" id="email" placeholder="Email" />
</div>

File Input

<Input type="file" />

Disabled

<Input disabled placeholder="Disabled" />

Props

Accessibility

• Uses native <input> element for built-in accessibility
• Associate with <Label> using matching id and for attributes
• Supports all standard input types
• Use aria-invalid for validation states