Controls

• src
• forms
• controls.scss

Class list

Description

The .textbox class can be used on multiple types of input element, as well as the select and textarea elements. Any element with the .textbox class applied will have its display set to block and its width set to 100%.

<input type="text" class="textbox mb-half" placeholder="text">
<input type="password" class="textbox mb-half" placeholder="password">
<input type="number" class="textbox mb-half" placeholder="number">
<input type="search" class="textbox mb-half" placeholder="search">
<input type="email" class="textbox mb-half" placeholder="email">
<input type="tel" class="textbox mb-half" placeholder="tel">
<input type="url" class="textbox mb-half" placeholder="url">
<input type="month" class="textbox mb-half">
<input type="date" class="textbox mb-half">
<input type="datetime-local" class="textbox mb-half">
<input type="time" class="textbox mb-half">
<input type="week" class="textbox mb-half">
<select class="textbox mb-half">
    <option value="" selected disabled>select</option>
    <option value="option">option</option>
</select>
<textarea class="textbox mb-2" placeholder="textarea"></textarea>

Readonly

<input type="text" class="textbox" placeholder="readonly" readonly>

Disabled

<input type="text" class="textbox" placeholder="disabled" disabled>

Multiple

The multiple attribute can be used on a select element, to choose more than one option. To specify how many options to show at once, use the size attribute and assign a value.

<select class="textbox mb-2" multiple size="6">
    <option value="1">1</option>
    <option value="2">2</option>
    <!-- ... -->
    <option value="19">19</option>
    <option value="20">20</option>
</select>

No resize

Use the .no-resize class on a textarea.textbox to remove the resizing handle.

<textarea class="textbox no-resize mb-2" placeholder="no resize"></textarea>

Checkbox and Radio

Sandbox wraps the checkbox and radio input elements in a label with the related class name (.checkbox or .radio) applied. One benefit of this is that the hitbox for checking the related element includes whatever is in the label.

<label class="checkbox mr-1">
    <input type="checkbox" name="" value="">
    checkbox
</label>
<label class="radio">
    <input type="radio" name="" value="">
    radio
</label>

Unlike the .textbox class, the display type for .checkbox and .radio is set to inline-block. Make use of the display utility classes to change this behavior.

Checkbox and Radio switches

Sandbox provides a customized checkbox and radio input. In order for it to work, the i element which it uses must go immediately after the input element.

<label class="checkbox switch mr-1">
    <input type="checkbox" name="" value="">
    <i></i>
    checkbox
</label>
<label class="radio switch mr-1">
    <input type="radio" name="state" value="on">
    <i></i>
    radio
</label>
<label class="radio switch">
    <input type="radio" name="state" value="off">
    <i></i>
    radio
</label>

Disabled Checkbox and Radio

<label class="checkbox mr-1">
    <input type="checkbox" disabled>
    checkbox
</label>
<label class="checkbox switch mr-1">
    <input type="checkbox" disabled>
    <i></i>
    checkbox
</label>
<label class="radio mr-1">
    <input type="radio" disabled>
    radio
</label>
<label class="radio switch">
    <input type="radio" disabled>
    <i></i>
    radio
</label>

Font size scaling

Use the font size utility classes to adjust the size of the controls.

<input type="text" class="textbox h6 mb-half" placeholder="text">
<input type="text" class="textbox h3 mb-half" placeholder="text">
<input type="text" class="textbox h1 mb-half" placeholder="text">
<select class="textbox h6 mb-half">
    <option value="" selected disabled>select</option>
    <option value="">option</option>
</select>
<select class="textbox h3 mb-half">
    <option value="" selected disabled>select</option>
    <option value="">option</option>
</select>
<select class="textbox h1 mb-half">
    <option value="" selected disabled>select</option>
    <option value="">option</option>
</select>
<label class="checkbox h6 mr-1">
    <input type="checkbox">
    checkbox
</label>
<label class="checkbox switch h6">
    <input type="checkbox">
    <i></i>
    checkbox
</label>
<label class="checkbox h3 mr-1">
    <input type="checkbox">
    checkbox
</label>
<label class="checkbox switch h3">
    <input type="checkbox">
    <i></i>
    checkbox
</label>
<label class="checkbox h1 mr-1">
    <input type="checkbox">
    checkbox
</label>
<label class="checkbox switch h1">
    <input type="checkbox">
    <i></i>
    checkbox
</label>
<label class="radio h6 mr-1">
    <input type="radio">
    radio
</label>
<label class="radio switch h6">
    <input type="radio">
    <i></i>
    radio
</label>
<label class="radio h3 mr-1">
    <input type="radio">
    radio
</label>
<label class="radio switch h3">
    <input type="radio">
    <i></i>
    radio
</label>
<label class="radio h1 mr-1">
    <input type="radio">
    radio
</label>
<label class="radio switch h1">
    <input type="radio">
    <i></i>
    radio
</label>