Input

Text input field with focus rings and error states

With Label

Usage

import { Input } from '@tryvienna/ui'

<Input placeholder="Enter text..." />

Examples

Default

Default

<Input placeholder="Enter text..." />

With Label

With Label

<div className="grid gap-2 w-80">
  <Label htmlFor="email">Email</Label>
  <Input id="email" type="email" placeholder="you@example.com" />
</div>

Password

Password

<Input type="password" placeholder="Enter password..." />

With Error

With Error

<div className="grid gap-2 w-80">
  <Label htmlFor="email-err">Email</Label>
  <Input id="email-err" type="email" placeholder="you@example.com" aria-invalid={true} />
  <p className="text-destructive text-sm">Please enter a valid email address.</p>
</div>

Disabled

Disabled

<Input placeholder="Disabled input" disabled="true" />

File Input

File Input

<div className="grid gap-2 w-80">
  <Label htmlFor="file">Upload file</Label>
  <Input id="file" type="file" />
</div>

Search

Search

<Input type="search" placeholder="Search..." />

All Types

All Types

<div className="grid gap-4 w-80">
  <Input type="text" placeholder="Text input" />
  <Input type="email" placeholder="Email input" />
  <Input type="password" placeholder="Password input" />
  <Input type="number" placeholder="Number input" />
  <Input type="search" placeholder="Search input" />
  <Input type="url" placeholder="URL input" />
  <Input type="tel" placeholder="Phone input" />
</div>

API Reference

Input

Prop	Type	Default	Description
type	React.HTMLInputTypeAttribute | undefined	-

Also accepts all props from input.

Data Attributes

Component	data-slot
Input	"input"