Skip to main content

<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

​
disabled
attr · boolean
When true, prevents the user from interacting with Select
​
value
prop · AcceptableValue | AcceptableValue[]
The controlled value of the Select.
​
name
attr · string
The name of the field. Submitted with its owning form as part of a name/value pair.
​
required
attr · boolean
When true, indicates that the user must set the value before the owning form can be submitted.
​
open
attr · boolean
The controlled open state of the Select.
​
default-open
attr · boolean
The open state of the select when it is initially rendered. Use when you do not need to control its open state.
​
by
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.
​
dir
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.
​
multiple
attr · boolean
Whether multiple options can be selected or not.
​
autocomplete
attr · string
Native html input autocomplete attribute.
​
options
prop · { label: string; value: string | number | null; icon?: Component; disabled?: boolean; }[]
default:"[]"
​
placeholder
attr · string
​
icon
prop · Component
​
default-value
attr · prop · string | number | (string | number | null)[] | null
The value of the select when initially rendered.Complex values ((string | number | null)[]) must be assigned via the defaultValue JS property instead.
​
size
attr · md | sm | lg | xl
default:"md"
​
trigger-class
attr · string
​
ellipsis
attr · boolean
​
error
attr · boolean
​
error-message
attr · string

​
Events

The element dispatches native CustomEvents; the payload is in event.detail.
​
change
CustomEvent
event.detail: [value: string | number | null]
​
toggle
CustomEvent
event.detail: [value: boolean]