Flexible Input

‹ Back

A flexible input is an input field that starts off small but grows when focused.

The outer wrapper needs data-flexible-input-container and the inner wrapper needs data-flexible-input. The inner wrapper takes one value in the form of initial-size/focus-size. 

<div data-flexible-input-container>
  <div data-flexible-input="140/300">
    <input type="text" />
  </div>
</div>

To anchor the flexible input to the right and extend to the left, simply add data-flexible-input-right to your data-flexible-input element:

<div data-flexible-input-container>
  <div data-flexible-input="140/300" data-flexible-input-right>
    <input type="text" />
  </div>
</div>

An example with data-flexible-input value of 200/800:

<div data-flexible-input-container>
  <div data-flexible-input="200/800">
    <input type="text" placeholder="200/800" />
  </div>
</div>

An example with 20/400:

<div data-flexible-input-container>
  <div data-flexible-input="20/400">
    <input type="text" placeholder="20/400" />
  </div>
</div>

An example with 300/100, getting smaller on focus:

<div data-flexible-input-container>
  <div data-flexible-input="300/100">
    <input type="text" placeholder="300/100" />
  </div>
</div>