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	2.1.0
Install (React)	npm install @nylas/react
Import (React)	import { SelectDropdown } from '@nylas/react';
Import (CDN)	You do not need to individually import the component, just import the parent component either nylas-scheduling or nylas-scheduler-editor.

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
emptyValue		Allows to set the empty value of the dropdown	string	'Select an option'
errorMessage		The custom error message to display when the value is empty or null and the dropdown is required	string	''
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	''
readOnly		The property to make the dropdown read-only. If true, the dropdown cannot be edited.	boolean	false
required		If true, the dropdown is required for form submission	boolean	false
searchPlaceholder		The placeholder for the search input	string	'Search'
themeConfig		The theme configuration.	undefined | { '--nylas-primary'?: string | undefined; '--nylas-info'?: string | undefined; '--nylas-success'?: string | undefined; '--nylas-warning'?: string | undefined; '--nylas-error'?: string | undefined; '--nylas-error-pressed'?: string | undefined; '--nylas-base-0'?: string | undefined; '--nylas-base-25'?: string | undefined; '--nylas-base-50'?: string | undefined; '--nylas-base-100'?: string | undefined; '--nylas-base-200'?: string | undefined; '--nylas-base-300'?: string | undefined; '--nylas-base-400'?: string | undefined; '--nylas-base-500'?: string | undefined; '--nylas-base-600'?: string | undefined; '--nylas-base-700'?: string | undefined; '--nylas-base-800'?: string | undefined; '--nylas-base-900'?: string | undefined; '--nylas-base-950'?: string | undefined; '--nylas-color-blue-50'?: string | undefined; '--nylas-color-blue-100'?: string | undefined; '--nylas-color-blue-300'?: string | undefined; '--nylas-color-blue-500'?: string | undefined; '--nylas-color-blue-700'?: string | undefined; '--nylas-color-blue-900'?: string | undefined; '--nylas-color-red-50'?: string | undefined; '--nylas-color-red-100'?: string | undefined; '--nylas-color-red-300'?: string | undefined; '--nylas-color-red-500'?: string | undefined; '--nylas-color-red-700'?: string | undefined; '--nylas-color-red-900'?: string | undefined; '--nylas-color-green-50'?: string | undefined; '--nylas-color-green-100'?: string | undefined; '--nylas-color-green-300'?: string | undefined; '--nylas-color-green-500'?: string | undefined; '--nylas-color-green-700'?: string | undefined; '--nylas-color-green-900'?: string | undefined; '--nylas-color-yellow-50'?: string | undefined; '--nylas-color-yellow-100'?: string | undefined; '--nylas-color-yellow-300'?: string | undefined; '--nylas-color-yellow-500'?: string | undefined; '--nylas-color-yellow-700'?: string | undefined; '--nylas-color-yellow-900'?: string | undefined; '--nylas-color-purple-50'?: string | undefined; '--nylas-color-purple-100'?: string | undefined; '--nylas-color-purple-300'?: string | undefined; '--nylas-color-purple-500'?: string | undefined; '--nylas-color-purple-700'?: string | undefined; '--nylas-color-purple-900'?: string | undefined; '--nylas-color-sky-50'?: string | undefined; '--nylas-color-sky-100'?: string | undefined; '--nylas-color-sky-300'?: string | undefined; '--nylas-color-sky-500'?: string | undefined; '--nylas-color-sky-700'?: string | undefined; '--nylas-color-sky-900'?: string | undefined; '--nylas-color-black'?: string | undefined; '--nylas-color-grey-900'?: string | undefined; '--nylas-color-grey-800'?: string | undefined; '--nylas-color-grey-700'?: string | undefined; '--nylas-color-grey-600'?: string | undefined; '--nylas-color-grey-500'?: string | undefined; '--nylas-color-grey-400'?: string | undefined; '--nylas-color-grey-300'?: string | undefined; '--nylas-color-grey-200'?: string | undefined; '--nylas-color-grey-100'?: string | undefined; '--nylas-color-grey-50'?: string | undefined; '--nylas-color-white'?: string | undefined; '--nylas-font-family'?: string | undefined; '--nylas-font-size'?: string | undefined; '--nylas-border-radius'?: string | undefined; '--nylas-border-radius-2x'?: string | undefined; '--nylas-border-radius-3x'?: string | undefined; }	undefined
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