Select

Select component allows to use forms select element.

Quick demo

Preview of the select component associated with label and helper text.

Helper message.

Go on interactive demo for look this component in action!

Usage

Styles

sass
@use "~@iraiser/biscuit-design-components/components/select/styles";

JavaScript

javascript
import { BDCSelect } from '@iraiser/biscuit-design-components/components/select';

let select = new BDCSelect(document.querySelector('.bdc-select'));

HTML structure

html
<div class="bdc-select">
    <div class="bdc-select__wrap">
        <select class="bdc-select__control">
            <option>...</option>
        </select>
    </div>

    <i class="bdc-select__dropdown-icon fa-angle-down fas"></i>
</div>

Variants

Leading icon

The leading and trailing icons can add a new context on select. You can add leading, trailing or both. This highly recommended to not use icons with textarea option.

To see more information on using icon, go here.

html
<div class="bdc-select bdc-select--leading-icon">
    <i class="bdc-select__icon fa-star fas"></i>

    <div class="bdc-select__wrap">
        <select class="bdc-select__control">
            <option>...</option>
        </select>
    </div>

    <i class="bdc-select__dropdown-icon fa-angle-down fas"></i>
</div>

Placeholder

The component support natively the placeholder option, this option need have empty value.

html
<div class="bdc-select bdc-select--leading-icon">
    <div class="bdc-select__wrap">
        <select class="bdc-select__control">
            <option value="" selected="selected">Select an option...</option>
            <option>...</option>
        </select>
    </div>

    <i class="bdc-select__dropdown-icon fa-angle-down fas"></i>
</div>

Other variations

Using with label

html
<label class="bdc-label" for="select">Select</label>

<div class="bdc-select">
    <div class="bdc-select__wrap">
        <select class="bdc-select__control" id="select">
            <option>...</option>
        </select>
    </div>

    <i class="bdc-select__dropdown-icon fa-angle-down fas"></i>
</div>

For more details, please see Label component.

Using with helper text

html
<div class="bdc-select">
    <div class="bdc-select__wrap">
        <select class="bdc-select__control">
            <option>...</option>
        </select>
    </div>

    <i class="bdc-select__dropdown-icon fa-angle-down fas"></i>
</div>

<div class="bdc-select-helper">
    <p class="bdc-select-helper-text">Information text</p>
</div>

Theming

See the "Theming" section on theme documentation for more customization options.

Theming with CSS custom properties

Set custom styles on specific element in component:

sass
@use "~@iraiser/biscuit-design-components/components/select";

.foo-select {
    --bdc-theme-surface: #0971b3;
}

Theming with Sass mixins

Set custom styles on specific element in component:

sass
@use "~@iraiser/biscuit-design-components/components/select";

.foo-select {
    @include selected-button.shape-radius(sharped);
}

See Sass mixins section for more options.

Style customization

CSS classes

CSS ClassDescription
bdc-selectMandatory.
bdc-select--focusedStyle select at focused status.
bdc-select--selectedStyle select at selected status.
bdc-select--requiredStyle select at required status.
bdc-select--validStyle select at valid status.
bdc-select--warningStyle select at warning status.
bdc-select--invalidStyle select at invalid status.
bdc-select--disabledStyle select at disabled status.
bdc-select--leading-iconStyle select at leading icon.
bdc-select__controlIndicates the native control container.
bdc-select__dropdown-iconIndicates the dropdown icon container.
bdc-select__iconIndicates the icon container.
bdc-select-helperIndicates the helper container.
bdc-select-helper-textIndicates the helper text container.
bdc-select-helper-text--persistentPersist the helper text container display.
bdc-select-helper-text--validation-msgIndicates the helper text validation message container.

Sass mixins

Custom your own selected button easily with the public Sass mixins.

MixinDescription
ink-color($color)Set the ink color when select is enable.
shape-radius($radius)Set the radius on select.
"normal" (default), "filled", "shaped", "sharped" or custom radius.
dropdown-icon-color($color)Set the color on dropdown icon.
density($scale)Set the density on text field.
0 (default), -1 or -2.

JavaScript API

Getters & Setters

Public accessors from BDCSelect class.

AccessorTypeDescription
valuestringMethod for get & set the value.
validbooleanMethod for get & set the valid status.
requiredbooleanMethod for get & set the required status.
disabledbooleanMethod for get & set the disabled status.
helperTextstringMethod for set the suffix text.

Options

NameDefaultDescription
useNativeValidationtrueEnable or disabled the form validation.
Menu