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.0 |
Install (React) | npm install @nylas/react |
Import (React) | import { SelectDropdown } from '@nylas/react'; |
Properties
Property | Attribute | Description | Type | Default |
---|---|---|---|---|
defaultSelectedOption | — | The default selected option | DropdownOption | null | null |
dropdownButtonText | dropdown-button-text | 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 | label | The label for the dropdown, skipped if no label is provided | string | undefined | undefined |
name (required) | name | The name of the dropdown | string | undefined |
options | — | The options to display in the dropdown | DropdownOption[] | [] |
pluralizedLabel | pluralized-label | Show pluralized label for the selected option. This is s tring that is appended to the selected option label as a suffix. | string | '' |
required | required | If true, the dropdown is required for form submission | boolean | false |
withChevron | with-chevron | Should show chevron on button | boolean | true |
withSearch | with-search | 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; }> |
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