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.

account_circle

account_circle

account_circle

<TextInput size="small" leftIcon="account_circle" inputProps={{ placeholder: "Small" }} />
<TextInput size="medium" leftIcon="account_circle" inputProps={{ placeholder: "Medium" }} />
<TextInput size="large" leftIcon="account_circle" inputProps={{ placeholder: "Large" }} />

Disabled

Add disabled in text input to disable this element.

account_circle

<TextInput
  classes="w-23xl"
  disabled
  inputProps={{
    placeholder: "Text Input"
  }}
  leftIcon="account_circle"
/>

Icons

You can combine a input with icon(s), using leftIcon and rightIcon attribute with a name of icon in the material icon website

account_circle

check_circle

account_circlecheck_circle

<TextInput
  inputProps={{
    placeholder: "Text Input"
  }}
  leftIcon="account_circle"
  size="small"
/>
<TextInput
  inputProps={{
    placeholder: "Text Input"
  }}
  rightIcon="check_circle"
  size="medium"
/>
<TextInput
  inputProps={{
    placeholder: "Text Input"
  }}
  leftIcon="account_circle"
  rightIcon="check_circle"
  size="large"
/>

Custom icon

To select an appropriate icon, please consult the Icon component documentation.

Both the left icon and right icon can be either a string or having the following interface:

interface IconProps = {
  icon: string,
  classes?: string,
  lib?: IconLibType,
  size?: IconSizeType,
  variant?: IconVariantType,
};

<TextInput
  classes="w-23xl"
  inputProps={{
    placeholder: "Text Input"
  }}
  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.

emailcheck_circle

<TextInput
  classes="w-23xl"
  inputProps={{
    placeholder: "Text Input"
  }}
  leftIcon="email"
  rightIcon="check_circle"
  severity="error"
/>

Warning

Set severity property to warning to change container border color and right-icon color in warning severity.

vpn_keywarning

<TextInput
  classes="w-23xl"
  inputProps={{
    placeholder: "Text Input"
  }}
  leftIcon="vpn_key"
  rightIcon="warning"
  severity="warning"
/>

Success

Set severity property to success to change right-icon color in success severity.

vpn_keycheck_circle

<TextInput
  classes="w-23xl"
  inputProps={{
    placeholder: "Text Input"
  }}
  leftIcon="vpn_key"
  rightIcon="check_circle"
  severity="success"
/>

<input> attributes

You can apply any standard <input> attributes (e.g., placeholder, maxlength etc.) to the inner <input> of the Text Input component by using the inputProps prop.

<TextInput
  inputProps={{
    maxLength: 10,
    placeholder: "Text Input"
  }}
/>

API

The Text Input component accepts all the props a standard <div> does in React (HTML, ARIA, data attributes, and event handlers). Its props are typed as React.HTMLAttributes<HTMLDivElement>. See more about supported HTML props in React's documentation.

However, Text Input doesn't accept any children.

Loading API documentation...