Skip to main content
The Input component is a styled text input field that supports various sizes and visual variants.

​
Installation

import { Input } from "@craftdotui/baseui/components/input";

​
Usage

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

​
Props

​
variant
string
default:"default"
Visual variant of the input.Options: default, ghost
​
size
string
default:"md"
Size of the input field.Options: xs, sm, md, lg, xl
​
type
string
HTML input type (text, email, password, search, file, etc.)
​
placeholder
string
Placeholder text.
​
disabled
boolean
Disables the input.

​
Variants

  • default: Standard input with border and focus ring
  • ghost: Borderless input with transparent background

​
Sizes

  • xs: h-7, text-xs
  • sm: h-8, text-xs
  • md: h-8.5, text-sm (default)
  • lg: h-9, text-sm
  • xl: h-9.5, text-base

​
Examples

​
Sizes

<Input size="xs" placeholder="Extra small" />
<Input size="sm" placeholder="Small" />
<Input size="md" placeholder="Medium" />
<Input size="lg" placeholder="Large" />
<Input size="xl" placeholder="Extra large" />

​
Variants

<Input variant="default" placeholder="Default" />
<Input variant="ghost" placeholder="Ghost" />

​
Input Types

<Input type="email" placeholder="Email" />
<Input type="password" placeholder="Password" />
<Input type="search" placeholder="Search..." />
<Input type="file" />

​
Accessibility

  • Built on @base-ui/react Input primitive
  • Proper focus management with visible focus rings
  • Disabled state prevents interaction
  • Search input removes webkit decorations
  • File input includes proper styling for file button

Build docs developers (and LLMs) love

Get started for freeTalk to us