Input

Different versions of Webflow form input.

Default Input
Name
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Input with Icon
Component
Code
Your Email
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
<style> .form_input:focus ~ .form_input-icon { color: var(--body--color--foreground) } </style>

Password Input

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

import { Thind } from "thind-js";
const thind = new Thind({attribute : "thind"});
//Show Password Inputs
const showPasswordInputs = thind.element.getAll("showPassword");
if (showPasswordInputs) {
  showPasswordInputs.forEach(showPasswordInput => {
    showPasswordInput.addEventListener("click", () => {
      const passwordInput = showPasswordInput.previousElementSibling;
      if (passwordInput.type === "password") {
        passwordInput.type = "text";
        showPasswordInput.classList.add("is-slash");
      } else {
        passwordInput.type = "password";
        showPasswordInput.classList.remove("is-slash");
      }
    });
  });
}

OTP Input

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

import { Thind, OTPInputHandler } from "thind-js";

//Create a new constructor
const thind = new Thind({attribute : "thind"});

//Handle OTP Form
const otpForm = thind.element.get("otpForm");
thind.form.disable(otpForm);

// New OTP Input constructor
const otpInput = new OTPInputHandler(".otp-input");

//Listen to events from otp input and take action on validation
otpInput.onInputEvent((otpValue) => {
  //check if the otp is complete
  if (otpValue.length === 6) {
    console.log(otpValue);
  } 
});

Prerequisites

Thind JS

Prefilled Input

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

<style>
   .form_input.is-prefill {
      padding-left: calc(var(--prefill-width) + 0.2rem);
    }
</style>

// Select all inputs with the is-prefill class
const inputs = document.querySelectorAll('.form_input.is-prefill');

inputs.forEach(input => {
  // Find the closest form_input-prefill element
  const prefill = input.closest('.form_input-relative').querySelector('.form_input-prefill');

  if (prefill) {
    // Calculate the width of the prefill element
    const prefillWidth = prefill.offsetWidth;
    
    // Set a CSS variable with the width of the prefill element
    input.style.setProperty('--prefill-width', `${prefillWidth}px`);
  }
});

Input with Dropdown
Phone Number
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Select Input

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

<style>
/* The container must be positioned relative: */
.is-custom-select {
  position: relative;
}

.is-custom-select select {
  display: none; /*hide original SELECT element: */
}

.select-selected{
width: 100%
}

/* Style the arrow inside the select element: */
.select-selected:after {
  position: absolute;
  content: "";
  top: 45%;
  right: 10px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-color: var(--border--color--light) transparent transparent transparent;
}

/* Point the arrow upwards when the select box is open (active): */
.select-selected.select-arrow-active:after {
  border-color: transparent transparent var(--border--color--light) transparent;
  top: 30%;
}

/* style the items (options), including the selected item: */
.select-items div,.select-selected {
		cursor: pointer;
    padding: 0.5rem 0.75rem;
    border-radius: 0.15rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 3rem;
}

.select-items div{
    padding: 0.25rem 0.5rem;
    border-radius: 0.15rem;
    display: block;
    min-height: auto;
}
    

/* Style items (options): */
.select-items {
		display: flex;
		gap: 2px;
		flex-direction: column;
    position: absolute;
    background-color: var(--body--color--background);
    padding: 0.25rem;
    border: 1px solid var(--border--color--light);
    border-radius: 0.5rem;
    margin-top: 0.25rem;
    left: 0;
    right: 0;
    z-index: 99;
}

/* Hide the items when the select box is closed: */
.select-hide {
  display: none;
}

.select-items div:hover, .same-as-selected {
  background-color: var(--border--color--light);
}

.same-as-selected {
 background-color: var(--border--color--light);
}
</style>

//Custom select 
var x, i, j, l, ll, selElmnt, a, b, c;
/*look for any elements with the class "custom-select":*/
x = document.getElementsByClassName("is-custom-select");
l = x.length;
for (i = 0; i < l; i++) {
  selElmnt = x[i].getElementsByTagName("select")[0];
  ll = selElmnt.length;
  /*for each element, create a new DIV that will act as the selected item:*/
  a = document.createElement("DIV");
  a.setAttribute("class", "select-selected");
  a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
  x[i].appendChild(a);
  /*for each element, create a new DIV that will contain the option list:*/
  b = document.createElement("DIV");
  b.setAttribute("class", "select-items select-hide");
  for (j = 0; j < ll; j++) {  // Start from 0 to include the first option
    /*for each option in the original select element,
    create a new DIV that will act as an option item:*/
    c = document.createElement("DIV");
    c.innerHTML = selElmnt.options[j].innerHTML;
    c.addEventListener("click", function(e) {
      /*when an item is clicked, update the original select box,
      and the selected item:*/
      var y, i, k, s, h, sl, yl;
      s = this.parentNode.parentNode.getElementsByTagName("select")[0];
      sl = s.length;
      h = this.parentNode.previousSibling;
      for (i = 0; i < sl; i++) {
        if (s.options[i].innerHTML == this.innerHTML) {
          s.selectedIndex = i;
          h.innerHTML = this.innerHTML;
          y = this.parentNode.getElementsByClassName("same-as-selected");
          yl = y.length;
          for (k = 0; k < yl; k++) {
            y[k].removeAttribute("class");
          }
          this.setAttribute("class", "same-as-selected");
          break;
        }
      }
      h.click();
    });
    b.appendChild(c);
  }
  x[i].appendChild(b);
  a.addEventListener("click", function(e) {
    /*when the select box is clicked, close any other select boxes,
    and open/close the current select box:*/
    e.stopPropagation();
    closeAllSelect(this);
    this.nextSibling.classList.toggle("select-hide");
    this.classList.toggle("select-arrow-active");
  });
}

function closeAllSelect(elmnt) {
  /*a function that will close all select boxes in the document,
  except the current select box:*/
  var x, y, i, xl, yl, arrNo = [];
  x = document.getElementsByClassName("select-items");
  y = document.getElementsByClassName("select-selected");
  xl = x.length;
  yl = y.length;
  for (i = 0; i < yl; i++) {
    if (elmnt == y[i]) {
      arrNo.push(i);
    } else {
      y[i].classList.remove("select-arrow-active");
    }
  }
  for (i = 0; i < xl; i++) {
    if (arrNo.indexOf(i)) {
      x[i].classList.add("select-hide");
    }
  }
}

/*if the user clicks anywhere outside the select box,
then close all select boxes:*/
document.addEventListener("click", closeAllSelect);

Multi Select Input

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<style>
.select2-selection .select2-selection--multiple {
  background: transparent;
  border-radius: 0.5rem;
  border: 1px solid var(--border--color--light);
}

.select2-dropdown {
  background-color: var(--body--color--background);
  border: 1px solid var(--border--color--light);
  border-radius: 0.5rem;
}

.select2-container--default .select2-results__option--selected {
  background-color: var(--border--color--light);
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: var(--body--color--background);
  color: white;
}

.select2-container--default .select2-selection--multiple {
  background-color: var(--body--color--background);
  border: 1px solid var(--border--color--light);
  border-radius: 0.5rem;
  min-height: 3rem;
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
  border: 1px solid var(--border--color--light);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: var(--body--color--background);
  border: 1px solid var(--border--color--light);
  border-radius: 4px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  background-color: var(--body--color--background);
  border: none;
  border-right: 1px solid var(--border--color--light);
}

.select2-container--default.select2-container--open.select2-container--below .select2-selection--single,
.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
  border-color: var(--border--color--medium);
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}

.select2-container--open .select2-dropdown--below {
  border-top: 1px solid var(--border--color--light);
  margin-top: 0.25rem;
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
  background: var(--body--color--foreground);
  color: var(--body--color--background);
}

.select2-results__options {
  padding: 0.25rem;
  display: flex;
  gap: 2px;
  flex-direction: column;
}

.select2-results__option--selectable {
  padding: 0.25rem 0.5rem;
  border-radius: 0.15rem;
  display: block;
  margin: 0;
  min-height: auto;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: var(--border--color--light);
  color: inherit;
}  
</style>

/* Import jQuery in <Head> if not already using */
<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>

<!-- Add this before </body> tag -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
<script>
$(document).ready(function() {
    $('[thind="multi-select"]').select2();

    function prefillSelect2() {
        var prefilledText = $('#field').val();
        if (prefilledText) {
            var valuesArray = prefilledText.split(',').map(value => value.trim());
            var select2Element = $('select[thind="multi-select"]');
            select2Element.val(valuesArray).trigger('change.select2');
        }
    }
    prefillSelect2();

    const multiSelectForm = document.querySelector('[thind="multi-select-form"]');
    const multiSelectInput = document.querySelector('[thind="multi-select"]');

    multiSelectForm.addEventListener("submit", async (e) => {
        e.preventDefault();
        let multiSelectValue = $(multiSelectInput).select2('data');
        multiSelectValue = multiSelectValue.map((value) => value.text);
        // Convert to JSON string
        multiSelectValue = JSON.stringify(multiSelectValue);
        showToast(`Selected values are ${multiSelectValue}`);
    });
});
</script>

Prerequisites

Thind JS

Menu

Getting Started

Components

Thind.dev Newsletter

Input

Default Input

Input with Icon

Password Input

OTP Input

Prerequisites

Prefilled Input

Input with Dropdown

Select Input

Multi Select Input

Prerequisites