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.

<qtm-text-input
  size="small"
  left-icon="account_circle"
  placeholder="Small"
></qtm-text-input>
<qtm-text-input
  size="medium"
  left-icon="account_circle"
  placeholder="Medium"
></qtm-text-input>
<qtm-text-input
  size="large"
  left-icon="account_circle"
  placeholder="Large"
></qtm-text-input>

Disabled

Add disabled in text input to disable this element.

<qtm-text-input
  left-icon="account_circle"
  placeholder="Text Input"
  disabled
  classes="w-23xl"
></qtm-text-input>

Icons

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

<qtm-text-input
  size="small"
  left-icon="account_circle"
  placeholder="Text Input"
></qtm-text-input>
<qtm-text-input
  size="medium"
  right-icon="check_circle"
  placeholder="Text Input"
></qtm-text-input>
<qtm-text-input
  size="large"
  left-icon="account_circle"
  right-icon="check_circle"
  placeholder="Text Input"
></qtm-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,
};

const icon={icon: 'applied_settings', lib:"business"}
document.querySelector('qtm-text-input').leftIcon = icon

<qtm-text-input
  placeholder="Text Input"
  classes="w-23xl"
></qtm-text-input>

Severity validation

Error

Set severity property to error to changer container border color and right-icon color in error severity.

<qtm-text-input
  left-icon="email"
  placeholder="Text Input"
  severity="error"
  classes="w-23xl"
></qtm-text-input>

Warning

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

<qtm-text-input
  left-icon="email"
  right-icon="warning"
  placeholder="Text Input"
  severity="warning"
  classes="w-23xl"
></qtm-text-input>

Success

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

<qtm-text-input
  left-icon="email"
  right-icon="check_circle"
  placeholder="Text Input"
  severity="success"
  classes="w-23xl"
></qtm-text-input>

<input> attributes

You can apply any standard <input> attributes (e.g., maxlength, type, etc.) to the Text Input component through the props property.

<qtm-text-input
  placeholder="Text Input"
  classes="w-23xl"
  props='{"maxlength":"5", "type":"password"}'
></qtm-text-input>

Value

You can control value of the input by using value attribute.

<qtm-text-input
  placeholder="Text Input"
  name="text-input"
  classes="w-23xl"
  value="Hello world!"
></qtm-text-input>

API

Loading API documentation...