Skip to main content

Select Fields

Select fields lets the user pick an option from a finite set of choices, and validate the option in a context of a form, or simple filtering.

Usage​

HTML​

<label class="hs-select-field">
    <span class="hs-select-field__label">Select</span>
    <select class="hs-select-field__input">
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
        <option>Option 4</option>
        <option>Option 5</option>
    </select>
    <span class="hs-select-field__helper">Helper text</span>
</label>

SCSS/CSS​

@use 'node_modules/@devprotocol/hashi';
@use 'node_modules/@devprotocol/hashi/hs-select-field';

@include hashi.init {
  @include hs-select-field.render();
}

Outlined Select Field​

By default, the select field is styled using the outlined style. This doesn't provide emphasis differentiation, just stylistic choices.

<label class="hs-select-field">
    <span class="hs-select-field__label">Select</span>
    <select class="hs-select-field__input">
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
        <option>Option 4</option>
        <option>Option 5</option>
    </select>
</label>

Filled Select Field​

You can modify the form field style to be in the filled style by adding the .is-filled class to the parent's class list.

<label class="hs-select-field is-filled">
    <span class="hs-select-field__label">Select</span>
    <select class="hs-select-field__input">
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
        <option>Option 4</option>
        <option>Option 5</option>
    </select>
</label>
Choosing select field styles

Select field styles must be consistent in every form. Contextually, a webpage has many forms; It can be in the form of a search field, or a contact form. Generally, you can only select one style per form. For example, in the contact form you can only limit the field's style to the outlined style, and in the search field you only limit it to the filled style.

Side Label Text Field​

This text field style is generally recommended for select fields outside the form context. To apply this style, attach .is-side-label class to the parent element's class list.

<label class="hs-select-field is-side-label">
    <span class="hs-select-field__label">Select</span>
    <select class="hs-select-field__input">
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
        <option>Option 4</option>
        <option>Option 5</option>
    </select>
</label>

Required Fields​

To make a field required, attach a .is-required class to the parent element class list.

<label class="hs-select-field is-required">
    <span class="hs-select-field__label">Select</span>
    <select class="hs-select-field__input">
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
        <option>Option 4</option>
        <option>Option 5</option>
    </select>
</label>

Select Field Icons​

The position of the form field icon is dependent on putting a class name after the .hs-select-field__icon class.

By default, icons are on the trailing icon position. You can modify it to become a leading icon by attaching .is-leading in the icon element class list.

To use icons, place an SVG inside the .hs-select-field__icon element.

<!-- Trailing Icon -->
<label class="hs-select-field">
    <span class="hs-select-field__label">Select Field Label (Required)</span>
    <i class="hs-select-field__icon">
        <!-- Icon SVG -->
    </i>
    <select class="hs-select-field__input">
        <!--- Options... -->
    </select>
</label>

<!-- Leading Icon -->
<label class="hs-select-field">
    <span class="hs-select-field__label">Select Field Label (Required)</span>
    <i class="hs-select-field__icon is-leading">
        <!-- Icon SVG -->
    </i>
    <select class="hs-select-field__input">
        <!--- Options... -->
    </select>
</label>

API​

CSS Classes​

These are used to structure, extend, and modify the styles of a component on the markup.

Anatomical Classes​

These classes make up the elements inside a component.

ClassEffect
.hs-select-fieldMain select field class.
.hs-select-field__labelThe select field's label class.
.hs-select-field__inputThe select field's main input class.
.hs-select-field__iconThe select field's icon class.

Variant Classes​

For information on how to use these classes, click here.

ClassEffect
.is-raisedRenders the component in its raised style.
.is-errorRenders the component in its error state.
.is-leadingRenders the component's icon in its leading style.

Custom Properties​

These are for creating your own component theme classes that you can append to the parent element markup.

PropertyEffect
--hs-select-field-fillChanges the select field's background color.
--hs-select-field-inkChanges the select field's text color.
--hs-select-field-label-inkChanges the text field label's text color.
--hs-select-field-helper-inkChanges the text field helper's text color.
--hs-select-field-borderChanges the select field's border color.
--hs-select-field-radiusChanges the select field's border radius.
--hs-select-field-paddingChanges the select field's padding.
--hs-select-field-shadowChanges the select field's shadow.
--hs-select-field-sizeChanges the select field's text size.
--hs-select-field-label-sizeChanges the select field's label size.
--hs-select-field-helper-sizeChanges the select field's helper size.
--hs-select-field-weightChanges the select field's text weight.
--hs-select-field-label-weightChanges the select field's label weight.
--hs-select-field-helper-weightChanges the select field's helper weight.

Example​

.my-select-field-theme {
  --hs-select-field-fill: #232323;
  --hs-select-field-ink: lime;
  --hs-select-field-border: var(--hs-select-field-fill);
  
  &:hover {
    --hs-select-field-fill: #353535;
  }
  
  &:active {
    --hs-select-field-fill: #535353;
  }
}

Configuring styles​

Here are all the themeable properties for this component. The directions to use these properties are located in the render API.

$fill: 'surface-200' !default;
$fill-disabled: 'disabled' !default;
$ink: 'surface-ink' !default;
$ink-disabled: 'disabled-ink' !default;
$border: 'primary-200' !default;
$border-focus: 'accent-400' !default;
$border-disabled: 'disabled' !default;

$radius: 'small' !default;
$padding: ('sm' 'md') !default;
$border-width: 1px !default;
$border-style: solid !default;

$family: 'body' !default;
$size: 'body' !default;
$weight: 'normal' !default;
$line-height: 'normal' !default;

$label-ink: 'surface-ink' !default;
$helper-ink: 'surface-ink' !default;

Extending styles​

If you wish to extend the component styles, the extend() API might come in handy.