Multi-Select

123456789101112131415161718192021222324252627282930313233343536373839404142
import {
  Select,
  SelectArrow,
  SelectItem,
  SelectItemCheck,
  SelectLabel,
  SelectPopover,
  SelectProvider,
} from "@ariakit/react";
import { useState } from "react";
import list from "./list.ts";
import "./style.css";

function renderValue(value: string[]) {
  if (value.length === 0) return "No food selected";
  if (value.length === 1) return value[0];
  return `${value.length} food selected`;
}

export default function Example() {
  const [value, setValue] = useState(["Apple", "Cake"]);
  return (
    <div className="wrapper">
      <SelectProvider value={value} setValue={setValue}>
        <SelectLabel>Favorite food</SelectLabel>
        <Select className="button">
          {renderValue(value)}
          <SelectArrow />
        </Select>
        <SelectPopover gutter={4} sameWidth unmountOnHide className="popover">
          {list.map((value) => (
            <SelectItem key={value} value={value} className="select-item">
              <SelectItemCheck />
              {value}
            </SelectItem>
          ))}
        </SelectPopover>
      </SelectProvider>
    </div>
  );
}

import {
  Select,
  SelectArrow,
  SelectItem,
  SelectItemCheck,
  SelectLabel,
  SelectPopover,
  SelectProvider,
} from "@ariakit/react";
import { useState } from "react";
import list from "./list.ts";
import "./style.css";

function renderValue(value: string[]) {
  if (value.length === 0) return "No food selected";
  if (value.length === 1) return value[0];
  return `${value.length} food selected`;
}

export default function Example() {
  const [value, setValue] = useState(["Apple", "Cake"]);
  return (
    <div className="wrapper">
      <SelectProvider value={value} setValue={setValue}>
        <SelectLabel>Favorite food</SelectLabel>
        <Select className="button">
          {renderValue(value)}
          <SelectArrow />
        </Select>
        <SelectPopover gutter={4} sameWidth unmountOnHide className="popover">
          {list.map((value) => (
            <SelectItem key={value} value={value} className="select-item">
              <SelectItemCheck />
              {value}
            </SelectItem>
          ))}
        </SelectPopover>
      </SelectProvider>
    </div>
  );
}