AXA Dropdown

This component represents a styled, enhanced replacement for native HTML <select>. The component is responsive, falling back to native look-and-feel under mobile viewports. Keyboard operation is supported.

Controlled-Component behaviour is supported.

Properties

defaultTitle

The String-valued attribute defaultTitle sets the initial title of the closed dropdown (default: first selected item).

Its intended use is primarily for native-HTML situations where server-generated items describe the choices proper, and a separate title like defaulttitle="Please select" prompts the user to make a choice.

value

The String-valued attribute value sets the selected dropdown option to the one with matching value. When reading value, it returns the currently selected value.

native

When true, the Boolean attribute native enforces native <select> UI look-and-feel for open dropdowns irrespective of window widths.

checkMark

When true, the Boolean attribute checkmark shows an animated checkmark to the right of the dropdown.

invalid

The boolean attribute invalid serves to indicate the validity of the element (default: false). If true, it sets the element into a visual error state.

error

The string-valued error provides error text as HTML. It sets the element into a visual error state, if invalid is true.

disabled

The Boolean attribute disabled disables the underlying element, both visually and functionally.

Note that a disabled dropdown will not participate in form submission.

maxHeight

When set to empty string (or used as boolean attribute), the String attribute maxHeight limits the height of an active dropdown to a sensible default and allows scrolling through its options.

When a number is given, the maxheight of the options will be limited to that value.

If you do not set this attribute, all the options will be displayed without any scrolling mechanism.

This property is most useful in space-constrained scenarios or with many options, e.g. in a country selector.

items

Is an array of objects to set the options of the dropdown. The objects must have a name and value set. See an example at the top of this Readme.

| item | Details | | -------- | ---------------------------------------------------------------- | | name | The text that is displayed | | value | The value that is submitted via form submit | | selected | boolean: just set true to one of the options to preselect option |

cropText

This removes the ellipsis dots when the value becomes too long to fully display on the dropdown element. It also reduces the paddings within the dropdown, for a more minified look.

Example: +41 Switzer... => +41 Switzerla

showValue

Display the value instead of the name (from the items array) as selected value in the dropdown.

Callback Properties

onChange

The function-valued attribute onChange can be used as a callback prop for React and other frameworks. The callback is invoked whenever the selected dropdown option changes. Its sole parameter item has the Typescript signature { value: string, name: string, label: string, index: number }.

| target | Details | | ------ | --------------------------------------------------- | | value | The currently selected value | | name | The name of the element you set via property name | | label | Visible text corresponding to value | | index | 0-based index of currently selected option |

If a defaultTitle is set, the first element has index 1, because the title gets index 0.

Important: This attribute can also be used natively. However, in this case the event parameter passed conforms to the change event described below.

onFocus, onBlur

The function-valued attributes onFocus, onBlur can be used as a callback prop for React and other frameworks. The respective callback is invoked when the element receives or loses focus, respectively. Its only parameter is the original native event.

Events

axa-change, change

If not in controlled-component mode, two custom events axa-change and change are fired on <axa-dropdown> itself whenever the onChange callback from above gets invoked.

axa-change's event detail is the currently selected value (a string).

change's event detail is an object that is described above at onChange.

Both events do not bubble up through the DOM.