Listbox

import { Listbox } from "@compa11y/react";

import { useState } from "react";
import { Listbox } from "@compa11y/react";

// Single select
function SingleExample() {
  const [fruit, setFruit] = useState("apple");

  return (
    <Listbox value={fruit} onValueChange={setFruit} aria-label="Favorite fruit">
      <Listbox.Option value="apple">Apple</Listbox.Option>
      <Listbox.Option value="banana">Banana</Listbox.Option>
      <Listbox.Option value="cherry">Cherry</Listbox.Option>
    </Listbox>
  );
}

// Multi-select with groups
function MultiExample() {
  const [selected, setSelected] = useState<string[]>([]);

  return (
    <Listbox multiple value={selected} onValueChange={setSelected} aria-label="Toppings">
      <Listbox.Group label="Meats">
        <Listbox.Option value="pepperoni">Pepperoni</Listbox.Option>
        <Listbox.Option value="sausage">Sausage</Listbox.Option>
      </Listbox.Group>
      <Listbox.Group label="Vegetables">
        <Listbox.Option value="peppers">Peppers</Listbox.Option>
        <Listbox.Option value="olives">Olives</Listbox.Option>
      </Listbox.Group>
    </Listbox>
  );
}