Components
Input
A field where users can enter data or information.
Default Input
This is a hint text.
Input with Icon
This is a hint text.
Input with Error
This is an error message.
Password Input
Password Input with Icon (Toggle Visibility)
Disabled Input
Props
| Name | Type | Default | Description |
|---|---|---|---|
| type | 'text' | 'password' | 'email' | 'text' | The type of input. |
| value | string | - | The value of the input. |
| onChange | React.ChangeEvent | - | The function to call when the input value changes. |
| placeholder | string | - | The placeholder text for the input. |
| label | string | - | The label for the input. |
| hint | string | - | A hint for the input. |
| error | string | - | An error message for the input. |
| icon | React.ReactNode | - | An optional icon to display inside the input. |
| className | string | - | Additional class names for the wrapper div. |
| inputClassName | string | - | Additional class names for the input element. |
| labelClassName | string | - | Additional class names for the label. |
| hintClassName | string | - | Additional class names for the hint. |
| errorClassName | string | - | Additional class names for the error message. |
| disable | boolean | false | Flag to disable the input. |
Best Practices
- Use clear and intuitive icons that represent the action they perform.
- Use labels to provide context for the input fields.
- Include hints to guide the user in entering the correct information.
- Display error messages to help users correct their input.