Home page
Github ...
Github ...

# Forms & Inputs

# Basic Form Elements

Use the fieldset element to group related elements in a form. By default, HiQ removes the border from the element.

Related Fields: 

<form>
  <fieldset>
    <legend>Related Fields:</legend>
    <p>
        <label>Field 1:</label>
        <input type="text">
    </p>
    <p>
        <label>Field 2:</label>
        <input type="text">
    </p>
    <p>
        <label>Field 3:</label>
        <input type="text">
    </p>
  </fieldset>
</form>

The legend element represents a caption for the content of fieldset while the label element represents a caption for each input.

Property Name (global/local) Description
--hiq-fieldset-padding-vertical
--fieldset-padding-vertical		 Sets the top and bottom padding for the fieldset element.
--hiq-fieldset-padding-horizontal
--fieldset-padding-horizontal		 Sets the left and right margin for the fieldset element.
--hiq-fieldset-border-width
--fieldset-border-width		 Sets the border width for the fieldset element.
--hiq-fieldset-border-color
--fieldset-border-color		 Sets the border color for the fieldset element.
--hiq-legend-margin-bottom
--legend-margin-bottom		 Sets the bottom margin for the legend element used within a form.
--hiq-legend-font-weight
--legend-font-weight		 Sets the font weight for the legend element used within a form.
--hiq-label-margin-bottom
--label-margin-bottom		 Sets the bottom margin for the label element used within a form to separate it from its related input.
--hiq-label-font-weight
--label-font-weight		 Sets the font weight for the label element used within a form.

# Input Mixin

A mixin defines the base styles for many input elements, including all textual inputs. You can use this mixin directly if you are using the HiQ source files with PostCSS.

.element {
  @mixin input;
}

Numerous custom properties are available to customize the appearance of inputs:

Property Name (global/local) Description
--hiq-input-invalid-border-color
--input-invalid-border-color		 Sets the border color for invalid inputs.
--hiq-input-valid-border-color
--input-valid-border-color		 Sets the border color for valid inputs.
--hiq-input-height
--input-height		 Sets the default height on text inputs.
--hiq-input-padding-vertical
--input-padding-vertical		 Sets the top and bottom padding on text inputs.
--hiq-input-padding-horizontal
--input-padding-horizontal		 Sets the left and right padding on text inputs.
--hiq-input-border-width
--input-border-width		 Sets the border width on text inputs, selects and textareas.
--hiq-input-border-radius
--input-border-radius		 Sets the border radius on text inputs, selects and textareas.
--hiq-input-border-color
--input-border-color		 Sets the border color on static state text inputs, selects and textareas.
--hiq-input-background-color
--input-background-color		 Sets the background color on static state text inputs, selects and textareas.
--hiq-input-text-color
--input-text-color		 Sets the text color on static state text inputs, selects and textareas.
--hiq-input-placeholder-color
--input-placeholder-color		 Sets the placeholder text color on static state text inputs, selects and textareas.
--hiq-input-hover-border-color
--input-hover-border-color		 Sets the border color on hovered text inputs, selects and textareas.
--hiq-input-hover-background-color
--input-hover-background-color		 Sets the background color on hovered text inputs, selects and textareas.
--hiq-input-hover-text-color
--input-hover-text-color		 Sets the text color on hovered text inputs, selects and textareas.
--hiq-input-focus-border-color
--input-focus-border-color		 Sets the border color on focused text inputs, selects and textareas.
--hiq-input-focus-background-color
--input-focus-background-color		 Sets the background color on focused text inputs, selects and textareas.
--hiq-input-focus-text-color
--input-focus-text-color		 Sets the text color on focused text inputs, selects and textareas.

# Input Validation

Border color on inputs is changed based on their validation state. This applies to inputs matching :invalid or :valid selectors. This can be easily overridden with custom properties (see the list of properties above). By default, valid inputs will not have any special border color.

<p>
    <label for="required">Invalid Required Input</label>
    <input type="text" required>
</p>
<p>
    <label for="required">Valid Required Input</label>
    <input type="text" required value="Input value">
</p>

# Text Inputs

Styling for textual inputs:

Element Example
<input type="text">
<input type="password">
<input type="email">
<input type="url">
<input type="tel">
<input type="search">
<input type="number">
<input readonly>
<input disabled>

# Temporal Inputs

Styling for date- and time-based inputs:

Element Example
<input type="date">
<input type="time">
<input type="month">
<input type="week">
<input type="datetime-local">

# Textareas

The textarea element provides a multi-line text input control.

<p>
    <label for="textarea">Textarea</label>
    <textarea id="textarea" placeholder="Enter text"></textarea>
</p>
Property Name (global/local) Description
--hiq-textarea-padding-vertical
--textarea-padding-vertical		 Sets the top and bottom padding on textareas.
--hiq-textarea-padding-horizontal
--textarea-padding-horizontal		 Sets the left and right padding on textareas.

# Selects

The select element represents a control that provides a menu of options. Use optgroup to group related options.

<p>
    <label for="select">Select</label>
    <select id="select">
        <optgroup label="Option Group">
            <option>Option 1</option>
            <option>Option 2</option>
            <option>Option 3</option>
        </optgroup>
    </select>
</p>

A custom dropdown caret is created with an inline svg used as a background-image.

If multiple options should be selectable, use the multiple attribute on the select element.

<p>
    <label for="multi-select">Multi-select</label>
    <select multiple id="multi-select">
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
    </select>
</p>
Property Name (global/local) Description
--hiq-select-background-image
--select-background-image		 Sets the background image on select elements. This controls the display of the down caret. By default, this is set to an inline svg.
--hiq-select-background-position
--select-background-position		 Sets the positioning of the caret with relation to the select element.
--hiq-select-background-size
--select-background-size		 Sets the size of the caret within the select element.
--hiq-select-multiple-checked-background-color
--select-multiple-checked-background-color		 Sets the background color on a selected option in a select element with the multiple attribute.
--hiq-select-multiple-padding-vertical
--select-multiple-padding-vertical		 Sets the top and bottom padding on a select element with the multiple attribute.

# Datalists

An "autocomplete" feature can be provided on inputs using the datalist element. This is supported in most browsers, with the noticeable exception of Safari.

<p>
    <label for="datalist">Datalist</label>
    <input list="options" id="datalist" placeholder="Type 'o' to see matching options" />
    <datalist id="options">
        <option value="Option 1" />
        <option value="Option 2" />
        <option value="Option 3" />
    </datalist>
</p>

# Checkboxes

Place checkbox inputs inside a div with the class .checkbox and the label element AFTER the input to get the proper custom styling provided by HiQ. HiQ hides the input element and use before and after pseudo-elements to style the checkbox and checkmark.

Checkboxes 
<fieldset>
    <legend>Checkboxes</legend>
    <div class="checkbox">
        <input type="checkbox" name="checkbox" id="check-option1" value="option1" />
        <label for="check-option1">Option 1</label>
    </div>
    <div class="checkbox">
        <input type="checkbox" name="checkbox" id="check-option2" value="option2" />
        <label for="check-option2">Option 2</label>
    </div>
    <div class="checkbox">
        <input type="checkbox" name="checkbox" id="check-option3" value="option3" disabled />
        <label for="check-option3">Option 3</label>
    </div>
</fieldset>
Property Name (global/local) Description
--hiq-checkbox-margin-bottom
--checkbox-margin-bottom		 Sets the bottom margin on HiQ's custom checkboxes.
--hiq-checkbox-label-padding-horizontal
--checkbox-label-padding-horizontal		 Sets the left and right padding of the label following a checkbox input.
--hiq-checkbox-label-font-weight
--checkbox-label-font-weight		 Sets the font weight of the label following a checkbox input.
--hiq-checkbox-width
--checkbox-width		 Sets the width of the visual checkbox element.
--hiq-checkbox-height
--checkbox-height		 Sets the height of the visual checkbox element.
--hiq-checkbox-border-width
--checkbox-border-width		 Sets the width of the visual checkbox element.
--hiq-checkbox-border-color
--checkbox-border-color		 Sets the border color of the visual checkbox element.
--hiq-checkbox-border-radius
--checkbox-border-radius		 Sets the border radius of the visual checkbox element.
--hiq-checkbox-background-color
--checkbox-background-color		 Sets the background color of the visual checkbox element.
--hiq-checkbox-hover-background-color
--checkbox-hover-background-color		 Sets the background color of the visual checkbox element when hovered.
--hiq-checkbox-focus-background-color
--checkbox-focus-background-color		 Sets the background color of the visual checkbox element when focused.
--hiq-checkbox-checked-border-color
--checkbox-checked-border-color		 Sets the border color of the visual checkbox element when the input is checked.
--hiq-checkbox-checked-background-color
--checkbox-checked-background-color		 Sets the background color of the visual checkbox element when the input is checked.
--hiq-checkbox-check-width
--checkbox-check-width		 Sets the width of the check mark within the checkbox.
--hiq-checkbox-check-height
--checkbox-check-height		 Sets the height of the check mark within the checkbox.
--hiq-checkbox-check-border-width
--checkbox-check-border-width		 Sets the border width of the check mark within the checkbox.
--hiq-checkbox-check-color
--checkbox-check-color		 Sets the color of the check mark within the checkbox.
--hiq-checkbox-indeterminate-width
--checkbox-indeterminate-width		 Sets the width of the mark within an indeterminate checkbox.

# Radio Buttons

Place radio inputs inside a div with the class .radio and the label element AFTER the input to get the proper custom styling provided by HiQ. HiQ hides the input element and use before and after pseudo-elements to style the radio button and radio fill.

Radio Buttons 
<fieldset>
    <legend>Radio Buttons</legend>
    <div class="radio">
        <input type="radio" name="radio" id="radio-option1" value="option1" />
        <label for="radio-option1">Option 1</label>
    </div>
    <div class="radio">
        <input type="radio" name="radio" id="radio-option2" value="option2" />
        <label for="radio-option2">Option 2</label>
    </div>
    <div class="radio">
        <input type="radio" name="radio" id="radio-option3" value="option3" disabled />
        <label for="radio-option3">Option 3</label>
    </div>
</fieldset>
Property Name (global/local) Description
--hiq-radio-margin-bottom
--radio-margin-bottom		 Sets the bottom margin on HiQ's custom radio buttons.
--hiq-radio-label-padding-horizontal
--radio-label-padding-horizontal		 Sets the left and right padding of the label following a radio input.
--hiq-radio-label-font-weight
--radio-label-font-weight		 Sets the font weight of the label following a radio input.
--hiq-radio-width
--radio-width		 Sets the width of the visual radio element.
--hiq-radio-height
--radio-height		 Sets the height of the visual radio element.
--hiq-radio-border-width
--radio-border-width		 Sets the border width of the visual radio element.
--hiq-radio-border-color
--radio-border-color		 Sets the border color of the visual radio element.
--hiq-radio-border-radius
--radio-border-radius		 Sets the border radius of the visual radio element.
--hiq-radio-background-color
--radio-background-color		 Sets the background color of the visual radio element.
--hiq-radio-hover-background-color
--radio-hover-background-color		 Sets the background color of the visual radio element when hovered.
--hiq-radio-focus-background-color
--radio-focus-background-color		 Sets the background color of the visual radio element when focused.
--hiq-radio-checked-border-color
--radio-checked-border-color		 Sets the border color of the visual radio element when the input is checked.
--hiq-radio-checked-background-color
--radio-checked-background-color		 Sets the background color of the visual radio element when the input is checked.
--hiq-radio-check-width
--radio-check-width		 Sets the width of the circle within the radio button.
--hiq-radio-check-height
--radio-check-height		 Sets the height of the circle within the radio button.
--hiq-radio-check-border-radius
--radio-check-border-radius		 Sets the border-radius of the circle within the radio button.
--hiq-radio-check-background-color
--radio-check-background-color		 Sets the background color of the circle within the radio button.

# Range Inputs

Range inputs let users specify a numeric value within a specified range. The styling for range inputs is complex across browsers. HiQ takes care of that and provides some simple variables to customize the appearance of range inputs for your own projects.

<p>
    <label for="range">Range</label>
    <input type="range" id="range" min="100" max="500" step="10">
</p>
Property Name (global/local) Description
--hiq-range-input-thumb-width
--range-input-thumb-width		 Sets the width of the range input draggable handle.
--hiq-range-input-thumb-height
--range-input-thumb-height		 Sets the height of the range input draggable handle.
--hiq-range-input-thumb-border-radius
--range-input-thumb-border-radius		 Sets the border radius of the range input draggable handle.
--hiq-range-input-thumb-background-color
--range-input-thumb-background-color		 Sets the background color of the range input draggable handle.
--hiq-range-input-track-height
--range-input-track-height		 Sets the height of the range input track.
--hiq-range-input-track-border-radius
--range-input-track-border-radius		 Sets the border radius of the range input track.
--hiq-range-input-track-background-color
--range-input-track-background-color		 Sets the background color of the range input track.

# File Inputs

File inputs let users choose one or more files from their device storage. HiQ styles file inputs in Webkit browsers to appear as buttons.

<p>
    <label for="file">Upload File</label>
    <input type="file" id="file">
</p>

# Color Inputs

Color inputs let users specify a color by using a visual color picker or by entering the color into a text field, depending on the browser.

<p>
    <label for="color">Color</label>
    <input type="color" id="color">
</p>
Property Name (global/local) Description
--hiq-color-input-background-color
--color-input-background-color		 Sets the background color of color inputs.

Next page - Meters & Progress