Combobox Option
Examples
Disabled
Prefix & suffix
Usage notes
Importing
Slots
Properties
Methods
CSS Parts
Dependencies

Combobox Option

<ahi-combobox-option> | AhiComboboxOption

Options define the selectable items within a combobox.

Options define the selectable items within a <ahi-combobox>.

Option 1

Option 2

Option 3

<ahi-combobox label="Select one" placeholder="Type to search...">
  <ahi-combobox-option value="option-1">Option 1</ahi-combobox-option>
  <ahi-combobox-option value="option-2">Option 2</ahi-combobox-option>
  <ahi-combobox-option value="option-3">Option 3</ahi-combobox-option>
</ahi-combobox>

Examples

Disabled

Use the disabled attribute to disable an option. Disabled options will be displayed but cannot be selected.

Option 1

Option 2 (disabled)

Option 3

<ahi-combobox label="Select one" placeholder="Type to search...">
  <ahi-combobox-option value="option-1">Option 1</ahi-combobox-option>
  <ahi-combobox-option value="option-2" disabled>Option 2 (disabled)</ahi-combobox-option>
  <ahi-combobox-option value="option-3">Option 3</ahi-combobox-option>
</ahi-combobox>

Prefix & suffix

Add icons or other content to the start and end of combobox options using the prefix and suffix slots.

Phone

Chat New

<ahi-combobox label="Select one" placeholder="Type to search...">
  <ahi-combobox-option value="email">
    <ahi-icon name="mail" slot="prefix"></ahi-icon>
    Email
  </ahi-combobox-option>
  <ahi-combobox-option value="phone">
    <ahi-icon name="phone" slot="prefix"></ahi-icon>
    Phone
  </ahi-combobox-option>
  <ahi-combobox-option value="chat">
    <ahi-icon name="message-circle" slot="prefix"></ahi-icon>
    Chat
    <ahi-badge slot="suffix" variant="brand" size="small">New</ahi-badge>
  </ahi-combobox-option>
</ahi-combobox>

Usage notes

The value attribute is required and must be unique within the combobox
Values may contain any characters, including spaces. Only the combobox’s value attribute is space-delimited (HTML attributes can’t express arrays), so an option whose value contains a space can’t be preselected from markup — assign an array to the combobox’s value property instead
The option’s label is the text content within the element
Options automatically show a checkmark icon when selected
Options support keyboard navigation and hover states

Importing

Script

Bundler

To import this component using a script tag:

<script type="module" src="/path/to/azalea-kit-ui/dist/components/combobox-option/combobox-option.js"></script>

To import this component using a bundler:

import '@azaleahealth/azalea-kit-ui/dist/components/combobox-option/combobox-option.js';

Slots

Name	Description
(default)	The option’s label.
`prefix`	Used to prepend an icon or similar element to the option.
`suffix`	Used to append an icon or similar element to the option.

Learn more about using slots.

Properties

Name	Description	Type	Default
`value`	The option’s value. When selected, the containing form control will receive this value. The value must be unique from other options in the same control. Values may contain any characters, including spaces — but a value with spaces can’t be targeted by the control’s space-delimited `value` attribute (assign an array to the `value` property instead).	`string`	`''`
`disabled`	Draws the option in a disabled state, preventing selection.	`boolean`	`false`
`updateComplete`	A read-only promise that resolves when the component has finished updating.

Learn more about properties and attributes.

Methods

Name	Description	Arguments
`getTextLabel()`	Returns a plain text label based on the option’s content.	-

Learn more about methods.

CSS Parts

Name	Description
`base`	Deprecated. Use the `combobox-option` part instead.
`combobox-option`	The component’s outer wrapper.
`checked-icon`	The checked icon, an `<ahi-icon>` element.
`label`	The option’s label.
`prefix`	The container that wraps the prefix.
`suffix`	The container that wraps the suffix.

Learn more about customizing CSS parts.

Dependencies

This component automatically imports the following dependencies.

<ahi-icon>