Input

Auto-generate your docs

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

string

default:"default"

Visual variant of the input.Options: default, ghost

string

default:"md"

Size of the input field.Options: xs, sm, md, lg, xl

string

HTML input type (text, email, password, search, file, etc.)

string

Placeholder text.

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

⌘I

Get Started

Base UI Components

Craft UI Components

Loaders

Hooks

Guides

Installation

Usage

Props

Variants

Sizes

Examples

Sizes

Variants

Input Types

Accessibility

​Installation

​Usage

​Props

​Variants

​Sizes

​Examples

​Sizes

​Variants

​Input Types

​Accessibility

Installation

Usage

Props

Variants

Sizes

Examples

Sizes

Variants

Input Types

Accessibility