tezosx-ui

v1.0.0

Input

A versatile input component for forms. Supports all standard HTML input types with consistent styling.

Installation

Install the input component using the shadcn CLI:

npx shadcn@latest add https://tezosx-ui.vercel.app/registry/tezosx/input.json

Input Types

Text Input

Standard text input for short text entries.

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

Email Input

Email input with built-in validation.

<Input type="email" placeholder="email@example.com" />

Password Input

Password input with hidden characters.

<Input type="password" placeholder="••••••••" />

Number Input

Numeric input with increment/decrement controls.

<Input type="number" placeholder="0" />

Search Input

Search input with appropriate semantics.

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

Disabled Input

Input in disabled state.

<Input type="text" disabled />

With Label

<div className="space-y-2">
  <Label htmlFor="email">Email</Label>
  <Input id="email" type="email" />
</div>

File Input

File Upload

Input automatically styles file upload buttons.

<Input type="file" />

Props

PropTypeDescription
typestringHTML input type (text, email, password, number, etc.)
placeholderstringPlaceholder text
disabledbooleanDisable the input
classNamestringAdditional CSS classes

Plus all standard HTML input attributes

Accessibility

  • Always associate inputs with labels using htmlFor/id
  • Use appropriate input types for better mobile keyboards
  • Provide clear placeholder text that doesn't replace labels
  • Use disabled attribute for read-only fields
  • Consider adding aria-invalid for error states