# 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.
Last Updated: 7/18/2020, 6:52:28 PM