Form Components
select-dropdown
Overview
The select-dropdown component is a dropdown that allows users to select an option from a list of options.
This component is used in the scheduling form to input dropdown type inputs.
| Version | 1.1.4 |
| Install (React) | npm install @nylas/react |
| Import (React) | import { SelectDropdown } from '@nylas/react'; |
| Import (CDN) | <script type="module">
import { defineCustomElement } from "https://cdn.jsdelivr.net/npm/@nylas/web-elements@latest/dist/cdn/select-dropdown/select-dropdown.es.js";
defineCustomElement();
</script> |
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
defaultSelectedOption | The default selected option | DropdownOption | null | null | |
dropdownButtonText | Overrides the select dropdown to be used as a button with dropdownButtonText representing actions & dropdownText name on the dropdown intead of selected value | string | undefined | undefined | |
label | The label for the dropdown, skipped if no label is provided | string | undefined | undefined | |
name _(required)_ | The name of the dropdown | string | undefined | |
options | The options to display in the dropdown | DropdownOption[] | [] | |
pluralizedLabel | Show pluralized label for the selected option. This is s tring that is appended to the selected option label as a suffix. | string | '' | |
required | If true, the dropdown is required for form submission | boolean | false | |
withChevron | Should show chevron on button | boolean | true | |
withSearch | Should show search input | boolean | true |
Events
| Event | Description | Type |
|---|---|---|
nylasFormDropdownChanged | This event is fired when the selected option is changed | CustomEvent<{ value: string; name: string; error?: string | undefined; label?: string | undefined; }> |
nylasFormDropdownDefaultSelected | This event is fired when the default selected option is set, on component load | CustomEvent<{ value: string; name: string; error?: string | undefined; label?: string | undefined; }> |
Shadow Parts
| Part | Description |
|---|---|
"sd_dropdown" | The dropdown container |
"sd_dropdown-button" | The dropdown button |
"sd_dropdown-button-selected-label" | The selected option label |
"sd_dropdown-content" | The dropdown content |
"sd_dropdown-labelhtml" | |
"sd_dropdown_label" | The dropdown label |
Built with StencilJS