> ## Documentation Index
> Fetch the complete documentation index at: https://juo.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Select

> Accessible select dropdown built on Reka UI.

<Frame>
  <iframe src="data:text/html;base64,PCEtLSBUaGlzIGZpbGUgaXMgYXV0by1nZW5lcmF0ZWQgYnkgc2NyaXB0cy9nZW5lcmF0ZS1kb2NzLnRzLiBEbyBub3QgZWRpdCBtYW51YWxseS4gLS0+CjwhRE9DVFlQRSBodG1sPgo8aHRtbCBsYW5nPSJlbiI+CjxoZWFkPgogIDxtZXRhIGNoYXJzZXQ9IlVURi04Ij4KICA8bWV0YSBuYW1lPSJ2aWV3cG9ydCIgY29udGVudD0id2lkdGg9ZGV2aWNlLXdpZHRoLCBpbml0aWFsLXNjYWxlPTEuMCI+CiAgPHNjcmlwdCBzcmM9Imh0dHBzOi8vY2RuLmpzZGVsaXZyLm5ldC9ucG0vQGp1by9jdXN0b21lci11aS9kaXN0L3dlYi1jb21wb25lbnRzLmlpZmUuanMiPjwvc2NyaXB0PgogIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L25wbS9pbnRlci11aUAzLjE5LjMvaW50ZXIubWluLmNzcyIgLz4KICA8c3R5bGU+CiAgICAqIHsgYm94LXNpemluZzogYm9yZGVyLWJveDsgbWFyZ2luOiAwOyBwYWRkaW5nOiAwOyB9CiAgICBodG1sLCBib2R5IHsgaGVpZ2h0OiAxMDAlOyB9CiAgICBib2R5IHsgZGlzcGxheTogZmxleDsgYWxpZ24taXRlbXM6IGNlbnRlcjsganVzdGlmeS1jb250ZW50OiBjZW50ZXI7IGZvbnQtZmFtaWx5OiAiSW50ZXIgdmFyIiwgc2Fucy1zZXJpZjsgLXdlYmtpdC1mb250LXNtb290aGluZzogYW50aWFsaWFzZWQ7IC1tb3otb3N4LWZvbnQtc21vb3RoaW5nOiBncmF5c2NhbGU7IH0KICA8L3N0eWxlPgo8L2hlYWQ+Cjxib2R5PgoKPGp1by1zZWxlY3QgaWQ9InByZXZpZXctc2VsZWN0IiBwbGFjZWhvbGRlcj0iUGljayBhbiBvcHRpb24iPjwvanVvLXNlbGVjdD4KPHNjcmlwdD4KICBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgncHJldmlldy1zZWxlY3QnKS5vcHRpb25zID0gWwogICAgeyBsYWJlbDogJ09wdGlvbiAxJywgdmFsdWU6ICdvcHQxJyB9LAogICAgeyBsYWJlbDogJ09wdGlvbiAyJywgdmFsdWU6ICdvcHQyJyB9LAogICAgeyBsYWJlbDogJ09wdGlvbiAzJywgdmFsdWU6ICdvcHQzJyB9LAogIF07Cjwvc2NyaXB0Pgo8L2JvZHk+CjwvaHRtbD4K" style={{ width: "100%", height: "300px", border: "none" }} />
</Frame>

<Accordion title="Example code">
  ```html theme={null}

  <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>
  ```
</Accordion>

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

## Usage

```html theme={null}
<juo-select placeholder="Select">Select</juo-select>
```

## Reference

### Parameters

<ParamField path="disabled" type="attr · boolean">
  When `true`, prevents the user from interacting with Select
</ParamField>

<ParamField path="value" type="prop · AcceptableValue | AcceptableValue[]">
  The controlled value of the Select.
</ParamField>

<ParamField path="name" type="attr · string">
  The name of the field. Submitted with its owning form as part of a name/value pair.
</ParamField>

<ParamField path="required" type="attr · boolean">
  When `true`, indicates that the user must set the value before the owning form can be submitted.
</ParamField>

<ParamField path="open" type="attr · boolean">
  The controlled open state of the Select.
</ParamField>

<ParamField path="default-open" type="attr · boolean">
  The open state of the select when it is initially rendered. Use when you do not need to control its open state.
</ParamField>

<ParamField path="by" type="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.
</ParamField>

<ParamField path="dir" type="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.
</ParamField>

<ParamField path="multiple" type="attr · boolean">
  Whether multiple options can be selected or not.
</ParamField>

<ParamField path="autocomplete" type="attr · string">
  Native html input `autocomplete` attribute.
</ParamField>

<ParamField path="options" type="prop · { label: string; value: string | number | null; icon?: Component; disabled?: boolean; }[]" default="[]" />

<ParamField path="placeholder" type="attr · string" />

<ParamField path="icon" type="prop · Component" />

<ParamField path="default-value" type="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.
</ParamField>

<ParamField path="size" type="attr · md | sm | lg | xl" default="md" />

<ParamField path="trigger-class" type="attr · string" />

<ParamField path="ellipsis" type="attr · boolean" />

<ParamField path="error" type="attr · boolean" />

<ParamField path="error-message" type="attr · string" />

### Events

The element dispatches native [`CustomEvent`](https://developer.mozilla.org/docs/Web/API/CustomEvent)s; the payload is in `event.detail`.

<ResponseField name="change" type="CustomEvent">
  `event.detail`: `[value: string | number | null]`
</ResponseField>

<ResponseField name="toggle" type="CustomEvent">
  `event.detail`: `[value: boolean]`
</ResponseField>
