Input

ui

Text input with 3 variants (outline, soft, ghost), 3 sizes (sm, md, lg) and 3 tones (neutral, success, danger) for validation states via border and focus ring color. Invalid state also via aria-invalid.

pnpm dlx shadcn@latest add "https://ai2.design/r/input.json"

Sign In

Input

ui

Text input with 3 variants (outline, soft, ghost), 3 sizes (sm, md, lg) and 3 tones (neutral, success, danger) for validation states via border and focus ring color. Invalid state also via aria-invalid.

pnpm dlx shadcn@latest add "https://ai2.design/r/input.json"

class-variance-authority@^0.7.1

components/ui/input.tsx

class-variance-authority@^0.7.1

components/ui/input.tsx