Input

Input is a component component that provides input functionality.

Active

size:

Examples

size

Different size options for the Input component.

sm

md

lg

Installation

npm install @your-design-system/input

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

export function InputDemo() {
  return (
    <div className="grid w-full max-w-sm items-center gap-1.5">
      <Label htmlFor="email">Email</Label>
      <Input type="email" id="email" placeholder="Email" />
    </div>
  )
}

API Reference

Prop	Type	Default	Description
`placeholder`	`string`	-	The placeholder prop for the component.
`value`	`string`	-	The value prop for the component.
`type`	`enum`	`text`	The type prop for the component. Options: text \| email \| password \| number
`disabled`	`boolean`	`false`	Whether the component is disabled.

Styling

The component uses Tailwind CSS classes for styling. You can customize the appearance by overriding these classes.

Base Classes

w-fullborderborder-inputbg-backgroundrounded-mdfocus:outline-nonefocus:ring-2focus:ring-ringfocus:ring-offset-2

size Variants

sm

px-2py-1text-sm

md

px-3py-2text-sm

lg

px-4py-3text-base

Design System Compliance

This component is validated against atomic design principles and foundation token usage.

⚠ Atomic Design Issues

Issue 1Hardcoded spacing found: px-2, py-1, px-3, py-2, px-4, py-3. Use semantic spacing tokens.

Fix these issues to ensure your component integrates properly with the design system.

On This Page