Select

Usage

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

Behaviour

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!"
            }
        }
    }
}

• type (String) - write "select"
• id (String) - an id for the component
• description (String)
• disabled (Boolean) - set to true in order to disable the component
  • Default: false
• height (String) (Optional) - defines the height of the component, choose from:
• Allowed values: {l, m, s, xs}
• Default: m
• inlineLabel (Boolean) - align label and component horizontally
  • Default: false
• label (String) - a label
• placeholder (String) - text that appears in the form control when it has no value set
• readOnly (Boolean) - if true the value will not be editable
  • Default: false
• width (String) (Optional) - defines the height of component, choose from:
• Allowed values: {fit, l, m, s, xs}
• Default: fit
• required (Boolean) - set to true to set the field as required
• Default: false
• value (String) - value initially selected. By default it will have no selected value at all
• Default: ""
• clearable (Boolean) - whether the component can be left without selected value
• Default: true
• options - An object in which the keys will be the option values (this forces them to be unique), and the values will be the labels
• valueField (String) - a template that defines the field to use for the value representing the option.
• displayField (String) - a template that defines the field to use for the text of the options.

Do's and Don'ts

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