Select

A Select is a form element that provides users with a way to select amongst a set of options.

Usage

When to use

• As a form element that allows the user to make a selection from a pre-defined set of options.

When not to use

• When a user can select more than one option, consider Checkbox.
• When there are fewer than 5 options, consider Radio.
• To display a list of buttons or links in a menu, consider Dropdown.

Required and optional

For complex forms, indicate required fields. This is the most explicit and transparent method and ensures users don’t have to make assumptions. Read more about best practices for marking required fields in forms.

If the field is required, consider adding a default value to help the user avoid an error.

For shorter, simpler forms (e.g., login/signup and feedback requests), indicate optional fields instead.

Error validation

For error validation recommendations, refer to the Form patterns documentation.

How to use this component

There are two ways to use <i80-select>:

• the base control: leave the label out and write your own <select> inside the element, which is kept as it is.
• the field: give the element a label attribute and it renders the <select> control, with label, helper text, and error messaging (in a wrapping container).

We recommend using the field as it provides built-in accessibility functionality. Use the base control if needing to achieve custom layouts or for special use cases not covered by the field.

The field

The basic invocation requires a label: the label attribute. This creates:

• a <label> element with a for attribute automatically associated with the select ID attribute.
• a <select> control with an automatically generated ID attribute, and the <option> elements you write inside the element as its children.

<i80-select label="Target infrastructure" name="demo-target-infrastructure">
  <option value="Kubernetes">Kubernetes</option>
  <option value="Other">Other</option>
</i80-select>

Selected option

Pass the native selected attribute to pre-select one of the options, or set the element’s value attribute to that option’s value.

<i80-select label="Target infrastructure" name="demo-target-infrastructure">
  <option value="Kubernetes">Kubernetes</option>
  <option value="Other" selected>Other</option>
</i80-select>

Grouped options

To group similar sets of options, use the <optgroup> tag among the options.

<i80-select label="Target infrastructure" name="demo-target-infrastructure">
  <optgroup label="Most common">
    <option value="Kubernetes">Kubernetes</option>
    <option value="AWS">AWS</option>
  </optgroup>
  <optgroup label="Others">
    <option value="CloudWise" selected>CloudWise</option>
    <option value="SWA">SWA</option>
    <option value="Other">Other</option>
  </optgroup>
</i80-select>

Helper text

You can add extra information to the field using the helper-text attribute. When helper text is added, the component automatically adds an aria-describedby attribute to the select control, associating it with the automatically generated ID of the helper text element.

<i80-select label="Target infrastructure" helper-text="The target infrastructure is where you want to deploy your apps." name="demo-target-infrastructure">
  <option value="Kubernetes">Kubernetes</option>
  <option value="Other">Other</option>
</i80-select>

Required vs. optional

Use the required and optional attributes to add a visual indication that the field is "required" or "optional".

<i80-select label="Target infrastructure" helper-text="The target infrastructure is where you want to deploy your apps." name="demo-target-infrastructure" required>
  <option value=""></option>
  <option value="Kubernetes">Kubernetes</option>
  <option value="Other">Other</option>
</i80-select>
<i80-select label="Target infrastructure" helper-text="The target infrastructure is where you want to deploy your apps." name="demo-target-infrastructure" optional>
  <option value=""></option>
  <option value="Kubernetes">Kubernetes</option>
  <option value="Other">Other</option>
</i80-select>

Validation

To indicate a field is invalid, set the error attribute to the message: it shows the error and marks the control invalid. Use the invalid attribute on its own for the invalid appearance without a message.

<i80-select label="Target infrastructure" helper-text="The target infrastructure is where you want to deploy your apps." name="demo-target-infrastructure" error="Error: select one of the options.">
  <option value=""></option>
  <option value="Kubernetes">Kubernetes</option>
  <option value="Other">Other</option>
</i80-select>

Custom control ID

If needing a custom ID for the control instead of the one automatically generated by the component, write the <select> yourself inside the element with that id.

In this case all the internal references (id/for/aria-describedby) between the different parts of the field are still automatically generated and will use the custom ID provided.

<i80-select label="Target infrastructure" helper-text="The target infrastructure is where you want to deploy your apps.">
  <select name="demo-target-infrastructure" id="my-control">
    <option value="Kubernetes">Kubernetes</option>
    <option value="Other">Other</option>
  </select>
</i80-select>

Native HTML attributes

The element passes name, multiple, size and autocomplete on to the <select> it creates. For any other native behavior, write the <select> yourself inside the element and it is kept as it is, with all its attributes. The <option> and <optgroup> elements are your own markup either way, so they take any HTML attributes you give them.

<i80-select label="Target infrastructure" name="demo-infrastructure" multiple size="8">
  <optgroup label="Most common">
    <option value="Kubernetes">Kubernetes</option>
    <option value="AWS">AWS</option>
    <option value="Azure" disabled>Azure</option>
  </optgroup>
  <optgroup label="Others">
    <option value="Alibaba" selected>Alibaba</option>
    <option value="CloudWise" selected>CloudWise</option>
    <option value="SWA">SWA</option>
    <option value="Other">Other</option>
  </optgroup>
</i80-select>

Custom width

By default, the select control width is set to fill the parent container.

Pass a custom width for the control using the width attribute.

<i80-select label="Target infrastructure" name="demo-target-infrastructure" width="200px">
  <option value="Kubernetes">Kubernetes</option>
  <option value="Other">Other</option>
</i80-select>

The base control

The base control is intended for rare cases where the field can’t be used and a custom implementation is needed. Most of the details for the field also apply to it, but see the Component API for more details.

Write the <select> inside the element with its own aria-label.

<i80-select>
  <select name="demo-target-infrastructure" aria-label="Target infrastructure" required>
    <option value="Kubernetes">Kubernetes</option>
    <option value="Other">Other</option>
  </select>
</i80-select>

Attributes

<i80-select> renders this component. Everything it understands:

The tag keeps any native element you write inside it, so a server-rendered form, link or button works as it is. See Web Components for loading i80.js and the reference for these examples running.

Anatomy

States

For general content recommendations, refer to the Primitives documentation.

Options list

• Keep option content clear and concise; avoid full sentences.
• Avoid repeating the same word at the beginning of list options.
• Order the options in a logical way based on the use case. For example:
  • default or most commonly selected options first
  • alphabetically
  • numerically

Conformance

A labelled select

An <i80-select> with a label is conformant when used as directed, and is what we recommend by default. It is a native <select>, only styled, so the list of options, the keyboard and the touch behavior are the browser’s own; the label is a real <label for> pointing at it.

A select without a label

A select is not conformant until it has an accessible name. If you leave the label attribute off, put an aria-label on the element instead, or write your own <label for="…"> and <select> inside the tag.

Interactions

Because the control is a native <select>, the browser draws and operates the option list: the same keys, the same touch behavior and the same screen reader announcements as anywhere else on the platform.

Applicable WCAG Success Criteria (Reference)

This section is for reference only, some descriptions have been truncated for brevity. This component intends to conform to the following WCAG Success Criteria:

Support

If any accessibility issues have been found within this component, let us know by submitting an issue.

0.1.0

Første i80-version (fork af upstream, se core/UPSTREAM.md).