Input

Text input primitive built on Base UI input, styled for common form states such as default, disabled, invalid, and file upload.

1. Import

Import the public input component from the installed design system path.

import { Input } from "@/design-system/components/ui/input"

2. Props

The component forwards native input props and adds built-in invalid styling.

Prop	Type	Default
type	React.ComponentProps<"input">["type"]	"text" \| browser default
className	string	--
placeholder	string	--
disabled	boolean	false
label	string \| React.ReactNode	--
required	boolean	false
error	string	--
size	'xxs' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl'	'md'

3. Sizes

Available sizes for the Input component.

4. Usages

The guide separates the most common input states into focused usage tabs instead of showing a single generic example.

import { Input } from "@/design-system/components/ui/input";

export function Example() {
  return (
    <div className="grid w-full max-w-md gap-4">
      <Input placeholder="Enter your email" />
      <Input type="password" placeholder="Enter your password" />
    </div>
  );
}