Option
API Reference
Imports
HTML
<!-- Auto registers as <role-option> -->
<script type="module" src="https://cdn.jsdelivr.net/npm/role-components/exports/components/option/option-register.js"></script>
HTML
<script type="module">
// Auto registers as <role-option>
import "https://cdn.jsdelivr.net/npm/role-components/exports/components/option/option-register.js"
// Manual Register
import RoleOption from "https://cdn.jsdelivr.net/npm/role-components/exports/components/option/option.js"
RoleOption.define()
// => Registers as <role-option>
</script>
JavaScript
// Auto registers as <role-option>
import "role-components/exports/components/option/option-register.js"
// Manual Register
import RoleOption "role-components/exports/components/option/option.js"
RoleOption.define()
// => Registers as <role-option>
Attributes
| Name | Description | Reflects | Type | Default |
|---|---|---|---|---|
[Attribute]
[Property] selected
|
aria-selected is preferred for single-select listboxes / comboboxes |
|
boolean
|
false
|
[Attribute]
[Property] current
|
aria-current to show the currently focused option |
|
boolean
|
false
|
[Attribute]
[Property] aria-current
|
-
|
|
-
|
-
|
[Attribute]
[Property] aria-selected
|
-
|
|
-
|
-
|
[Attribute]
[Property] disabled
|
-
|
|
boolean
|
-
|
[Attribute]
[Property] label
|
-
|
|
string
|
-
|
Events
| Name | Description |
|---|---|
role-focus
|
-
|
role-blur
|
-
|
Functions
| Name | Description | Parameters |
|---|---|---|
formResetCallback()
|
-
|
-
|
handleSlotChange()
|
-
|
-
|
handleFocus()
|
Sends a bubbling focus event to be usable by the combobox. |
-
|
handleBlur()
|
Sends a bubbling focus event to be usable by the combobox. |
-
|
simulateLinkClick()
|
-
|
-
|
renderBase()
|
-
|
content: ReturnType<html>
|
getOrAssignId()
|
Assign a random UUID with a prefix if no id is found. Will return the “id” of the element if its already assigned. |
prefix: string, force: boolean
|
getTextDirection()
|
-
|
-
|
debounce()
|
-
|
callback: (...args: any[]) => any, options: { key: any, wait: number }
|
setAria()
|
-
|
key: T, value: ARIAMixin[T]
|