Tailwind CSS React Input - Horizon UI

Easily create Input with different statuses and sizes using our components based on Tailwind CSS React and React.

Input fields are an essential user interface design element, providing users with the means to enter non-standardized responses.

See below our Input component examples. It comes in different styles and colors, so you can adapt it easily to your needs.

Email Address

import { Input } from "@material-tailwind/react";
 
export default function Example() {
  return (
    <div className="w-72">
      <InputField
        label="Email Address"
        placeholder="@horizon.ui"
        id="email"
        type="text"
      />
    </div>
  );
}

Input Validations

The Input component comes with error and success states for performing validations.

Email Address

import { Input } from "@material-tailwind/react";
 
export default function Validations() {
  return (
    <div className="flex flex-col w-72 items-center">
      <InputField
      state="success"
      label="Email Address"
      placeholder="Success input"
      id="email"
      type="text"
    />
    <InputField
      state="error"
      label="Email Address"
      placeholder="Error input"
      id="email"
      type="text"
    />
    </div>
  );
}

Disabled Input

An Input could be disabled as well, it will help you to prevent user interactions like click or focus over the Input component.

Email Address

import { Input } from "@material-tailwind/react";
 
export default function InputWithIcon() {
  return (
    <div className="w-72">
      <InputField 
        label="Email Address"
        placeholder="@horizon.ui"
        id="email"
        type="text"
      />
    </div>
  );
}

icon button

modal