Input
Displays a input field that can be used to enter data in a form or other similar layouts.
Usage
Sizes
Input fields can be displayed in different sizes including default, sm and lg. The default size is default. Pass the size props to choose the size of the input.
Variants
The variants change the style of the input border in order to show different visual states. These variants can be error, success, warning and default.
Left and Right Addons
You can add addons to the left and right of the Input component. Smartroof UI exports InputGroup, InputLeftAddon, and InputRightAddon to help with this use case.
Add custom components inside Input
In some scenarios, you might need to add a custom component inside the input component. Smartroof UI exports InputLeftElement and InputRightElement to help with this use case.
Remember that you can insert any component. Imagine a use case where you have a button that opens a dropdown, popover, modal, etc. You can do whatever you want along with a custom logic.
Add icons inside Input
Similar to the previous Elements model, InputLeftIcon and InputRightIcon allow you to insert a lucide-react icon in a simple way.
Disabled
Input fields can be displayed in disabled state. Pass the disabled props to display the input field in disabled state.
With Form
API Reference
InputGroup
| Prop | Type | Default |
|---|---|---|
variant | enum | ─ |
size | enum | default |
InputLeftAddon
| Prop | Type | Default |
|---|---|---|
text | string | ─ |
InputRightAddon
| Prop | Type | Default |
|---|---|---|
text | string | ─ |
InputLeftElement
| Prop | Type | Default |
|---|---|---|
children | ReactNode | ─ |
InputRightElement
| Prop | Type | Default |
|---|---|---|
children | ReactNode | ─ |
InputLeftIcon
| Prop | Type | Default |
|---|---|---|
icon | LucideIcon | ─ |
InputRightIcon
| Prop | Type | Default |
|---|---|---|
icon | LucideIcon | ─ |
Input
| Prop | Type | Default |
|---|---|---|
variant | enum | ─ |
size | enum | default |