@finastra/select NPM

Select

Selects display a list of choices in a dropdown menu. \ fds-select extends Material web's mwc-select-base.

Usage

Import

npm i @finastra/select

import '@finastra/select';
...
<fds-select>
    <fds-list-item value="1">Item 1</fds-list-item>
    <fds-list-item value="2">Item 2</fds-list-item>
    <fds-list-item value="3">Item 3</fds-list-item>
</fds-select>

API

Properties

Property	Attribute	Modifiers	Type	Default	Description
`dense`	`dense`		`boolean`	false	Smaller select field size.
`disabled`	`disabled`		`boolean`	false	Disabled state for the component. When `disabled` is set to `true`, thecomponent will not be added to form submission.
`fixedMenuPosition`	`fixedMenuPosition`		`boolean`	false	Sets the dropdown menu's position to fixed. This is useful when the select is inside of a stacking context e.g. inside of an fds-dialog.
`helper`	`helper`		`string`	""	Helper text to display below the input. Display default only when focused.
`icon`	`icon`		`string`	""	Leading icon to display in input. See `mwc-icon`.
`index`	`index`		`number`	-1	Index of selected list item.
`items`	`items`		`ListItemBase[]`	"[]"	List of selectable items.
`label`	`label`		`string`	""	Sets label value.
`labelInside`	`labelInside`		`boolean`	false	Keep the label in the input.
`name`			`string`
`naturalMenuWidth`			`boolean`
`outlined`	`outlined`		`boolean`	true	Whether or not to show the material outlined variant.
`override`
`required`	`required`		`boolean`	false	Displays error state if value is empty and input is blurred.
`ripple`		readonly	`Promise<RippleInterface \\| null> \\| undefined`		Implement ripple getter for Ripple integration with mwc-formfield
`selected`	`selected`		`ListItemBase \\| null`	null	Selected list item element type ListItemBase.
`styles`			`CSSResult[]`	"styles"
`validateOnInitialRender`			`boolean`
`validationMessage`	`validationMessage`		`string`	""	Message to show in the error color when the textfield is invalid. (Helper text will not be visible).
`validity`		readonly	`ValidityState`
`validityTransform`			`((value: string, nativeValidity: ValidityState) => Partial<ValidityState>) \\| null`
`value`	`value`		`string`	""	The select control's value determined by the value property of the currently selected list item.

Methods

Method	Type
`blur`	`(): void`
`checkValidity`	`(): boolean`
`click`	`(): void`
`focus`	`(): void`
`layout`	`(updateItems?: boolean \\| undefined): Promise<void>`
`layoutOptions`	`(): Promise<void>`
`renderOutline`	`(): TemplateResult<1> \\| unique symbol`
`reportValidity`	`(): boolean`
`select`	`(index: number): void`
`setCustomValidity`	`(message: string): void`