🚀ReacUI is currently in Beta. We're actively improving it! ❣️

Input

A versatile input component for collecting user information

Installation

The Input component is part of the ReacUI library. Install the package to use it in your project.

npm install reacui

Import

Import the Input component into your React component.

import { Input } from 'reacui';

Basic Usage

The Input component provides a styled input field with consistent styling.

<Input placeholder="Basic input example" />

Input Types

Change the type of input using the type prop.

<Input type="text" placeholder="Text input" />
<Input type="email" placeholder="Email input" />
<Input type="password" placeholder="Password input" />
<Input type="number" placeholder="Number input" />

Input States

Inputs can be in different states such as disabled or with a default value.

<Input placeholder="Default state" />
<Input defaultValue="With default value" />
<Input placeholder="Disabled input" disabled />

With Labels

Combine inputs with labels for better accessibility and user experience.

Username

We'll never share your email with anyone else.

<div>
  <label htmlFor="username" className="block text-sm font-medium text-gray-700 mb-1">
    Username
  </label>
  <Input id="username" placeholder="Enter your username" />
</div>

<div>
  <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">
    Email
  </label>
  <Input id="email" type="email" placeholder="Enter your email" />
  <p className="mt-1 text-sm text-gray-500">
    We'll never share your email with anyone else.
  </p>
</div>

API Reference

The following props are available for the Input component.

Prop	Type	Default	Description
type	string	'text'	Type of the input (text, email, password, etc.)
placeholder	string	undefined	Placeholder text for the input
disabled	boolean	false	Whether the input is disabled
value	string	undefined	Controlled value of the input
defaultValue	string	undefined	Default value for uncontrolled input
onChange	function	undefined	Function called when input value changes
className	string	''	Additional CSS classes to apply to the input