Skip to main content
🏠FormText InputVersion: 2.0.0-beta.6

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

PropertyTypeDefaultDescription
autocompletestringThe attribute specifies whether a form or an input field should have autocomplete on or off
autofocusbooleanfalseIf true, the input element will be focused during the first mount
classesstringlist of classes to override or extend the styles applied to the component. You can use available utility classes by importing
disabledbooleanfalseIf true, the component is disabled.
inputIdstringThe id of the input element
leftIconstring | { 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
namestringName attribute of the input element
placeholderstringThe short hint displayed in the input before the user enters a value
propsstring | { [key: string]: any; }Attributes applied to the input element.
readonlybooleanfalseThe attribute specifies whether a form or an input field should have autocomplete on or off
requiredbooleanfalseif true, the input element will be required
rightIconstring | { 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
valuestringThe value of the input element, required for a controlled component
EventTypeDescription
blurCustomEvent<FocusEvent>Callback fired when the input element loses focus.
focusCustomEvent<FocusEvent>Callback fired when the input element has focus.
valueChangedCustomEvent<string>Callback fired when the value is changed through the user interface. You can pull out the new value by accessing event.detail