ComboboxCancel

Reseting the value of a Combobox with a button rendered next to it using the ComboboxCancel component.

12345678910111213141516171819202122232425262728293031323334353637383940
import * as Ariakit from "@ariakit/react";
import "./style.css";

const list = [
  "Apple",
  "Bacon",
  "Banana",
  "Broccoli",
  "Burger",
  "Cake",
  "Candy",
];

export default function Example() {
  return (
    <Ariakit.ComboboxProvider>
      <Ariakit.ComboboxLabel className="label">
        Your favorite food
      </Ariakit.ComboboxLabel>
      <div className="combobox-wrapper">
        <Ariakit.Combobox
          autoSelect
          placeholder="e.g., Apple"
          className="combobox"
        />
        <Ariakit.ComboboxCancel className="button secondary combobox-cancel" />
      </div>
      <Ariakit.ComboboxPopover gutter={4} sameWidth className="popover">
        {list.map((value) => (
          <Ariakit.ComboboxItem
            key={value}
            value={value}
            className="combobox-item"
          />
        ))}
      </Ariakit.ComboboxPopover>
    </Ariakit.ComboboxProvider>
  );
}

import * as Ariakit from "@ariakit/react";
import "./style.css";

const list = [
  "Apple",
  "Bacon",
  "Banana",
  "Broccoli",
  "Burger",
  "Cake",
  "Candy",
];

export default function Example() {
  return (
    <Ariakit.ComboboxProvider>
      <Ariakit.ComboboxLabel className="label">
        Your favorite food
      </Ariakit.ComboboxLabel>
      <div className="combobox-wrapper">
        <Ariakit.Combobox
          autoSelect
          placeholder="e.g., Apple"
          className="combobox"
        />
        <Ariakit.ComboboxCancel className="button secondary combobox-cancel" />
      </div>
      <Ariakit.ComboboxPopover gutter={4} sameWidth className="popover">
        {list.map((value) => (
          <Ariakit.ComboboxItem
            key={value}
            value={value}
            className="combobox-item"
          />
        ))}
      </Ariakit.ComboboxPopover>
    </Ariakit.ComboboxProvider>
  );
}