OutlinedSelect

Imports

import {OutlinedSelect} from 'material-expressive-react';
import {OutlinedSelect} from 'material-expressive-react/select';

Props

Prop	Type	Default	Required	Description
__@createValidator@35005	(() => SelectValidator)		No
__@getFormValue@35009	(() => string)		No
__@getValidityAnchor@35007	(() => Field)		No
__@onReportValidity@35003	((invalidEvent: Event | null) => void)		No
__@VALUE@35023	string		No
addController	((controller: ReactiveController) => void)		No	Registers a ReactiveController to participate in the element's reactive update cycle. The element automatically calls into any registered controllers during its lifecycle callbacks. If the element is connected when addController() is called, the controller's hostConnected() callback will be immediately called. @category controllers
attributeChangedCallback	((name: string, _old: string | null, value: string | null) => void)		No	Synchronizes property values when attributes change. Specifically, when an attribute is set, the corresponding property is set. You should rarely need to implement this callback. If this method is overridden, super.attributeChangedCallback(name, _old, value) must be called. See responding to attribute changes on MDN for more information about the attributeChangedCallback. @category attributes
clampMenuWidth	boolean		No	Clamps the menu-width to the width of the select.
connectedCallback	(() => void)		No	Invoked when the component is added to the document's DOM. In connectedCallback() you should setup tasks that should only occur when the element is connected to the document. The most common of these is adding event listeners to nodes external to the element, like a keydown event handler added to the window. ts<br/>connectedCallback() &#123;<br/> super.connectedCallback();<br/> addEventListener('keydown', this._handleKeydown);<br/>&#125;<br/> Typically, anything done in connectedCallback() should be undone when the element is disconnected, in disconnectedCallback(). @category lifecycle
disabled	boolean		No	Whether or not the element is disabled.
disconnectedCallback	(() => void)		No	Invoked when the component is removed from the document's DOM. This callback is the main signal to the element that it may no longer be used. disconnectedCallback() should ensure that nothing is holding a reference to the element (such as event listeners added to nodes external to the element), so that it is free to be garbage collected. ts<br/>disconnectedCallback() &#123;<br/> super.disconnectedCallback();<br/> window.removeEventListener('keydown', this._handleKeydown);<br/>&#125;<br/> An element may be re-connected after being disconnected. @category lifecycle
displayText	string		No	Text to display in the field. Only set for SSR.
error	boolean		No	Gets or sets whether or not the select is in a visually invalid state. This error state overrides the error state controlled by reportValidity().
errorText	string		No	The error message that replaces supporting text when error is true. If errorText is an empty string, then the supporting text will continue to show. This error message overrides the error message displayed by reportValidity().
formResetCallback	(() => void)		No	A callback for when the form requests to reset its value. Typically, the default value that is reset is represented in the attribute of an element. This means the attribute used for the value should not update as the value changes. For example, a checkbox should not change its default checked attribute when selected. Ensure form values do not reflect.
formStateRestoreCallback	((state: string) => void)		No	A callback for when the form restores the state of a component. For example, when a page is reloaded or forms are autofilled.
getUpdateComplete	(() => Promise<boolean>)		No	Override point for the updateComplete promise. It is not safe to override the updateComplete getter directly due to a limitation in TypeScript which means it is not possible to call a superclass getter (e.g. super.updateComplete.then(...)) when the target language is ES5 (https://github.com/microsoft/TypeScript/issues/338). This method should be overridden instead. For example: ts<br/>class MyElement extends LitElement &#123;<br/> override async getUpdateComplete() &#123;<br/> const result = await super.getUpdateComplete();<br/> await this._myChild.updateComplete;<br/> return result;<br/> &#125;<br/>&#125;<br/>
hasLeadingIcon	boolean		No	Whether or not the text field has a leading icon. Used for SSR.
hasUpdated	boolean		No	Is set to true after the first update. The element code cannot assume that renderRoot exists before the element hasUpdated. @category updates
isUpdatePending	boolean		No	True if there is a pending update as a result of calling requestUpdate(). Should only be read. @category updates
label	string		No	The floating label for the field.
menuAlign	enum		No	Whether the menu should be aligned to the start or the end of the select's textbox.
menuPositioning	enum		No	Whether or not the underlying md-menu should be position: fixed to display in a top-level manner, or position: absolute. position:fixed is useful for cases where select is inside of another element with stacking context and hidden overflows such as md-dialog.
name	string		No	The HTML name to use in form submission.
noAsterisk	boolean		No	Disables the asterisk on the floating label, when the select is required.
onChange	((event: Event) => void)		No
onClosed	((event: Event) => void)		No
onClosing	((event: Event) => void)		No
onInput	((event: Event) => void)		No
onOpened	((event: Event) => void)		No
onOpening	((event: Event) => void)		No
options	SelectOption[]		No
quick	boolean		No	Opens the menu synchronously with no animation.
removeController	((controller: ReactiveController) => void)		No	Removes a ReactiveController from the element. @category controllers
renderOptions	RenderOptions		No	@category rendering
renderRoot	HTMLElement | DocumentFragment		No	Node or ShadowRoot into which element DOM should be rendered. Defaults to an open shadowRoot. @category rendering
requestUpdate	((name?: PropertyKey, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown>, useNewValue?: boolean | undefined, newValue?: unknown) => void) | undefined		No	Requests an update which is processed asynchronously. This should be called when an element should update based on some state not triggered by setting a reactive property. In this case, pass no arguments. It should also be called when manually implementing a property setter. In this case, pass the property name and oldValue to ensure that any configured property options are honored. @param name name of requesting property @param oldValue old value of requesting property @param options property options to use instead of the previously configured options @param useNewValue if true, the newValue argument is used instead of reading the property value. This is important to use if the reactive property is a standard private accessor, as opposed to a plain property, since private members can't be dynamically read by name. @param newValue the new value of the property. This is only used if useNewValue is true. @category updates
required	boolean		No	Whether or not the select is required.
reset	(() => void)		No	Reset the select to its default value.
select	((value: string) => void)		No	Selects an option given the value of the option, and updates MdSelect's value.
selectedIndex	number		No	The index of the currently selected option. Note: For SSR, set [selected] on the requested option and displayText rather than setting selectedIndex setting selectedIndex will incur a DOM query.
selectedOptions	SelectOption[]		No	Returns an array of selected options. NOTE: md-select only supports single selection.
selectIndex	((index: number) => void)		No	Selects an option given the index of the option, and updates MdSelect's value.
showPicker	(() => void)		No	Shows the picker. If it's already open, this is a no-op.
supportingText	string		No	Conveys additional information below the select, such as how it should be used.
typeaheadDelay	number		No	The max time between the keystrokes of the typeahead select / menu behavior before it clears the typeahead buffer.
updateComplete	Promise<boolean>		No	Returns a Promise that resolves when the element has completed updating. The Promise value is a boolean that is true if the element completed the update without triggering another update. The Promise result is false if a property was set inside updated(). If the Promise is rejected, an exception was thrown during the update. To await additional asynchronous work, override the getUpdateComplete method. For example, it is sometimes useful to await a rendered element before fulfilling this Promise. To do this, first await super.getUpdateComplete(), then any subsequent state. @return A promise of a boolean that resolves to true if the update completed without triggering another update. @category updates
value	string		No	The value of the currently selected option. Note: For SSR, set [selected] on the requested option and displayText rather than setting value setting value will incur a DOM query.

Events

• onChange → DOM event change
• onInput → DOM event input
• onOpening → DOM event opening
• onOpened → DOM event opened
• onClosing → DOM event closing
• onClosed → DOM event closed

Slots

Material Web components frequently use named slots. In React, you can pass slot="..." on children (e.g. <Icon slot="icon" />).

If you need to slot a child component that does not accept a slot prop, use the Slotted utility (see Utilities → Slotted).

Examples

See Storybook for live examples and variants.