Skip to content

select-dropdown

The select-dropdown allows users to select an option from a list of options. This element is used in the scheduling form to input dropdown type inputs.

Properties

`defaultSelectedOption?`


Name	`defaultSelectedOption`
Description	The default selected option.
Type	`DropdownOption \| null`
Default	`null`

`dropdownButtonText?`


Name	`dropdownButtonText`
Description	Overrides the select dropdown to be used as a button with `dropdownButtonText` representing actions and `dropdownText` name on the dropdown instead of selected value.
Type	string \| `undefined`

`emptyValue?`


Name	`emptyValue`
Description	Allows to set the empty value of the dropdown.
Type	string
Default	`'Select an option'`

`errorMessage?`


Name	`errorMessage`
Description	The custom error message to display when the value is empty or `null` and the dropdown is required.
Type	string
Default	`''`

`label?`


Name	`label`
Description	The label for the dropdown, skipped if no label is provided.
Type	string \| `undefined`

`name?`


Name	`name`
Description	The name of the dropdown.
Type	string

`options?`


Name	`options`
Description	The options to display in the dropdown.
Type	`DropdownOption[]`
Default	`[]`

`pluralizedLabel?`


Name	`pluralizedLabel`
Description	Show pluralized label for the selected option. This is a string that is appended to the selected option label as a suffix.
Type	string
Default	`''`

`readOnly?`


Name	`readOnly`
Description	The property to make the dropdown read-only. If `true`, the dropdown cannot be edited.
Type	boolean
Default	`false`

`required?`


Name	`required`
Description	If `true`, the dropdown is required for form submission.
Type	boolean
Default	`false`

`searchPlaceholder?`


Name	`searchPlaceholder`
Description	The placeholder for the search input.
Type	string
Default	`'Search'`

`themeConfig?`


Name	`themeConfig`
Description	The theme configuration.
Type	`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; }`

`withChevron?`


Name	`withChevron`
Description	Should show chevron on button.
Type	boolean
Default	`true`

`withSearch?`


Name	`withSearch`
Description	Should show search input.
Type	boolean
Default	`true`

Events

Event	Description
`nylasFormDropdownChanged`	Fired when the selected option is changed.
`nylasFormDropdownDefaultSelected`	Fired when the default selected option is set, on element load.

CSS parts

Part	Description
`sd_dropdown`	The dropdown container.
`sd_dropdown-button`	The dropdown button.
`sd_dropdown-button-selected-label`	The dropdown label.
`sd_dropdown-content`	The dropdown content.
`sd_dropdown-labelhtml`
`sd_dropdown_label`	The dropdown label.