ComboBox

import {ComboBox, ComboBoxItem} from './ComboBox';
import {ListBoxSection, Collection, Header} from 'react-aria-components';

function Example() {
  let options = [];
  return (
    <ComboBox
      label="Preferred fruit or vegetable"
      placeholder="Select an option"
      defaultItems={options}>
      {section => (
        <ListBoxSection id={section.name}>
          <Header>{section.name}</Header>
          <Collection items={section.children}>
            {item => <ComboBoxItem id={item.name}>{item.name}</ComboBoxItem>}
          </Collection>
        </ListBoxSection>
      )}
    </ComboBox>
  );
}

import {ComboBox, ComboBoxValue, Input} from 'react-aria-components';
import {ComboBoxListBox, ComboBoxItem} from './ComboBox';
import {Label, FieldButton} from './Form';
import {Popover} from './Popover';
import {Tag, TagGroup} from './TagGroup';
import {ChevronDown} from 'lucide-react';

const states = [];
<ComboBox selectionMode="multiple">
  <Label>States</Label>
  <div className="combobox-field">
    <Input className="react-aria-Input inset" placeholder="Select a state" />
    <FieldButton><ChevronDown /></FieldButton>
  </div>
  <ComboBoxValue<typeof states[0]>>
    {({selectedItems, state}) => (
      <TagGroup
        aria-label="Selected states"
        style={{marginTop: 8}}
        items={selectedItems.filter(item => item != null)}
        renderEmptyState={() => 'No selected items'}
        onRemove={(keys) => {
          // Remove keys from ComboBox state.
          if (Array.isArray(state.value)) {
            state.setValue(state.value.filter(k => !keys.has(k)));
          }
        }}>
        {item => <Tag>{item.name}</Tag>}
      </TagGroup>
    )}
  </ComboBoxValue>
  <Popover hideArrow className="combobox-popover">
    <ComboBoxListBox items={states}>
      {state => <ComboBoxItem>{state.name}</ComboBoxItem>}
    </ComboBoxListBox>
  </Popover>
</ComboBox>

import {ComboBox, ComboBoxItem} from './ComboBox';
import {useState} from 'react';
import type {Key} from 'react-aria-components';

function Example() {
  let [animal, setAnimal] = useState<Key | null>("bison");

  return (
    <div>
      <ComboBox
        label="Favorite Animal"
        placeholder="Select an animal"
        value={animal}
        onChange={setAnimal}>
        <ComboBoxItem id="koala">Koala</ComboBoxItem>
        <ComboBoxItem id="kangaroo">Kangaroo</ComboBoxItem>
        <ComboBoxItem id="platypus" isDisabled>Platypus</ComboBoxItem>
        <ComboBoxItem id="eagle">Bald Eagle</ComboBoxItem>
        <ComboBoxItem id="bison">Bison</ComboBoxItem>
        <ComboBoxItem id="skunk">Skunk</ComboBoxItem>
      </ComboBox>
      <p>Current selection: {animal}</p>
    </div>
  );
}

import type {Key} from 'react-aria-components';
import {ComboBox, ComboBoxItem} from './ComboBox';
import {useState} from 'react';

function ControlledComboBox() {
  let options = [];
  let [fieldState, setFieldState] = useState<{value: Key | null, inputValue: string}>({
    value: null,
    inputValue: ''
  });

  let onChange = (id: Key | null) => {
    // Update inputValue when value changes.
    setFieldState({
      inputValue: id == null ? '' : options.find(o => o.id === id)?.name ?? '',
      value: id
    });
  };

  let onInputChange = (value: string) => {
    // Reset value to null if the input is cleared.
    setFieldState(prevState => ({
      inputValue: value,
      value: value === '' ? null : prevState.value
    }));
  };

  return (
    <div>
      <ComboBox
        label="Engineering major"
        placeholder="Select a major"
        defaultItems={options}
        value={fieldState.value}
        inputValue={fieldState.inputValue}
        onChange={onChange}
        onInputChange={onInputChange}>
        {item => <ComboBoxItem>{item.name}</ComboBoxItem>}
      </ComboBox>
      <pre style={{fontSize: 12}}>
        Current selected major id: {fieldState.value}{'\n'}
        Current input text: {fieldState.inputValue}
      </pre>
    </div>
  );
}

import {ComboBox, ComboBoxItem} from './ComboBox';
import {useState} from 'react';

function Example() {
  let [inputValue, setInputValue] = useState('');

  return (
    <ComboBox
      label="Favorite Animal"
      placeholder="Select an animal"
      allowsEmptyCollection
      inputValue={inputValue}
      onInputChange={setInputValue}>
      {inputValue.length > 0 && (
        <ComboBoxItem onAction={() => alert('Creating ' + inputValue)}>
          {`Create "${inputValue}"`}
        </ComboBoxItem>
      )}
      <ComboBoxItem>Aardvark</ComboBoxItem>
      <ComboBoxItem>Cat</ComboBoxItem>
      <ComboBoxItem>Dog</ComboBoxItem>
      <ComboBoxItem>Kangaroo</ComboBoxItem>
      <ComboBoxItem>Panda</ComboBoxItem>
      <ComboBoxItem>Snake</ComboBoxItem>
    </ComboBox>
  );
}

import {ComboBox, ComboBoxItem} from './ComboBox';
import {Button} from './Button';
import {Form} from './Form';;

<Form>
  <ComboBox
    label="Animal"
    placeholder="e.g. Cat"
    name="animal"
    isRequired
    description="Please select an animal.">
    <ComboBoxItem id="aardvark">Aardvark</ComboBoxItem>
    <ComboBoxItem id="cat">Cat</ComboBoxItem>
    <ComboBoxItem id="dog">Dog</ComboBoxItem>
    <ComboBoxItem id="kangaroo">Kangaroo</ComboBoxItem>
    <ComboBoxItem id="panda">Panda</ComboBoxItem>
    <ComboBoxItem id="snake">Snake</ComboBoxItem>
  </ComboBox>
  <Button type="submit">Submit</Button>
</Form>