Flexible Input
‹ BackA 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>