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>

props property

You can apply any input attributes( maxlength, pattern,...) to qtm-text-input through props attribute.

<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

qtm-text-input

Property	Type	Default	Description
autocomplete	string		The attribute specifies whether a form or an input field should have autocomplete on or off
autofocus	boolean	false	If true, the input element will be focused during the first mount
classes	string		list of classes to override or extend the styles applied to the component. You can use available utility classes by importing
disabled	boolean	false	If true, the component is disabled.
inputId	string		The id of the input element
leftIcon	string | { icon: string; classes?: string; lib?: IconLibType; size?: IconSizeType; variant?: IconVariantType; }		The name of the left icon. Besides, its value can have type IconType if this icon is customized
name	string		Name attribute of the input element
placeholder	string		The short hint displayed in the input before the user enters a value
props	string | { [key: string]: any; }		Attributes applied to the input element.
readonly	boolean	false	The attribute specifies whether a form or an input field should have autocomplete on or off
required	boolean	false	if true, the input element will be required
rightIcon	string | { icon: string; classes?: string; lib?: IconLibType; size?: IconSizeType; variant?: IconVariantType; }		The name of the right icon. Besides, its value can have type IconType if this icon is customized
severity	"error" | "success" | "warning"		The validation severity
size	"large" | "medium" | "small"	'medium'	The size of element
type	"email" | "password" | "tel" | "text"	'text'	Type of form control
value	string		The value of the input element, required for a controlled component

Event	Type	Description
blur	CustomEvent<FocusEvent>	Callback fired when the input element loses focus.
focus	CustomEvent<FocusEvent>	Callback fired when the input element has focus.
valueChanged	CustomEvent<string>	Callback fired when the value is changed through the user interface. You can pull out the new value by accessing event.detail