Skip to main content
LocalTapiola Turva

Select ready

Select lets user choose one option from an options menu. Consider using select when you have 4 or more options. Select component supports any content type.

Examples

Open in new window
<duet-select label="Kaupunki" expand value="valitse"></duet-select>

<script>
  // Save a reference to the above select component
  var select = document.querySelector("duet-select")

  // Set select menu items and their values
  select.items = [
    { label: "Valitse…", value: "valitse" },
    { label: "Helsinki", value: 1 },
    { label: "Tampere", value: 2 },
    { label: "Vantaa", value: 3 },
    { label: "Espoo", value: 4 }
  ]

  // Listen for change events in the select
  select.addEventListener("duetChange", function(e) {
    console.log("Change event in select", e)
  })
</script>
Open in new window
<duet-select label="Kaupunki" expand value="2"></duet-select>

<script>
  var select = document.querySelector("duet-select");

  select.items = [
    { label: "Valitse…", value: "valitse" },
    { label: "Helsinki", value: 1 },
    { label: "Tampere", value: 2 },
    { label: "Vantaa", value: 3 },
    { label: "Espoo", value: 4 }
  ];
</script>
Open in new window
<duet-select disabled label="Kaupunki" expand value="valitse"></duet-select>

<script>
  var select = document.querySelector("duet-select");

  select.items = [
    { label: "Valitse…", value: "valitse" },
    { label: "Helsinki", value: 1 },
    { label: "Tampere", value: 2 },
    { label: "Vantaa", value: 3 },
    { label: "Espoo", value: 4 }
  ];
</script>

Properties #

PropertyAttributeDescriptionTypeDefault
accessibleActiveDescendantaccessible-active-descendantIndicates the id of a related component’s visually focused element.stringundefined
accessibleControlsaccessible-controlsUse this prop to add an aria-controls attribute. Use the attribute to indicate the id of a component controlled by this component.stringundefined
accessibleOwnsaccessible-ownsIndicates the id of a component owned by the select.stringundefined
disableddisabledMakes the select component disabled. This prevents users from being able to interact with the select, and conveys its inactive state to assistive technologies.booleanfalse
errorerrorDisplay the select in error state along with an error message.string""
expandexpandExpands the input to fill 100% of the container width.booleanfalse
identifieridentifierAdds a unique identifier for the select.stringundefined
items--An array of items to choose fromany[]undefined
labellabelLabel for the select.string"label"
labelHiddenlabel-hiddenVisually hide the label, but still show it to screen readers.booleanfalse
marginmarginControls the margin of the component. Can be one of: "auto", "none".string"auto"
namenameName of the select.stringundefined
roleroleDefines a specific role attribute for the select.stringundefined
themethemeTheme of the select. Can be one of: "default", "turva".string""
tooltiptooltipTooltip to display next to the label of the input.string""
valuevalueThe selected value of the selectstringundefined

Events #

EventDescriptionType
duetBlurEmitted when the select loses focus.CustomEvent<any>
duetChangeCallback for when the value changed.CustomEvent<any>
duetFocusEmitted when the select has focus.CustomEvent<any>

Methods #

setFocus() => Promise<void> #

Sets focus on the specified duet-select. Use this method instead of the global
select.focus().

Returns #

Type: Promise<void>

Dependencies #

Used by #

Depends on #

Graph #

graph TD;
  duet-select --> duet-label
  duet-select --> duet-tooltip
  duet-tooltip --> duet-visually-hidden
  duet-tab-group --> duet-select
  style duet-select fill:#f9f,stroke:#333,stroke-width:4px

Integration

For integration, events and theming guidelines, please see Using Components. That page explains how to implement and use Duet’s components across different technologies like Angular, React or Vanilla JavaScript.