Input

The Input component provides form inputs with labels, icons, validation, and various styling options.

Import

import { Input } from "amvasdev-ui";

Examples

Basic Usage

<Input id="username" label="Username" />

With Icons

import { Search, User } from "lucide-react";

<Input
  id="search"
  label="Search"
  leftIcon={<Search size={16} />}
  placeholder="Search..."
/>

<Input
  id="profile"
  label="Profile"
  rightIcon={<User size={16} />}
/>

Variants

This field is required
<Input id="primary" label="Primary" variant="primary" />
<Input id="success" label="Success" variant="success" />
<Input
  id="error"
  label="Error"
  variant="error"
  errorMessage="This field is required"
/>

Sizes

<Input id="xs" label="Extra Small" size="xs" />
<Input id="sm" label="Small" size="sm" />
<Input id="md" label="Medium" size="md" />
<Input id="lg" label="Large" size="lg" />

Required Field

<Input id="required" label="Required Field" required />

Available Variants

baseghostprimarysecondaryaccentsuccessinfowarningerror

Available Sizes

xssmmdlg