Text Input

Text inputs are box-shaped input fields that help users enter data to communicate with the machine, a system or a product.

Sizes

Control the size of a text input by setting the size property to small, medium or large. By default, the text input has size medium.

account_circle

account_circle

account_circle

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

Disabled

Add disabled property to disable the text input element.

account_circle

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

Icons

You can combine an input with icon(s), using leftIcon and rightIcon properties with an Icon component.

account_circle

check_circle

account_circlecheck_circle

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

Custom icon

You can customize the icons by passing an Icon component with specific properties:

<TextInput
  placeholder="Text Input"
  classes="w-23xl"
  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
  leftIcon={<Icon icon="email" />}
  rightIcon={<Icon icon="check_circle" />}
  placeholder="Text Input"
  severity="error"
  classes="w-23xl"
/>

Warning

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

vpn_keywarning

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

Success

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

vpn_keycheck_circle

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

Input attributes

You can apply any standard input attributes (maxLength, pattern, type, etc.) directly to the TextInput component.

<TextInput
  placeholder="Text Input"
  maxLength={5}
  type="password"
  classes="w-23xl"
/>

Value

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

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

Event Handling

The TextInput component provides several event handlers to manage user interactions. The most commonly used is onChange, which is triggered when the input value changes.

onChange

const handleChange = (event) => {
  // event.target.value contains the current input value
  console.log('New value:', event.target.value);
  
  // You can update state or perform other actions
  setUsername(event.target.value);
  validateUsername(event.target.value);
};

<TextInput 
  placeholder="Enter username"
  onChange={handleChange}
/>

onFocus and onBlur

You can also handle focus events:

const handleFocus = (event) => {
  console.log('TextInput gained focus');
  // You might want to track when users interact with the field
  trackFieldInteraction('username');
};

const handleBlur = (event) => {
  console.log('TextInput lost focus');
  // You can validate the field when the user is done typing
  validateField(event.target.value);
};

<TextInput 
  placeholder="Enter username"
  onFocus={handleFocus}
  onBlur={handleBlur}
/>

onKeyDown and onKeyUp

For more advanced interactions, you can handle keyboard events:

const handleKeyDown = (event) => {
  // Check for specific key presses
  if (event.key === 'Enter') {
    console.log('Enter key pressed - submitting form');
    submitForm();
  }
};

<TextInput 
  placeholder="Press Enter to submit"
  onKeyDown={handleKeyDown}
/>

Note that when a text input is disabled (disabled={true}), these events will not be triggered.

Custom Classes

Add your own classes in the classes attribute. This way you will be able to override or extend the styles applied to the component (you can use available utility classes by importing @qtm/css/dist/utilities.css).

<TextInput 
  classes="shadow-m-light"
  placeholder="Custom styled input"
/>

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