Select Dropdown Component - Scheduler UI Components

Form Components

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.3.3`
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`
`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`	`''`
`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