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.
Rendered live, with the same build of the library you install.
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;
| Name | Type | Default | Details |
|---|---|---|---|
| id | string | Optional | You can pass id to create unique identifier. |
| label | React.ReactNode | Optional | Label for the input field. |
| labelClassName | string | ' ' | You can customise by passing tailwind classes. |
| inputClassName | string | ' ' | You can customise by passing tailwind classes. |
| wrapperClassName | string | ' ' | You can customise wrapper by passing tailwind classes. |
| error | React.ReactNode | Optional | Error message to display. |
| helperText | React.ReactNode | Optional | Helper text to display. |
| onChange | (e: React.ChangeEvent<HTMLInputElement>) => void | Optional | Change event handler. |
Other components solving nearby problems.
- React Input
- Input Component for React
- React Text Input
- React Number Input
- React Password Input
- React Textarea
- Controlled Input in React
- Uncontrolled Input in React
- Input Validation in React
- Styling Input Component in React
- Custom Input in React
- Input with Hooks in React
- Input Label Component for React
- React Search Input
- React Autocomplete Input
- React Input Group
- Input Placeholder in React
- Responsive Input Component in React
- Input Component Accessibility in React
- Example Input Component in React
- Input UI Component
- Form Input React
- React Input Tutorial
- Input Design System
- React Input TypeScript
- Mobile Input React
- Input Best Practices
- React Input Performance
- Input UI Library
- Text Field React
- Input Field Component
- Form Control React
- Input Validation React
- Custom Input Component