ComboBox

import {ComboBox, ComboBoxItem} from '@react-spectrum/s2';

function Example() {
  let options = [
    { id: 1, name: 'Aardvark' },
    { id: 2, name: 'Cat' },
    { id: 3, name: 'Dog' },
    { id: 4, name: 'Kangaroo' },
    { id: 5, name: 'Koala' },
    { id: 6, name: 'Penguin' },
    { id: 7, name: 'Snake' },
    { id: 8, name: 'Turtle' },
    { id: 9, name: 'Wombat' }
  ];

  return (
    <ComboBox label="Animals" items={options} selectionMode="single">
      {(item) => <ComboBoxItem>{item.name}</ComboBoxItem>}
    </ComboBox>
  );
}

import {ComboBox, ComboBoxItem, Text} from '@react-spectrum/s2';
import Comment from '@react-spectrum/s2/icons/Comment';
import Edit from '@react-spectrum/s2/icons/Edit';
import UserSettings from '@react-spectrum/s2/icons/UserSettings';

<ComboBox label="Permissions" defaultSelectedKey="read">
  <ComboBoxItem id="read" textValue="Read">
    <Comment />
    <Text slot="label">Read</Text>
    <Text slot="description">Comment only</Text>
  </ComboBoxItem>
  <ComboBoxItem id="write" textValue="Write">
    <Edit />
    <Text slot="label">Write</Text>
    <Text slot="description">Read and write only</Text>
  </ComboBoxItem>
  <ComboBoxItem id="admin" textValue="Admin">
    <UserSettings />
    <Text slot="label">Admin</Text>
    <Text slot="description">Full access</Text>
  </ComboBoxItem>
</ComboBox>

import {ComboBox, ComboBoxItem, ComboBoxSection, Header, Heading, Text} from '@react-spectrum/s2';

<ComboBox label="Preferred fruit or vegetable">
  <ComboBoxSection>
    <Header>
      <Heading>Fruit</Heading>
      <Text slot="description">Sweet and nutritious</Text>
    </Header>
    <ComboBoxItem id="apple">Apple</ComboBoxItem>
    <ComboBoxItem id="banana">Banana</ComboBoxItem>
    <ComboBoxItem id="orange">Orange</ComboBoxItem>
    <ComboBoxItem id="grapes">Grapes</ComboBoxItem>
  </ComboBoxSection>
  <ComboBoxSection>
    <Header>
      <Heading>Vegetable</Heading>
      <Text slot="description">Healthy and savory</Text>
    </Header>
    <ComboBoxItem id="broccoli">Broccoli</ComboBoxItem>
    <ComboBoxItem id="carrots">Carrots</ComboBoxItem>
    <ComboBoxItem id="spinach">Spinach</ComboBoxItem>
    <ComboBoxItem id="lettuce">Lettuce</ComboBoxItem>
  </ComboBoxSection>
</ComboBox>

import {ComboBox, ComboBoxItem} from '@react-spectrum/s2';
import {useAsyncList} from 'react-stately';

function Example() {
  let list = useAsyncList({
    async load({signal, cursor, filterText}) {
      if (cursor) {
        cursor = cursor.replace(/^http:\/\//i, 'https://');
      }

      let res = await fetch(cursor || `https://swapi.py4e.com/api/people/?search=${filterText}`, {signal});
      let json = await res.json();

      return {
        items: json.results,
        cursor: json.next
      };
    }
  });

  return (
    <ComboBox
      label="Star Wars Character Lookup"
      items={list.items}
      inputValue={list.filterText}
      onInputChange={list.setFilterText}
      loadingState={list.loadingState}
      onLoadMore={list.loadMore}>
      {item => <ComboBoxItem id={item.name} textValue={item.name}>{item.name}</ComboBoxItem>}
    </ComboBox>
  );
}

import {ComboBox, ComboBoxItem} from '@react-spectrum/s2';

<ComboBox label="Bookmarks">
  <ComboBoxItem href="https://adobe.com/" target="_blank">Adobe</ComboBoxItem>
  <ComboBoxItem href="https://apple.com/" target="_blank">Apple</ComboBoxItem>
  <ComboBoxItem href="https://google.com/" target="_blank">Google</ComboBoxItem>
  <ComboBoxItem href="https://microsoft.com/" target="_blank">Microsoft</ComboBoxItem>
</ComboBox>

import {ComboBox, ComboBoxItem, type Key} from '@react-spectrum/s2';
import {useState} from 'react';

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

  return (
    <div>
      <ComboBox
        label="Pick an animal"
        selectedKey={animal}
        onSelectionChange={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 {ComboBox, ComboBoxItem, type Key} from '@react-spectrum/s2';
import {useState} from 'react';

function ControlledComboBox() {
    = [];
  let [fieldState, setFieldState] = useState({
    selectedKey: null,
    inputValue: ''
  });

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

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

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