React Input - Argon
The ArgonInput helps you to create different form elements. It uses MUI InputBase in base and you can use all of the props from MUI InputBase for the ArgonInput 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
// Argon Dashboard 2 MUI Components
import ArgonInput from "components/ArgonInput";
Props Information
| Name | Type | Default | Description |
|---|---|---|---|
| size | 'small''medium''large' | medium | Change the ArgonInput size. |
| error | bool | false | Change the ArgonInput border color to red, its useful when displaying the error messages. |
| success | bool | false | Change the ArgonInput border color to green, its useful when displaying the success messages. |
| disabled | bool | false | Makes the ArgonInput disabled and user can't use it. |
| HTML5 Attributes | You can also use HTML5 input attributes for the ArgonInput. | ||
| MUI Props | You can pass all of the MUI InputBase props for the ArgonInput as well. |
With Icon
// Argon Dashboard 2 MUI Components
import ArgonInput from "components/ArgonInput";
import ArgonBox from "components/ArgonBox";
Success/Error
// Argon Dashboard 2 MUI Components
import ArgonInput from "components/ArgonInput";
Sizes
// Argon Dashboard 2 MUI Components
import ArgonInput from "components/ArgonInput";
Textarea
// Argon Dashboard 2 MUI Components
import ArgonInput from "components/ArgonInput";
HTML5 Inputs
// Argon Dashboard 2 MUI Components
import ArgonInput from "components/ArgonInput";