Input

FREE

Text input with start/end icons, clear button, password reveal, character count and sizes.

Playground

Change the props and watch the component and its code update live.

Props

Placeholder

Type

Size

Start icon

Clearable

Character count

Invalid

Disabled

Focus color

Code

import { Search } from "lucide-react";
import { Input } from "@/components/ui/input";

<Input
  placeholder="Search components…"
  clearable
  startIcon={<Search />}
/>

Installation

Terminal

npx @bloxa/cli add input
# or: npx shadcn@latest add @bloxa/input

Examples

Icons

Clearable

Password

type="password" adds a reveal toggle automatically.

Character count

0/60

Sizes

API reference

Every component also accepts the props of the element it renders.

Input

Prop	Type	Default	Description
startIcon	ReactNode	—	Icon or text at the start.
endIcon	ReactNode	—	Icon or text at the end.
clearable	boolean	false	Shows a clear button while there is a value.
showCount	boolean	false	Shows a counter together with maxLength.
size	"sm" \| "md" \| "lg"	"md"	Height and text size.
labels	{ clear?, showPassword?, hidePassword? }	—	Accessible names for the buttons (for translation).