Usage

import { Input } from '@heroui/react';

For validation, labels, and error messages, see TextField.

Examples

Variants

The Input component supports two visual variants:

primary (default) - Standard styling with shadow, suitable for most use cases
secondary - Lower emphasis variant without shadow, suitable for use in Surface components

In Surface

When used inside a Surface component, use variant="secondary" to apply the lower emphasis variant suitable for surface backgrounds.

Full Width

Input Types

Age

Password

Controlled

https://heroui.com

"use client";

import {Input} from "@heroui/react";
import React from "react";

Customization

Tailwind CSS

import {Input} from "@heroui/react";

export function CustomStyles() {
  return (
    <Input

Global CSS

The base class .input powers every instance. Override it once with @layer components.

@layer components {
  .input {
    @apply rounded-lg border border-border bg-surface px-4 py-2 text-sm shadow-sm transition-colors;

    &:hover,
    &[data-hovered="true"] {
      @apply bg-surface-secondary border-border/80;
    }

    &:focus-visible,
    &[data-focus-visible="true"] {
      @apply border-accent ring-2 ring-accent/20;
    }

    &[data-invalid="true"] {
      @apply border-danger bg-danger-soft text-danger;
    }
  }
}

Styling Reference

HeroUI follows the BEM methodology to ensure component variants and states are reusable and easy to customize.

CSS Classes

Base Classes

.input – Native input element styling

Interactive States

Hover: :hover or [data-hovered="true"]
Focus Visible: :focus-visible or [data-focus-visible="true"]
Invalid: [data-invalid="true"] (also syncs with aria-invalid)
Disabled: :disabled or [aria-disabled="true"]
Read Only: [aria-readonly="true"]

API Reference

Input

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).
`fullWidth`	`boolean`	`false`	Whether the input should take full width of its container
`variant`	`"primary" \| "secondary"`	`"primary"`	Visual variant of the component. `primary` is the default style with shadow. `secondary` is a lower emphasis variant without shadow, suitable for use in surfaces.

For validation props like isInvalid, isRequired, and error handling, use TextField with Input as a child component.

TextField

TextArea

Label

Input

On this page