VuiInput
The VuiInput helps you to create different form elements. It uses MUI InputBase in base and you can use all of the props from MUI InputBasefor the VuiInput component.
The below codes are editable and you can modify them the way you want directly from your browser, please use the green button or the ctrl + s to save the changes.
Demo
// Vision UI Dashboard React components
import VuiInput from "components/VuiInput";
Props Information
| Name | Type | Default | Description |
|---|---|---|---|
| size | 'small''medium''large' | medium | Change the VuiInput size. |
| icon | {component: bool | node, direction: ["none", "left", "right"]} | {component: false, direction: "none"} | Used to set an icon on the left or right side of VuiInput. |
| error | bool | false | Change the VuiInput border color to red, its useful when displaying the error messages. |
| success | bool | false | Change the VuiInput border color to green, its useful when displaying the success messages. |
| disabled | bool | false | Makes the VuiInput disabled and user can't use it. |
| HTML5 Attributes | You can also use HTML5 input attributes for the VuiInput. | ||
| MUI Props | You can pass all of the MUI InputBase props for the VuiInput as well. |
With Icon
// Vision UI Dashboard React components
import VuiInput from "components/VuiInput";
Success/Error
// Vision UI Dashboard React components
import VuiInput from "components/VuiInput";
Sizes
// Vision UI Dashboard React components
import VuiInput from "components/VuiInput";
Textarea
// Vision UI Dashboard React components
import VuiInput from "components/VuiInput";
HTML5 Inputs
// Vision UI Dashboard React components
import VuiInput from "components/VuiInput";