InputNew
Primitive single-line text input component that accepts standard HTML attributes
Import
import { Input } from '@heroui/react';For validation, labels, and error messages, see TextField.
Usage
"use client";
import {Input} from "@heroui/react";
export function Basic() {
return <Input aria-label="Name" className="w-64" placeholder="Enter your name" />;
}Input Types
"use client";
import {Input, Label} from "@heroui/react";
export function Types() {
return (
<div className="flex w-80 flex-col gap-4">
<div className="flex flex-col gap-1">
<Label htmlFor="input-type-email">Email</Label>
<Input id="input-type-email" placeholder="jane@example.com" type="email" />
</div>
<div className="flex flex-col gap-1">
<Label htmlFor="input-type-number">Age</Label>
<Input id="input-type-number" min={0} placeholder="30" type="number" />
</div>
<div className="flex flex-col gap-1">
<Label htmlFor="input-type-password">Password</Label>
<Input id="input-type-password" placeholder="••••••••" type="password" />
</div>
</div>
);
}Controlled
https://heroui.com
"use client";
import {Input} from "@heroui/react";
import React from "react";
export function Controlled() {
const [value, setValue] = React.useState("heroui.com");
return (
<div className="flex w-80 flex-col gap-2">
<Input
aria-label="Domain"
placeholder="domain"
value={value}
onChange={(event) => setValue(event.target.value)}
/>
<span className="text-muted px-1 text-sm">https://{value || "your-domain"}</span>
</div>
);
}Styling
Passing Tailwind CSS classes
import {Input, Label} from '@heroui/react';
function CustomInput() {
return (
<div className="flex flex-col gap-2">
<Label htmlFor="custom-input">Project name</Label>
<Input
id="custom-input"
className="rounded-xl border border-border/70 bg-surface-2 px-4 py-2 text-sm shadow-sm focus-visible:border-primary"
placeholder="New web app"
/>
</div>
);
}Customizing the component classes
The base class .input powers every instance. Override it once with @layer components.
@layer components {
.input {
@apply rounded-lg border border-border bg-surface-2 px-4 py-2 text-sm shadow-sm transition-colors;
&:hover,
&[data-hover="true"] {
@apply bg-surface-3 border-border/80;
}
&:focus-visible,
&[data-focus-visible="true"] {
@apply border-primary ring-2 ring-primary/20;
}
&[data-invalid="true"] {
@apply border-danger bg-danger-50/10 text-danger;
}
}
}CSS Classes
.input– Native input element styling
Interactive States
- Hover:
:hoveror[data-hover="true"] - Focus Visible:
:focus-visibleor[data-focus-visible="true"] - Invalid:
[data-invalid="true"](also syncs witharia-invalid) - Disabled:
:disabledor[aria-disabled="true"] - Read Only:
[aria-readonly="true"]
API Reference
Input Props
Input accepts all standard HTML <input> attributes plus the following:
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Tailwind classes merged with the component styles. |
type | string | "text" | Input type (text, email, password, number, etc.). |
value | string | - | Controlled value. |
defaultValue | string | - | Uncontrolled initial value. |
onChange | (event: React.ChangeEvent<HTMLInputElement>) => void | - | Change handler. |
placeholder | string | - | Placeholder text. |
disabled | boolean | false | Disables the input. |
readOnly | boolean | false | Makes the input read-only. |
required | boolean | false | Marks the input as required. |
name | string | - | Name for form submission. |
autoComplete | string | - | Autocomplete hint for the browser. |
maxLength | number | - | Maximum number of characters. |
minLength | number | - | Minimum number of characters. |
pattern | string | - | Regex pattern for validation. |
min | number | string | - | Minimum value (for number/date inputs). |
max | number | string | - | Maximum value (for number/date inputs). |
step | number | string | - | Stepping interval (for number inputs). |
ref | React.Ref<HTMLInputElement> | - | Ref forwarded to the input element. |
For validation props like
isInvalid,isRequired, and error handling, use TextField with Input as a child component.