Input

A versatile input component with various styles and options for different use cases.

Preview

Usage

Input.jsx
1import { Input } from 'reactfine-ui';
2function App() {
3  return ( 
4    <Input
5      label='Email'
6      placeholder='you@example.com'
7      helperText='Yaxshi formatda kiriting'
8      error=''
9      type='email'
10      size='md'
11      startIcon={<MailIcon className='w-4 h-4' />}
12    />
13  );
14}

Props

PropTypeDefaultDescription
labelstring-The label text displayed above the input
startIconReact.ReactNode-The icon displayed at the start of the input
endIconReact.ReactNode-The icon displayed at the end of the input
typestring"text"The input type (text, email, password, etc.)
placeholderstring-Placeholder text shown when input is empty
valuestring-The input value
errorstring-Error message to display below the input
disabledbooleanfalseWhether the input is disabled
onChangefunction-Callback fired when the input value changes
classNamestring-Additional CSS classes to apply

Examples

Sizes

Icon

Label

Helper Text

Yaxshi formatda kiriting

Disabled

Validation

Invalid email address