Input
Import
import { VKInput } from "@vivakits/react-components";Size
The Input component comes with 4 different sizes that you can change using the size prop.
Color
The Input component comes with 6 different colors that you can change it using the color prop. It has both solid and outline variant.
Rounded
The shape of the input component can be updated using rounded prop.
Icon
An icon can be appended or prepended using icon prop. The position of the icon can be specified by the iconPosition prop.
Error
Conditional error handling for input can be done via hasError prop. Error message can also be modified via errorMessage prop.
Invalid input value
Custom error message
API Reference
| Attribute | Type | Description | Default |
|---|---|---|---|
| color | primarysecondaryaccentsuccesswarningdanger | Changes input color | primary |
| size | smmdlgxl | Changes input size | md |
| rounded | defaultnonexssmmdlgfulll | Changes the border radius of input | primary |
| icon | ReactNode | Append or prepend an icon inside the input box | - |
| iconPosition | startend | Determine the position of the icon | start |
| placeholder | string | Place a text inside the input box | - |
| label | string | label of the input box | - |
| labelPosition | startendhorizontal | Determine the position of the label of input box | start |
| labelClassName | string | Changes style of the label of input box | - |
| hasError | boolean | Shows error | false |
| errorMessage | string | Modify the error message | Invalid input value |
| wrapperClassName | string | Modify the appearance of input box | - |