Input

Input component to get user input, usually for form input or search fields.

Usage

The Input component can be imported using

import { Input } from '@tail-kit/tail-kit'

Default Input

<Input className="w-80" placeholder="How are you feeling today?" />

<Input className="w-80" placeholder="How are you feeling today?" />

Input with Icon

<div className="space-y-4 w-80">
  <Input placeholder="Email" icon={<HiOutlineAtSymbol />} />

  <Input placeholder="Password" icon={<HiOutlineKey />} type="password" />

  <Button className="w-full" buttonType="primary">
    Login
  </Button>
</div>

<div className="space-y-4 w-80">
  <Input placeholder="Email" icon={<HiOutlineAtSymbol />} />

  <Input placeholder="Password" icon={<HiOutlineKey />} type="password" />

  <Button className="w-full" buttonType="primary">
    Login
  </Button>
</div>

Input with Default Value

<Input defaultValue="My name is " className="w-80" />

<Input defaultValue="My name is " className="w-80" />

Input Props

Name	Description	Default Value
icon	Provide icon to render inside Input component `Element \| undefined`	--
inputClassName	`string \| undefined`	--
inputStyle	`CSSProperties \| undefined`	--

Usage

Default Input

Input with Icon

Input with Default Value

Input Props

General

Feedback

Data Display

Data Entry

Survey

Navigation

Input

Usage

Default Input

Input with Icon

Input with Default Value

Input Props