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.

<QtmTextInput size="small" leftIcon="account_circle" placeholder="Small" />
<QtmTextInput size="medium" leftIcon="account_circle" placeholder="Medium" />
<QtmTextInput size="large" leftIcon="account_circle" placeholder="Large" />

Disabled

Add disabled in text input to disable this element.

<QtmTextInput
  leftIcon="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

<QtmTextInput size="small" leftIcon="account_circle" placeholder="Text Input" />
<QtmTextInput size="medium" rightIcon="check_circle" placeholder="Text Input" />
<QtmTextInput
  size="large"
  leftIcon="account_circle"
  rightIcon="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,
};

<QtmTextInput
  placeholder="Text Input"
  classes="w-23xl"
  leftIcon={{ icon: 'applied_settings', lib: 'business' }}
/>

Severity validation

Error

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

<QtmTextInput
  leftIcon="email"
  rightIcon="check_circle"
  placeholder="Text Input"
  severity="error"
  classes="w-23xl"
/>

Warning

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

<QtmTextInput
  leftIcon="vpn_key"
  rightIcon="warning"
  placeholder="Text Input"
  severity="warning"
  classes="w-23xl"
/>

Success

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

<QtmTextInput
  leftIcon="vpn_key"
  rightIcon="check_circle"
  placeholder="Text Input"
  severity="success"
  classes="w-23xl"
/>

props property

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

<QtmTextInput
  placeholder="Text Input"
  classes="w-23xl"
  props={{ maxLength: '5', type: 'password' }}
/>

Value

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

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

API

QtmTextInput

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
onBlur	CustomEvent<FocusEvent>	Callback fired when the input element loses focus.
onFocus	CustomEvent<FocusEvent>	Callback fired when the input element has focus.
onValueChanged	CustomEvent<string>	Callback fired when the value is changed through the user interface. You can pull out the new value by accessing event.detail