Text Input
Text inputs are box-shaped input fields that helps the user enter data to communicate to the machine, a system or a product.
Sizes
Control the size of an text input to set size
attribute to small
, medium
or large
value. By default, the text input has size medium.
<TextInput size="small" leftIcon={<Icon icon="account_circle" />} placeholder="Small" />
<TextInput size="medium" leftIcon={<Icon icon="account_circle" />} placeholder="Medium" />
<TextInput size="large" leftIcon={<Icon icon="account_circle" />} placeholder="Large" />
Disabled
Add disabled
in text input to disable this element.
<TextInput
leftIcon={<Icon icon="account_circle" />}
placeholder="Text Input"
disabled
classes="w-23xl"
/>
Icons
You can combine a input with icon(s), using leftIcon
and rightIcon
attribute with a name of icon in the material icon website
<TextInput size="small" leftIcon={<Icon icon="account_circle" />} placeholder="Text Input" />
<TextInput size="medium" rightIcon={<Icon icon="check_circle" />} placeholder="Text Input" />
<TextInput
size="large"
leftIcon={<Icon icon="account_circle" />}
rightIcon={<Icon icon="check_circle" />}
placeholder="Text Input"
/>
Custom icon
The left-icon and right-icon can either be of string type or have one of the following type:
type IconType = {
icon: string,
classes?: string,
lib?: IconLibType,
size?: IconSizeType,
variant?: IconVariantType,
};
<TextInput
placeholder="Text Input"
classes="w-23xl"
leftIcon={<Icon icon="applied_settings" lib="business" />}
/>
Severity validation
Error
Set severity
property to error
to change container border color and right-icon color in error severity.
<TextInput
leftIcon={<Icon icon="email" />}
rightIcon={<Icon icon="check_circle" />}
placeholder="Text Input"
severity="error"
classes="w-23xl"
/>
Warning
Set severity
property to warning
to change container border color and right-icon color in warning severity.
<TextInput
leftIcon={<Icon icon="vpn_key" />}
rightIcon={<Icon icon="warning" />}
placeholder="Text Input"
severity="warning"
classes="w-23xl"
/>
Success
Set severity
property to success
to change right-icon color in success severity.
<TextInput
leftIcon={<Icon icon="vpn_key" />}
rightIcon={<Icon icon="check_circle" />}
placeholder="Text Input"
severity="success"
classes="w-23xl"
/>
<input>
attributes
You can apply any standard <input>
attributes (e.g., maxlength
, type
, etc.) to the Text Input component through the props
property.
<TextInput
placeholder="Text Input"
classes="w-23xl"
/>
Value
You can control value of the input by using value
attribute.
<TextInput
placeholder="Text Input"
name="text-input"
value="Hello world!"
classes="w-23xl"
/>