<!-- Primary -->
<div class="bux-selection-dropdown">
<label class="bux-selection-dropdown__label" for="bux-selection-dropdown__selection-dropdown-899456389">Form Input Label</label>
<span class="bux-selection-dropdown__helper-text" id="bux-selection-dropdown__helper-text-899456389">Helper Text</span>
<div class="bux-selection-dropdown__input">
<select id="bux-selection-dropdown__selection-dropdown-899456389" aria-describedby="bux-selection-dropdown__helper-text-899456389">
<option>Choose One</option>
<option value="Item 1">Item 1</option>
<option value="Item 2">Item 2</option>
<option value="Item 3">Item 3</option>
<option value="Item 4">Item 4</option>
<option value="Item 5">Item 5</option>
</select>
</div>
</div>
<!-- Required -->
<div class="bux-selection-dropdown">
<label class="bux-selection-dropdown__label" for="bux-selection-dropdown__selection-dropdown-1906225212">Form Input Label <span class="bux-text-field__required">(required)</span></label>
<span class="bux-selection-dropdown__helper-text" id="bux-selection-dropdown__helper-text-1906225212">Helper Text</span>
<div class="bux-selection-dropdown__input">
<select id="bux-selection-dropdown__selection-dropdown-1906225212" aria-describedby="bux-selection-dropdown__helper-text-1906225212" required>
<option>Choose One</option>
<option value="Item 1">Item 1</option>
<option value="Item 2">Item 2</option>
<option value="Item 3">Item 3</option>
<option value="Item 4">Item 4</option>
<option value="Item 5">Item 5</option>
</select>
</div>
</div>
<!-- Disabled -->
<div class="bux-selection-dropdown">
<label class="bux-selection-dropdown__label" for="bux-selection-dropdown__selection-dropdown-340896166">Form Input Label</label>
<span class="bux-selection-dropdown__helper-text" id="bux-selection-dropdown__helper-text-340896166">Helper Text</span>
<div class="bux-selection-dropdown__input bux-selection-dropdown__input--disabled">
<select id="bux-selection-dropdown__selection-dropdown-340896166" aria-describedby="bux-selection-dropdown__helper-text-340896166" disabled>
<option>Choose One</option>
<option value="Item 1">Item 1</option>
<option value="Item 2">Item 2</option>
<option value="Item 3">Item 3</option>
<option value="Item 4">Item 4</option>
<option value="Item 5">Item 5</option>
</select>
</div>
</div>
<!-- Error -->
<div class="bux-selection-dropdown">
<label class="bux-selection-dropdown__label" for="bux-selection-dropdown__selection-dropdown-2071876594">Form Input Label</label>
<span class="bux-selection-dropdown__helper-text" id="bux-selection-dropdown__helper-text-2071876594">Helper Text</span>
<div class="bux-selection-dropdown__input bux-selection-dropdown__input--error">
<select id="bux-selection-dropdown__selection-dropdown-2071876594" aria-describedby="bux-selection-dropdown__error-message-2071876594 bux-selection-dropdown__helper-text-2071876594" aria-invalid="true">
<option>Choose One</option>
<option value="Item 1">Item 1</option>
<option value="Item 2">Item 2</option>
<option value="Item 3">Item 3</option>
<option value="Item 4">Item 4</option>
<option value="Item 5">Item 5</option>
</select>
</div>
<span class="bux-selection-dropdown__error-message" id="bux-selection-dropdown__error-message-2071876594">Error Helper Text</span>
</div>
{#
Selection Dropdown
Available variables:
- required: Boolean. Set to true to require form element.
- modifier: Sets the variant of the form item. Allowed values: null,
error,disabled.
- dropdown_label: String for the form legend.
- helper_text: String for the form helper text.
- items: Array containing the form items.
- item.text: Display text for the form item.
- error_helper_text:Content for the error helper text.
#}
{% set random_seed = random() %}
{% set selection_dropdown_id = "selection-dropdown-" ~ random_seed %}
<div class="bux-selection-dropdown">
<label class="bux-selection-dropdown__label" for="bux-selection-dropdown__{{ selection_dropdown_id }}">{{ input_label }}{% if required %} <span class="bux-text-field__required">{{required}}</span>{% endif %}</label>
<span class="bux-selection-dropdown__helper-text" id="bux-selection-dropdown__helper-text-{{ random_seed }}">{{ helper_text }}</span>
<div class="bux-selection-dropdown__input{% if modifier %} bux-selection-dropdown__input--{{ modifier }}{% endif %}">
<select id="bux-selection-dropdown__{{ selection_dropdown_id }}"
aria-describedby="{% if "error" in modifier %}bux-selection-dropdown__error-message-{{ random_seed }} {% endif %}bux-selection-dropdown__helper-text-{{ random_seed }}"
{% if required %} required {% endif %}
{% if "disabled" in modifier %} disabled {% endif %}
{% if "error" in modifier %} aria-invalid="true" {% endif %}>
<option>{{ dropdown_label }}</option>
{% for item in items %}
<option value="{{ item.text }}">{{ item.text }}</option>
{% endfor %}
</select>
</div>
{% if "error" in modifier %}
<span class="bux-selection-dropdown__error-message" id="bux-selection-dropdown__error-message-{{ random_seed }}">{{ error_helper_text }}</span>
{% endif %}
</div>
/* Primary */
input_label: Form Input Label
dropdown_label: Choose One
helper_text: Helper Text
items:
- text: Item 1
- text: Item 2
- text: Item 3
- text: Item 4
- text: Item 5
/* Required */
input_label: Form Input Label
required: (required)
dropdown_label: Choose One
helper_text: Helper Text
items:
- text: Item 1
- text: Item 2
- text: Item 3
- text: Item 4
- text: Item 5
/* Disabled */
modifier: disabled
input_label: Form Input Label
dropdown_label: Choose One
helper_text: Helper Text
items:
- text: Item 1
- text: Item 2
- text: Item 3
- text: Item 4
- text: Item 5
/* Error */
modifier: error
input_label: Form Input Label
dropdown_label: Choose One
helper_text: Helper Text
error_helper_text: Error Helper Text
items:
- text: Item 1
- text: Item 2
- text: Item 3
- text: Item 4
- text: Item 5
.bux-selection-dropdown {
@include form-element;
&__input {
position: relative;
margin-top: $sp-8;
select {
appearance: none;
background: $white;
border: 2px solid $gray-dark-80;
border-radius: 0;
width: 100%;
height: 44px;
padding-left: $sp-8;
&:focus {
outline: 2px solid $focus;
}
&:focus:not(:focus-visible) {
outline: none !important;
}
option {
background-color: $white;
padding: 15px 0;
border: 2px solid $gray-dark-80;
}
}
&:before {
content: "\f010";
font-size: 22px;
font-family: "bux-icons";
background-color: $white;
color: $gray-dark-80;
position: absolute;
top: 2px;
right: 2px;
bottom: 2px;
padding-right: 10px;
padding-left: 10px;
padding-top: 5px;
pointer-events: none;
}
&--disabled select {
color: $gray-light-40;
border-color: $gray-light-40;
background-color: $gray-light-80;
cursor: not-allowed;
opacity: 1;
}
&--disabled:before {
background-color: $gray-light-80;
color: $gray-light-40;
}
&--error > select {
background: #ffeff2;
border-color: $scarlet;
}
&--error:before {
background: #ffeff2;
}
}
&__error-message {
@include form-error-message;
margin-top: 8px;
}
}
No notes defined.