Input Component
A form input component that provides a clean and accessible way to collect user input.
- Accessible form input implementation
- Support for various input types
- Customizable styling
- Error state handling
- Icon support
- Label integration
Installation
The Input component is part of our UI library. You can import it directly from the components directory.
Usage
Here is how to use the input in your project.
React TSX
React TSX
Examples
Basic Input
Input with Label
Input with Icon
Input with Error
Username is required
API Reference
Input
| Prop | Type | Default | Description |
|---|---|---|---|
type | string | "text" | The type of input |
value | string | - | The controlled value of the input |
defaultValue | string | - | The default value of the input |
onChange | (event: React.ChangeEvent<HTMLInputElement>) => void | - | Event handler called when the value changes |
placeholder | string | - | Placeholder text |
disabled | boolean | false | Whether the input is disabled |
required | boolean | false | Whether the input is required |
name | string | - | The name of the input |
id | string | - | The id of the input |
className | string | - | Additional CSS classes |
Additionally, all standard HTML input attributes are supported.