@gluonjs/quarks / packages/quarks/src / ListboxProps

Interface: ListboxProps

Properties

attributes?

readonly optional attributes?: Omit<ContentAttributes<HTMLDivElement>, "id" | "aria" | "ariaActiveDescendantElement" | "ariaLabel" | "role" | ".id" | ".ariaActiveDescendantElement" | ".ariaLabel" | ".role" | "aria-label" | "aria-activedescendant"> & object

Type Declaration

aria?

readonly optional aria?: Omit<Readonly<Partial<Record<AriaAttributeName, QuarkAttributeValue>>>, "label" | "activedescendant">

id

readonly id: string

label

readonly label: string

onChange?

readonly optional onChange?: (value) => void

Parameters

value

string

Returns

void

options

readonly options: readonly ListboxOption[]

value?

readonly optional value?: string

Example

Configure listbox identity, accessible label, current value, options, change handling, and native container attributes:

import { html } from '@gluonjs/core';
import {
  Dialog,
  Field,
  Listbox,
  Overlay,
  Popover,
  createFocusScope,
  getFocusableElements,
  type DialogProps,
  type FieldProps,
  type FocusScope,
  type FocusScopeOptions,
  type ListboxOption,
  type ListboxProps,
  type OverlayProps,
  type PopoverProps,
} from '@gluonjs/quarks';

const options = [
  { value: 'black', label: 'Black' },
  { value: 'blue', label: 'Cobalt blue' },
] satisfies readonly ListboxOption[];
const listbox = { id: 'color', label: 'Color', value: 'blue', options } satisfies ListboxProps;
const field = { label: 'Finish', children: Listbox(listbox), helper: 'Choose one finish' } satisfies FieldProps;
const popover = { id: 'finish-help', children: 'Finish guide', mode: 'manual' } satisfies PopoverProps;
const dialog = { label: 'Shopping bag', children: html`${Field(field)}${Popover(popover)}` } satisfies DialogProps;
const overlay = { children: Dialog(dialog), onDismiss: () => console.log('dismiss') } satisfies OverlayProps;

const panel = document.querySelector<HTMLElement>('#bag')!;
const focusOptions = { initialFocus: 'button', returnFocus: document.activeElement as HTMLElement | null } satisfies FocusScopeOptions;
const focusScope: FocusScope = createFocusScope(panel, focusOptions);
focusScope.activate();
console.log(getFocusableElements(panel), Overlay(overlay));
focusScope.deactivate();