React Input - Soft UI

The SoftInput 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 SoftInput 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

// Soft UI Dashboard React components import SoftInput from "components/SoftInput";

Props Information

NameTypeDefaultDescription
size'small''medium''large'mediumChange the SoftInput 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 SoftInput.
errorboolfalseChange the SoftInput border color to red, its useful when displaying the error messages.
successboolfalseChange the SoftInput border color to green, its useful when displaying the success messages.
disabledboolfalseMakes the SoftInput disabled and user can't use it.
HTML5 AttributesYou can also use HTML5 input attributes for the SoftInput.
MUI PropsYou can pass all of the MUI InputBase props for the SoftInput as well.

With Icon

// Soft UI Dashboard React components import SoftInput from "components/SoftInput";

Success/Error

// Soft UI Dashboard React components import SoftInput from "components/SoftInput";

Sizes

// Soft UI Dashboard React components import SoftInput from "components/SoftInput";

Textarea

// Soft UI Dashboard React components import SoftInput from "components/SoftInput";

HTML5 Inputs

// Soft UI Dashboard React components import SoftInput from "components/SoftInput";