Logo

Input

The Input component provides an interface for users to input information and enables the application to process the submitted data.

Import

import { Input } from "css-materials";

Usage

<Input placeholder='Basic Usage' />

Change Size

<Input placeholder='Small' size='small' />
<Input placeholder='Medium' size='medium' />
<Input placeholder='Large' size='large' />

With Label

<Input type='password' placeholder='Enter password' label='Password' />

Compatibility with Button Styling

<div className="flex space-x-2.5">
    <Input placeholder='Type your email address' size='small' className='w-full' />
    <Button size='small'>Submit</Button>
</div>
<div className="flex space-x-2.5">
    <Input placeholder='Type your email address' className='w-full' />
    <Button>Submit</Button>
</div>
<div className="flex space-x-2.5">
    <Input placeholder='Type your email address' size='large' className='w-full' />
    <Button size='large'>Submit</Button>
</div>

Add Icon

<Input placeholder='Search' size='small' icon={<FiSearch />} />
<Input placeholder='Enter Text' size='medium' icon={<FiEdit />} />
<Input placeholder='Enter username' size='large' icon={<FiUser />} />

Specify pattern

You can specify a pattern using regular expressions.

<Input placeholder="Type your email address" pattern="^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,}$" errorMessage="Invalid email address" icon={<FiMail />} />