Input

Input components for collecting user data in forms.

Installation

npm install @ritro-ui/react@1.2.0

Import

import { Input } from "@ritro-ui/react"

Usage

<Input type="text" placeholder="Enter your name" />
<Input type="email" placeholder="Enter your email" />
<Input type="password" placeholder="Enter your password" />
<Input type="search" placeholder="Search..." />

Props

Name

Type

Default

Description

type

string

"text"

Input type (text, email, password, etc.)

placeholder

string

Placeholder text

disabled

boolean

false

Whether the input is disabled

required

boolean

false

Whether the input is required

Examples

Input with Icons

<div className="flex items-center">
  <User className="h-5 w-5 mr-2" />
  <Input type="text" placeholder="Username" />
</div>

<div className="flex items-center">
  <Mail className="h-5 w-5 mr-2" />
  <Input type="email" placeholder="Email" />
</div>

<div className="flex items-center">
  <Lock className="h-5 w-5 mr-2" />
  <Input type="password" placeholder="Password" />
</div>

<div className="flex items-center">
  <Search className="h-5 w-5 mr-2" />
  <Input type="search" placeholder="Search..." />
</div>

Input Variants

{/* Default Input */}
<Input placeholder="Default Input" />

{/* Colored Input */}
<Input placeholder="Colored Input" className="bg-neo-yellow" />

{/* Disabled Input */}
<Input placeholder="Disabled Input" disabled />

{/* Large Input */}
<Input placeholder="Large Input" size="lg" />

Input with Button

{/* Search Input with Button */}
<div className="flex">
  <div className="flex-1 flex items-center border-2 border-r-0 border-black rounded-l-md p-2">
    <Search className="h-5 w-5 mr-2" />
    <Input type="search" placeholder="Search..." className="border-none shadow-none" />
  </div>
  <Button className="rounded-l-none">Search</Button>
</div>

{/* Email Subscribe Input with Button */}
<div className="flex">
  <Input 
    type="email" 
    placeholder="Enter your email" 
    className="rounded-r-none flex-1" 
  />
  <Button 
    className="rounded-l-none bg-neo-blue" 
  >
    Subscribe
  </Button>
</div>

{/* Full Width Search with Button */}
<div className="flex w-full">
  <Input 
    type="search" 
    placeholder="Find products..." 
    className="rounded-r-none flex-1" 
  />
  <Button 
    className="rounded-l-none bg-neo-green p-2" 
  >
    <Search className="h-5 w-5" />
  </Button>
</div>

Form Example

<form className="space-y-4">
  <div className="space-y-2">
    <label className="block font-bold">Name</label>
    <Input type="text" placeholder="Enter your name" />
  </div>
  
  <div className="space-y-2">
    <label className="block font-bold">Email</label>
    <div className="flex items-center">
      <Mail className="h-5 w-5 mr-2" />
      <Input type="email" placeholder="Enter your email" />
    </div>
  </div>
  
  <div className="space-y-2">
    <label className="block font-bold">Date of Birth</label>
    <div className="flex items-center">
      <Calendar className="h-5 w-5 mr-2" />
      <Input type="date" />
    </div>
  </div>
  
  <Button className="w-full">Submit</Button>
</form>

On This Page