Input
Displays a form input field or a component that looks like an input field.
# Demo
# Attributes
Name | Type | Default | Details |
---|---|---|---|
className | string | ' ' | You can customise by passing tailwind classes. |
labelClassName | string | ' ' | You can customise by passing tailwind classes. |
inputClassName | string | ' ' | You can customise by passing tailwind classes. |
id | string | input | You can pass id to create unique identifier. |
label | string | ' ' | You can pass label of the input. |
placeholder | string | ' ' | You can pass placeholder of the input. |
value | string | ' ' | You can pass value of the input. |
type | text | email | number | date ..etc | text | You can pass type of the input. |
disabled | boolean | false | You can pass disabled to set default checkbox state. |
onChange | (value: string | number) => void | Required | You can get callback when input value changed. |
Note: Along with these params you can also pass all default input params.
# Usage
import { NInput } from 'nayan';
import { useState } from 'react';
const Input = () => {
const [email, setEmail] = useState('niranjan.devasani@gmail.com');
return (
<NInput id="email" type="email" label="Email" placeholder="Enter email" className="mb-3" value={email} onChange={e => setEmail(e.target.value)} />
);
};
export default Input;