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 using .qtm-small, .qtm-medium or .qtm-large utilities. By default, the text input has size medium.

<div class="qtm-text-input qtm-small">
<i class="material-icons qtm-icon">account_circle</i>
<input type="text" placeholder="Small" disabled />
</div>
<div class="qtm-text-input qtm-medium">
<i class="material-icons qtm-icon">account_circle</i>
<input type="text" placeholder="Medium" disabled />
</div>
<div class="qtm-text-input qtm-large">
<i class="material-icons qtm-icon">account_circle</i>
<input type="text" placeholder="Large" disabled />
</div>

Disabled

Add .qtm-disabled in text input wrapper and input to disable these elements.

<div class="qtm-text-input qtm-disabled">
<i class="material-icons qtm-icon">account_circle</i>
<input type="text" placeholder="Text Input" disabled />
</div>

Icons

You can combine a input with icon(s), using .qtm-icon class for icon element(s).

<div class="qtm-text-input">
<i class="material-icons qtm-icon">account_circle</i>
<input type="text" placeholder="Text Input" />
</div>
<div class="qtm-text-input">
<input type="text" placeholder="Text Input" />
<i class="material-icons qtm-icon">check_circle</i>
</div>
<div class="qtm-text-input">
<i class="material-icons qtm-icon">account_circle</i>
<input type="text" placeholder="Text Input" />
<i class="material-icons qtm-icon">check_circle</i>
</div>

Validation states

Error

Add .qtm-error in text input wrapper to changer container border color in error state.

<div class="qtm-text-input qtm-error">...</div>

Warning

Add .qtm-warning in text input wrapper to changer container border color in error state.

<div class="qtm-text-input qtm-warning">...</div>

Example

HTML form validation can be done by JavaScript.

Try to submit the form below; our JavaScript will intercept the submit button, add .qtm-error class and an error icon to text input element if this input is empty.

Submit
<form class="space-y-m flex flex-col" id="form">
<div class="qtm-text-input">
<i class="material-icons qtm-icon">account_circle</i>
<input type="text" placeholder="Username" name="username" />
<i class="material-icons qtm-icon"></i>
</div>
<div class="qtm-text-input">
<i class="material-icons qtm-icon">email</i>
<input type="email" placeholder="Email" name="email" />
<i class="material-icons qtm-icon"></i>
</div>
<div class="qtm-text-input">
<i class="material-icons qtm-icon">vpn_key</i>
<input type="password" placeholder="Password" name="password" />
<i class="material-icons qtm-icon"></i>
</div>
<button class="qtm-button qtm-filled qtm-primary" type="submit">submit</button>
</form>

<script>
const form = document.getElementById('form');
//input
const usernameEl = form.querySelector("input[name='username']");
const emailEl = form.querySelector("input[name='email']");
const passwordEl = form.querySelector("input[name='password']");
//input wrapper
const usernameWrapper = usernameEl.parentElement;
const emailWrapper = emailEl.parentElement;
const passwordWrapper = passwordEl.parentElement;

const isRequired = (value) => (value === '' ? false : true);

const showValidationIcon = (iconDom, iconName, iconColor) => {
iconDom.innerHTML = iconName;
};

const checkValidation = (input, inputWrapper) => {
const inputValue = input.value.trim();

const lastIcon = inputWrapper.querySelector('.qtm-icon:last-child');

if (isRequired(inputValue)) {
if (inputWrapper.classList.contains('qtm-error'))
inputWrapper.classList.remove('qtm-error');
if (!inputWrapper.classList.contains('qtm-success'))
inputWrapper.classList.add('qtm-success');
showValidationIcon(lastIcon, 'check_circle');
} else {
if (inputWrapper.classList.contains('qtm-success'))
inputWrapper.classList.remove('qtm-success');
if (!inputWrapper.classList.contains('qtm-error'))
inputWrapper.classList.add('qtm-error');
showValidationIcon(lastIcon, 'error');
}
};

form.addEventListener('submit', function (e) {
// prevent the form from submitting
e.preventDefault();
//validate form
checkValidation(usernameEl, usernameWrapper);
checkValidation(emailEl, emailWrapper);
checkValidation(passwordEl, passwordWrapper);
});
</script>