Input controls

HTML defines a number of input control elements for most basic use cases. They should be rendered platform-native in most environments. To achieve a more modern and cross-platform consistent look, these controls are restyled by Frontfire. There are also other enhancements to controls and entirely new controls. The following samples show input controls for forms.

The “Disabled” checkbox can be used to toggle the above controls and inspect their disabled appearance and behaviour.

Placeholder

Text inputs can have a placeholder text that is shown when the input is empty. Add it with the standard <input placeholder="..."> attribute.

Postcode:

Disabled

Numeric input

The tiny spinner buttons are now at a touch-friendly size. Select an odd number between 1 and 30. And yes, 30 is not an odd number, but must be handled as well. Use the standard <input type="number">, optionally with the min, max and step attributes.

Disabled

Decimal step:

The step size is logarithmic with the step attribute set to the factor preceded by a "*" character.

Decimal:

Binary:

Segmented input

Input fields can have labels at either side. To form such an input group, a wrapping element needs to be introduced.

ms

<span class="segmented-input">
    <input type="number">
    <span class="label">ms</span>
</span>

The .label element may also be placed before the input, or one before and one after it.

≥

Disabled

Icons

Input fields can have icons at either side. In this example, Font Awesome icons (fa) are used.

<span class="segmented-input icon-left">
    <i class="fa fa-envelope"></i>
    <input type="email">
</span>

Instead of a static icon, there can also be a loading indicator displayed.

<span class="segmented-input icon-left">
    <input type="text">
    <i class="loading small"></i>
</span>

Disabled

Transparent and borderless input boxes

Text inputs have a border and a white opaque background by default. To blend them more into styled environments, they can also have no border and background.

Type here:
Type here:

Disabled

Checkboxes and radio buttons

Checkbox and radio box inputs are styled to look consistent across all browsers. They're also a little bigger than normal for easier touch interaction. Checkbox and radio box controls should be grouped with their label text in a <label> element. This can also include an icon.

Checkboxes can be switched through all of the possible three states “checked”, “unchecked” and “indeterminate” by clicking on them. This is normally not possible with HTML. Add the three-state CSS class to enable this feature.

WhatsApp     All 3 states accessible     Initially disabled

Option 1     Option 2     Initially disabled

Disabled

Auto-height textbox

The following textarea grows as you type more text into it. Add the auto-height CSS class to it to enable this feature. It requires JavaScript to function but relies solely on CSS for proper resizing and precise measuring.

Selectable

The children of any element can be made selectable by clicking on them. Set the "selectable" CSS class or call the selectable() function on the element. The selected item(s) are highlighted. Multi-selection is supported and handles clicking an item with the Ctrl or Shift key pressed.

A regular HTML <select> element can also be used for this function. All these elements are transformed automatically. It is then replaced by an extended version of the HTML form element that either displays the list or uses a dropdown (depending on the size attribut, as in HTML). The dropdown version has full support for multi-selection.

A regular <select> element with the size attribut set and multi-selection enabled:

First item Second item Third item Fourth item Fifth item

Select all Select none

A regular <select> element without the size attribut set:

First item Second item Third item Fourth item Fifth item

A regular <select> element without the size attribut set and with multi-selection enabled, empty selection disabled:

First item Second item Third item Fourth item Fifth item

Selectable and sortable lists can be combined:

Toggle button

A toggle button is a button that can be set to an active state. It can either toggle on each click, or be controlled by code. Toggle buttons can also be grouped without a gap like normal buttons.

First Second Transparent

Disabled   Toggle

Color button

The default colour picker opens a platform-specific and much outdated colour selection dialog window. On Windows 10, this dialog usually still originates from Windows 95, over 20 years ago. Frontfire replaces that with a modern and simple colour palette in a little dropdown box. Just use the standard <input type="color">.

Disabled