Select - Developer documentation

Example code

<juo-select id="preview-select" placeholder="Pick an option"></juo-select>
<script>
  document.getElementById('preview-select').options = [
    { label: 'Option 1', value: 'opt1' },
    { label: 'Option 2', value: 'opt2' },
    { label: 'Option 3', value: 'opt3' },
  ];
</script>

Accessible select dropdown built on Reka UI. Supports single selection, an optional empty/default option, sizes, and an inline error message.

Usage

<juo-select placeholder="Select">Select</juo-select>

Reference

Parameters

attr · boolean

When true, prevents the user from interacting with Select

prop · AcceptableValue | AcceptableValue[]

The controlled value of the Select.

attr · string

The name of the field. Submitted with its owning form as part of a name/value pair.

attr · boolean

When true, indicates that the user must set the value before the owning form can be submitted.

attr · boolean

The controlled open state of the Select.

attr · boolean

The open state of the select when it is initially rendered. Use when you do not need to control its open state.

attr · prop · string | ((a: AcceptableValue, b: AcceptableValue) => boolean)

Use this to compare objects by a particular field, or pass your own comparison function for complete control over how objects are compared.Complex values (((a: AcceptableValue, b: AcceptableValue) => boolean)) must be assigned via the by JS property instead.

prop · Direction

The reading direction of the combobox when applicable. <br> If omitted, inherits globally from ConfigProvider or assumes LTR (left-to-right) reading mode.

attr · boolean

Whether multiple options can be selected or not.

attr · string

Native html input autocomplete attribute.

prop · { label: string; value: string | number | null; icon?: Component; disabled?: boolean; }[]

default:"[]"

attr · string

prop · Component

The value of the select when initially rendered.Complex values ((string | number | null)[]) must be assigned via the defaultValue JS property instead.

attr · md | sm | lg | xl

default:"md"

attr · string

attr · boolean

attr · string

Events

The element dispatches native CustomEvents; the payload is in event.detail.

CustomEvent

event.detail: [value: string | number | null]

CustomEvent

event.detail: [value: boolean]

​Usage

​Reference

​Parameters

​Events

Usage

Reference

Parameters

Events