DesignInput

Text input component with Inter font, elevation shadows, and optional clear button

Size Variants (Side-by-side Comparison)

Small
28px
size="small"
Default
32px
(no size prop)
Large
40px
size="large"

Basic Input

Minimal usage without clear button

Props:
{ placeholder: "Enter text..." }

With Clear Button

Shows clear button when input has value

Props:
{ clearable: true, onClear: "() => {}" }

With Label

Input with label text above

Props:
{ label: "Username", placeholder: "Enter username..." }

Disabled State

Non-interactive with 44% opacity

Props:
{ disabled: true, value: "Disabled input" }

Error State

Shows red border and error message

Props:
{ error: true, errorMessage: "This field is required" }
This field is required

Custom Width

Can be controlled with CSS or className

Props:
{ className: "w-48" }

Content Customization

Use startContent, endContent, children, and dashed props for flexible layouts

Start Content

Content displayed before the input

Props:
{ startContent: "<DesignIcon />" }

End Content

Content displayed after the input

Props:
{ endContent: "<DesignIcon />" }

Both Start & End Content

Content on both sides of the input

Props:
{ startContent: "...", endContent: "..." }
$
USD

Dashed Border Style

Use dashed prop for placeholder/empty states

Props:
{ dashed: true }

Custom Children

Replace input with custom content

Props:
{ children: "<custom content>" }
Click to select a file...

Empty State Pattern

Dashed border with custom children for empty states

Props:
{ dashed: true, children: "..." }
No items yet