e8-form-dropdown
Updated on Sep 18, 2025 17 minutes to readA dropdown form control for selecting one option from a predefined list.
It supports labels, placeholders, custom option rendering, tooltips, and configurable horizontal alignment.
Overview
e8-form-dropdown renders a select (dropdown) input integrated with form validation and E8 styling.
It allows choosing a single value from a list of options, which can be passed as an array or expression.
The component supports labels, placeholders, and custom option slots, with configurable text alignment and visibility controls.
It emits change, focus, and blur events and supports both readonly and dynamic states.
Insert this code into Main or Initialization script of the form to register a global method
E8App.$set(E8App.vars, 'status', 'new');
E8App.$set(E8App.vars, 'priority', 'medium');
E8App.$set(E8App.vars, 'language', 'en');Copy this snippet into the Content section
<!-- Basic dropdown -->
<e8-form-dropdown
v-model="vars.status"
label="Status"
:options="[{ v: 'new', p: 'New' }, { v: 'in_progress', p: 'In Progress' }, { v: 'done', p: 'Done' }]"
></e8-form-dropdown>
<p>Selected: {{ vars.status }}</p>
<!-- Dropdown with hidden placeholder and center alignment -->
<e8-form-dropdown
v-model="vars.priority"
label="Priority"
:options="{low: 'Low', medium: 'Medium', high: 'High'}"
hide-placeholder
horizontal-alignment="center"
></e8-form-dropdown>
<!-- Custom option slot -->
<e8-form-dropdown
v-model="vars.language"
label="Language"
:options="[{ v: 'en', p: 'English' }, { v: 'fr', p: 'Français' }, { v: 'es', p: 'Español' }]"
>
<template #option="{ option }"> 🌐 {{ option.value }} / {{ option.presentation }}</template>
</e8-form-dropdown>Selected: {{ vars.status }}
Properties
| Property | Description | Type | Default |
|---|---|---|---|
| horizontal-alignment | Text alignment of the selected value. | E8TextHorizontalAlignments | 'left' |
| hide-placeholder | Hides the placeholder option from the list. | boolean | false |
| label | Text displayed next to the dropdown; set to false to hide label. | string | boolean | — |
| options | List of selectable items. | E8FormInputOptionsType | — |
| placeholder | Placeholder text shown when no option is selected. | string | — |
| readonly | Makes the control read-only. | boolean | false |
| size | Size of the input. | E8ElementSizes | 'default' |
| tooltip | Tooltip text displayed on hover. | string | — |
| v-model | Bound value representing the selected option. | string | — |
| visible | Controls the visibility of the dropdown. | boolean | true |