Input

An Input component is a user interface element that allows users to enter data, such as text, numbers, or selections. It typically includes various types, such as text fields, checkboxes, radio buttons, and dropdowns, providing flexibility for different data types. Input components are essential for forms and interactive applications, enabling users to submit information effectively and efficiently.

Demo

Rendered live, with the same build of the library you install.

Usage

Input.tsx
import { useState } from 'react';
import { NInput } from '@nayan-ui/react';
const Input = () => {
const [value, setValue] = useState('');
return (
<div>
<NInput label="Email" type="email" placeholder="Enter email" value={value} onChange={e => setValue(e.target.value)} />
</div>
);
};
export default Input;

Attributes

8 props
NameTypeDefaultDetails
idstringOptionalYou can pass id to create unique identifier.
labelReact.ReactNodeOptionalLabel for the input field.
labelClassNamestring' 'You can customise by passing tailwind classes.
inputClassNamestring' 'You can customise by passing tailwind classes.
wrapperClassNamestring' 'You can customise wrapper by passing tailwind classes.
errorReact.ReactNodeOptionalError message to display.
helperTextReact.ReactNodeOptionalHelper text to display.
onChange(e: React.ChangeEvent<HTMLInputElement>) => voidOptionalChange event handler.

Tags

Other components solving nearby problems.