Input

A multi-purpose Input component with password toggles, autocomplete suggestions, and four layout variants.

Pass suggestions and the field lists them the way a select menu would — typing narrows the list, and choosing one writes the text straight into the field. The drag-and-drop file mode lives on its own page: see File upload.

Explore the different variations of the Input component — each example shows a live preview with the exact code to copy.

Input

A labelled text field with helper text and a leading icon.

label: sits above the field and helperText below it.
variant"default": is the bordered box; see the next three for the alternatives.

Active Color

Installation

New project? Follow the installation guide to set up Tailwind CSS, shadcn, the cn helper and lucide-react, register the @algorize-ui registry once, then copy your styles from the Themes page.

Install Input

npx shadcn@latest add @algorize-ui/input

components/custom/blocks/InputBlock.tsx is written into your project. Copy any snippet from a Usage tab above and it runs.

Install dependencies

Nothing beyond the shared setup — Input needs only the cn helper and lucide-react, which the installation guide already put in place.

Examples

Filled

Usevariant"filled": for a solid, low-contrast field with no visible border at rest.

Underlined

Usevariant"underlined": to reduce the chrome to a single baseline rule.

Password

Settype"password": and the show/hide toggle is added for you — there is no separate prop for it.

Autocomplete

Suggestions appear like a select menu, but the field stays free text — pick one or keep typing.

Passsuggestions: as a string[]. Focus shows the list, typing filters it (the matched letters are highlighted), and ↑ ↓ Enter pick from the keyboard.
onSuggestionSelect: fires after a pick. Your normal onChange fires too, so controlled and uncontrolled inputs both just work.
maxSuggestions{8}: caps how many rows show at once; the rest scroll.

Features

Learn about the Input component's versatile states, including disabled, error, and focused styles, along with icon support.

Customizable

Easily adapt the component's styling and behavior to fit your application's unique design system.

Accessible

Built with accessibility in mind, ensuring all users can interact with your application effectively.

Responsive

Fully responsive design that looks and works great across desktop, tablet, and mobile devices.

Performant

Optimized for maximum performance with minimal re-renders and efficient state management.

Best Practices & Guidelines

Usage Guidelines

Follow standard design principles when implementing this component. Ensure proper contrast, spacing, and context within your layout.

Props Reference

This component extends React.InputHTMLAttributes<HTMLInputElement>, meaning you can pass any standard input prop (like onChange, value, name, disabled, etc.).

Prop	Type	Default	Description
`type`	`"text" \| "password" \| "email" \| "number" \| "file"`	`"text"`	Determines the behavior. `"password"` adds a visibility toggle. `"file"` turns the field into a drag-and-drop zone — documented on the File upload page.
`suggestions`	`string[]`	`undefined`	Autocomplete list. Focus shows it, typing filters it (case-insensitive, matched letters highlighted), and a click or Enter writes the suggestion into the field. Ignored for `"password"` and `"file"`.
`onSuggestionSelect`	`(value: string) => void`	`undefined`	Fired after a suggestion is written into the field. The regular `onChange` fires as well.
`maxSuggestions`	`number`	`8`	Maximum rows shown at once; further matches scroll.
`inputSize`	`"sm" \| "md" \| "lg"`	`"md"`	Uniformly scales the height, padding, text size, and icon size of the input or dropzone.
`variant`	`"default" \| "filled" \| "underlined" \| "glow"`	`"default"`	Determines the visual styling of the borders, background, and focus rings.
`color`	`"indigo" \| "rose" \| "emerald" \| "zinc" \| string`	`"indigo"`	Applies the global color theme to the focus ring, glow shadow, and drag-active states. Accepts hex codes.
`label`	`string`	`undefined`	Renders a bold, accessible label directly above the input.
`helperText`	`string`	`undefined`	Subtle instructional text rendered below the input.
`error`	`string`	`undefined`	If provided, turns the input red, adds an alert icon, and replaces the helper text with the error message.
`disabled`	`boolean`	`false`	Disables interactions and applies a faded, read-only style.
`leftIcon / rightIcon`	`ReactNode`	`undefined`	Standard Mode Only: Injects an icon or element into the left or right side of the input field.