Form Sizing Helper

Our sizing tool helps you adjust the size of form elements like buttons and input fields easily.

--x

The --x helper allows you to adjust form elements by percentage size. By default --x has a value of 100 (%) where a value less than 100 will reduce the size of the element and a value above 100 will increase the size of the element. The --x helper effects the font-size and padding of the element.

<button style="--x:100;"> Button </button>

Button Groups

The --x helper works across all form elements including button groups, select fields and all input types.accent

<div class="group" style="--x:100;"> 
  <input type="text" placeholder="John" aria-label="Name">
  <button>Button</button>
  <button>Button</button>
  </div>

Forms and outside containers

The --x helper can be applied to the outside container of a collection of form elements. All form elements inside the container will inherit the --x value.

<form style="--x:100;">
  <label>Username
    <input type="text" placeholder="John">
  </label>
  <label>Password
    <input type="password" placeholder="Dow">
  </label>
  <button>Submit</button>
  </form>