Input
A versatile input component with various styles and options for different use cases.
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}
Prop | Type | Default | Description |
---|---|---|---|
label | string | - | The label text displayed above the input |
startIcon | React.ReactNode | - | The icon displayed at the start of the input |
endIcon | React.ReactNode | - | The icon displayed at the end of the input |
type | string | "text" | The input type (text, email, password, etc.) |
placeholder | string | - | Placeholder text shown when input is empty |
value | string | - | The input value |
error | string | - | Error message to display below the input |
disabled | boolean | false | Whether the input is disabled |
onChange | function | - | Callback fired when the input value changes |
className | string | - | Additional CSS classes to apply |
Yaxshi formatda kiriting
Invalid email address