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>