Select
a single choice from a dropdown listbox, with label, hint and error.
Example
EnvironmentProduction
Staging
Development
<div class="lucent-select lucent-select--md" data-lucent-select>
<span class="lucent-select__label typography-caption" id="sel-20-label">Environment</span>
<div class="lucent-select__field">
<button type="button" class="lucent-select__trigger" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-controls="sel-20-list" aria-labelledby="sel-20-label">
<span class="lucent-select__value is-placeholder">Choose environment</span>
<span class="lucent-icon lucent-icon--md lucent-select__caret" aria-hidden="true">
<span class="material-icons lucent-icon__glyph">arrow_drop_down</span>
</span>
</button>
<div class="lucent-select__dropdown" role="listbox" id="sel-20-list" hidden>
<div class="lucent-option" role="option" data-value="prod" aria-selected="false">
<span class="lucent-option__label">Production</span>
</div>
<div class="lucent-option" role="option" data-value="staging" aria-selected="false">
<span class="lucent-option__label">Staging</span>
</div>
<div class="lucent-option" role="option" data-value="dev" aria-selected="false">
<span class="lucent-option__label">Development</span>
</div>
</div>
</div>
<span class="lucent-select__message" id="sel-20-msg">Pick a deployment target.</span>
</div><lucent-select
placeholder="Choose environment"
[options]="environments"
[(ngModel)]="env">
<span lucentLabel>Environment</span>
<span lucentHint>Pick a deployment target.</span>
</lucent-select>
Using it
| Angular | lucent-select import { LucentSelect } from '@design-foundry/lucent-angular'; |
| Stylesheet | .lucent-select @design-foundry/lucent-styles/core.css |
API
| Name | Kind | Type | Default | Description |
|---|
| size | input | xs | sm | md | lg | md | control density. |
| placeholder | input | string | Select an option | shown while nothing is selected. |
| options | input | SelectOption[] | [] | { label, value } choices. |
| selectionChange | output | unknown | | emits the chosen value. |
Slots
| Attribute | Description |
|---|
| lucentLabel | field label. |
| lucentHint | helper text below the field. |
| lucentError | error message; its presence sets the error state. |
Theming