Inputs

CSS file

The width of an input can help users determine what type of content being requested. This is very helpful for cases such as percentages, zip codes, etc.

<label for="input1">1 characters</label>
<input type="text" id="input1" class="sba-u-input-width--1">

<label for="input2">2 characters</label>
<input type="text" id="input2" class="sba-u-input-width--2">

<label for="input3">3 characters</label>
<input type="text" id="input3" class="sba-u-input-width--3">

<label for="input4">4 characters</label>
<input type="text" id="input4" class="sba-u-input-width--4">

<label for="input5">5 characters</label>
<input type="text" id="input5" class="sba-u-input-width--5">

<label for="input6">6 characters</label>
<input type="text" id="input6" class="sba-u-input-width--6">

<label for="input7">7 characters</label>
<input type="text" id="input7" class="sba-u-input-width--7">

<label for="input7">7 characters</label>
<input type="text" id="input7" class="sba-u-input-width--7">

<label for="input8">8 characters</label>
<input type="text" id="input8" class="sba-u-input-width--8">

<label for="input9">9 characters</label>
<input type="text" id="input9" class="sba-u-input-width--9">

<label for="input10">10 characters</label>
<input type="text" id="input10" class="sba-u-input-width--10">

<label for="input10">16 characters</label>
<input type="text" id="input16" class="sba-u-input-width--16">