This component is intended to exactly replicate a native HTML select. Minor differences are explained below.


Similar to the native case, keyboard navigation through arrow or letter keys is available, in both expanded and collapsed states. However, the options (which appeared declared as <u4-option value="some value">some content</u4-option> in your app) have both value (the real data associated with the option) and content (which is what is visible to the user), it is therefore worth pointing out that letter-based keyboard navigation takes into account the content, not the value, of the options.

A "clear" button has been added. Notice that the clearable property is unrelated to the field being required (see below), however, it might make sense functionally to set clearable to false if required is set to true.

Hovering over an option gives the latter a specific style which is different from the selected option style. This is unlike the native case, which we find confusing.

JSON structure example

"viewDefinition": {
    "children": {
        "selectComponent": {
            "type": "select",
            "id": "selectId",
            "description":  "select description",
            "disabled": true,
            "height": "l",
            "inlineLabel": true,
            "label": "select label",
            "placeholder": "select placeholder",
            "readOnly": true,
            "width": "m",
            "required": true,
            "value": "selected value",
            "clearable": true,
            "displayField": "{invoiceNumber}",
            "valueField": "{id}",
            "options": {
                "selected value": "Hello, I came already selected",
                "another value": "choose me!",
                "and another one": "choose me!"

Do's and Don'ts

For more details, refer to Text input Usage and Visual styleguides in our Storybook