ComboBox

import { useState } from 'react';
import { Box, ComboBox, Heading, Text, Link, Flex } from 'gestalt';

export default function Example() {
  const CATEGORIES = [
    'All Categories',
    'Food and drinks',
    'Beauty',
    'Home decor',
    'Fashion',
    'Travel',
    'Art',
    'Quotes',
    'Entertainment',
    'Entertainment',
    'DIY and crafts',
    'Health',
    'Wedding',
    'Event planning',
    'Gardening',
    'Parenting',
    'Vehicles',
    'Design',
    'Sport',
    'Electronics',
    'Animals',
    'Finance',
    'Architecture',
  ];

  const options = CATEGORIES.map((category, index) => ({
    label: category,
    value: `value${index}`,
  }));

  const [errorMessage, setErrorMessage] = useState();

  const handleOnBlur = ({ value }) => {
    if (value !== '' && !CATEGORIES.includes(value))
      setErrorMessage('Please, select a valid option');
  };

  const resetErrorMessage = errorMessage ? () => setErrorMessage() : () => {};

  return (
    <Box padding={2}>
      <Flex direction="column" gap={4}>
        <Heading size="500">
          Discover this week`&apos;`s top searched trends across all categories
        </Heading>
        <Text inline>
          Wanna learn how trends work?
          <Text weight="bold" inline>
            {' '}
            Read{' '}
            <Link
              accessibilityLabel="Learn how trends on Pinterest work"
              target="blank"
              inline
              href="https://business.pinterest.com/content/pinterest-predicts/"
            >
              {' '}
              additional information
            </Link>
          </Text>
        </Text>
        <Flex width="100%" justifyContent="center">
          <Box width={320}>
            <ComboBox
              accessibilityClearButtonLabel="Clear category value"
              errorMessage={errorMessage}
              id="displayLabel"
              label="Choose a category to display top search trends"
              labelDisplay="hidden"
              noResultText="No results for your selection"
              onBlur={handleOnBlur}
              onChange={resetErrorMessage}
              onClear={resetErrorMessage}
              options={options}
              placeholder="Select category"
            />
          </Box>
        </Flex>
      </Flex>
    </Box>
  );
}

To enter the code editing mode, press Enter. To exit the edit mode, press Escape

You are editing the code. To exit the edit mode, press Escape

import { useState } from 'react';
import { Box, ComboBox, Flex } from 'gestalt';

export default function Example() {
  const PRONOUNS = [
    'ey / em',
    'he / him',
    'ne / nem',
    'she / her',
    'they / them',
    've / ver',
    'xe / xem',
    'xie / xem',
    'zie / zem',
  ];

  const options = PRONOUNS.map((pronoun, index) => ({
    label: pronoun,
    value: `value${index}`,
  }));

  const [errorMessage, setErrorMessage] = useState();

  const handleOnBlur = ({ value }) => {
    if (value !== '' && !PRONOUNS.includes(value))
      setErrorMessage('Please, select a valid option');
  };

  const resetErrorMessage = errorMessage ? () => setErrorMessage() : () => {};

  return (
    <Box padding={2} width="100%" height="100%">
      <Flex
        width="100%"
        height="100%"
        justifyContent="center"
        alignItems="center"
      >
        <Box width={320}>
          <ComboBox
            accessibilityClearButtonLabel="Clear the current value"
            errorMessage={errorMessage}
            helperText="Choose your pronouns to appear on your profile so others know how to refer to you. You can edit or remove these any time."
            id="uncontrolled"
            label="Pronouns"
            noResultText="No results for your selection"
            onBlur={handleOnBlur}
            onChange={resetErrorMessage}
            onClear={resetErrorMessage}
            options={options}
            placeholder="Add your pronouns"
          />
        </Box>
      </Flex>
    </Box>
  );
}

To enter the code editing mode, press Enter. To exit the edit mode, press Escape

You are editing the code. To exit the edit mode, press Escape

import { useState } from 'react';
import { Box, ComboBox, Flex, Text } from 'gestalt';

const US_STATES = [
  'AK - Alaska',
  'AL - Alabama',
  'AR - Arkansas',
  'AS - American Samoa',
  'AZ - Arizona',
  'CA - California',
  'CO - Colorado',
  'CT - Connecticut',
  'DC - District of Columbia',
  'DE - Delaware',
  'FL - Florida',
  'GA - Georgia',
  'GU - Guam',
  'HI - Hawaii',
  'IA - Iowa',
  'ID - Idaho',
  'IL - Illinois',
  'IN - Indiana',
  'KS - Kansas',
  'KY - Kentucky',
  'LA - Louisiana',
  'MA - Massachusetts',
  'MD - Maryland',
  'ME - Maine',
  'MI - Michigan',
  'MN - Minnesota',
  'MO - Missouri',
  'MS - Mississippi',
  'MT - Montana',
  'NC - North Carolina',
  'ND - North Dakota',
  'NE - Nebraska',
  'NH - New Hampshire',
  'NJ - New Jersey',
  'NM - New Mexico',
  'NV - Nevada',
  'NY - New York',
  'OH - Ohio',
  'OK - Oklahoma',
  'OR - Oregon',
  'PA - Pennsylvania',
  'PR - Puerto Rico',
  'RI - Rhode Island',
  'SC - South Carolina',
  'SD - South Dakota',
  'TN - Tennessee',
  'TX - Texas',
  'UT - Utah',
  'VA - Virginia',
  'VI - Virgin Islands',
  'VT - Vermont',
  'WA - Washington',
  'WI - Wisconsin',
  'WV - West Virginia',
  'WY - Wyoming',
];

export default function Example() {
  const usStatesOptions = US_STATES.map((pronoun, index) => ({
    label: pronoun,
    value: `value${index}`,
  }));

  const [suggestedOptions, setSuggestedOptions] = useState(usStatesOptions);
  const [inputValue, setInputValue] = useState(usStatesOptions[5].label);
  const [selected, setSelected] = useState(usStatesOptions[5]);

  const handleOnChange = ({ value }) => {
    setSelected();
    if (value) {
      setInputValue(value);
      const filteredOptions = usStatesOptions.filter((item) =>
        item.label.toLowerCase().includes(value.toLowerCase())
      );
      setSuggestedOptions(filteredOptions);
    } else {
      setInputValue(value);
      setSuggestedOptions(usStatesOptions);
    }
  };

  const handleSelect = ({ item }) => {
    setInputValue(item.label);
    setSuggestedOptions(usStatesOptions);
    setSelected(item);
  };

  return (
    <Box padding={2} width="100%" height="100%">
      <Flex
        width="100%"
        height="100%"
        justifyContent="center"
        direction="column"
        alignItems="center"
        gap={2}
      >
        <Box width={320}>
          <ComboBox
            accessibilityClearButtonLabel="Clear the current value"
            label="State"
            id="controlled"
            inputValue={inputValue}
            noResultText="No results for your selection"
            options={suggestedOptions}
            onBlur={() => {
              if (!selected) setInputValue('');
              setSuggestedOptions(usStatesOptions);
            }}
            onClear={() => {
              setInputValue('');
              setSelected();
              setSuggestedOptions(usStatesOptions);
            }}
            selectedOption={selected}
            placeholder="Select a US state"
            onChange={handleOnChange}
            onSelect={handleSelect}
          />
        </Box>
        {selected && selected.label ? (
          <Box width={320}>
            <Text>
              Estimated tax to be collected in {selected && selected.label} will
              be calculated at checkout
            </Text>
          </Box>
        ) : null}
      </Flex>
    </Box>
  );
}

To enter the code editing mode, press Enter. To exit the edit mode, press Escape

You are editing the code. To exit the edit mode, press Escape

import { useState } from 'react';
import { Box, ComboBox, Flex, Button } from 'gestalt';

export default function Example() {
  const CATEGORIES = {
    BEAUTY: [
      'Beauty tips',
      'DIY beauty',
      'Wedding beauty',
      'Vegan beauty products',
      'Beauty photography',
      'Beauty quotes',
      'Beauty illustration',
      'Beauty salon',
      'Beauty blender',
    ].map((pronoun, index) => ({ label: pronoun, value: `value${index}` })),
    DIY: [
      'DIY Projects',
      'DIY Art',
      'DIY Home decor',
      'DIY Furniture',
      'DIY Gifts',
      'DIY Wall decor',
      'DIY Clothes',
      'DIY Christmas decorations',
      'DIY Christmas gifts',
      'DIY Wall art',
    ].map((pronoun, index) => ({ label: pronoun, value: `value${index}` })),
  };

  const [currentCategory, setCurrentCategory] = useState('BEAUTY');

  const [suggestedOptions, setSuggestedOptions] = useState(
    CATEGORIES[currentCategory]
  );

  const [inputValue, setInputValue] = useState('');

  const [selectedOption, setSelectedOption] = useState();

  const resetOptions = () => {
    setSuggestedOptions(CATEGORIES[currentCategory]);
  };

  const handleOnChange = ({ value }) => {
    setSelectedOption();
    if (value) {
      setInputValue(value);
      const filteredOptions = CATEGORIES[currentCategory].filter((item) =>
        item.label.toLowerCase().includes(value.toLowerCase())
      );
      setSuggestedOptions(filteredOptions);
    } else {
      setInputValue(value);
      resetOptions();
    }
  };

  const handleSelect = ({ item }) => {
    setInputValue(item.label);
    setSelectedOption(item);
    resetOptions();
  };

  const handleOnBlur = () => {
    if (!selectedOption) setInputValue('');
    resetOptions();
  };

  const handleOnClear = () => {
    setInputValue('');
    setSelectedOption();
    resetOptions();
  };

  return (
    <Box padding={2} width="100%" height="100%">
      <Flex
        width="100%"
        height="100%"
        justifyContent="center"
        alignItems="center"
      >
        <Flex direction="column" gap={4}>
          <Button
            onClick={() => {
              const nextCategory =
                currentCategory === 'BEAUTY' ? 'DIY' : 'BEAUTY';
              setCurrentCategory(nextCategory);
              setSuggestedOptions(CATEGORIES[nextCategory]);
              setInputValue('');
            }}
            text={`Change options to ${
              currentCategory === 'BEAUTY' ? 'DIY' : 'BEAUTY'
            } category`}
          />
          <Box width={320}>
            <ComboBox
              accessibilityClearButtonLabel="Clear the current value"
              id="programaticallySet"
              inputValue={inputValue}
              noResultText="No results for your selection"
              options={suggestedOptions}
              label="Pin category"
              size="lg"
              onBlur={handleOnBlur}
              onClear={handleOnClear}
              placeholder="Select a category"
              onChange={handleOnChange}
              onSelect={handleSelect}
              selectedOption={selectedOption}
            />
          </Box>
        </Flex>
      </Flex>
    </Box>
  );
}

To enter the code editing mode, press Enter. To exit the edit mode, press Escape

You are editing the code. To exit the edit mode, press Escape

import { useState, useRef } from 'react';
import { Box, ComboBox, Flex, Tag } from 'gestalt';

export default function Example() {
  const ref = useRef();
  const [selected, setSelected] = useState([]);
  const [searchTerm, setSearchTerm] = useState('');

  const PRONOUNS = [
    'ey / em',
    'he / him',
    'ne / nem',
    'she / her',
    'they / them',
    've / ver',
    'xe / xem',
    'xie / xem',
    'zie / zem',
  ];

  const options = PRONOUNS.map((pronoun, index) => ({
    label: pronoun,
    value: `value${index}`,
  }));

  const [suggestedOptions, setSuggestedOptions] = useState(
    options.filter((pronoun) => !selected.includes(pronoun.value))
  );

  const handleOnSelect = ({ item: { label } }) => {
    if (!selected.includes(label) && selected.length < 2) {
      const newSelected = [...selected, label];
      setSelected(newSelected);
      setSuggestedOptions(
        options.filter((pronoun) => !newSelected.includes(pronoun.label))
      );
      setSearchTerm('');
    }
  };

  const handleOnChange = ({ value }) => {
    setSearchTerm(value);

    const suggested = value
      ? suggestedOptions.filter((item) =>
          item.label.toLowerCase().includes(value.toLowerCase())
        )
      : options.filter((option) => !selected.includes(option.value));

    setSuggestedOptions(suggested);
  };

  const handleOnBlur = () => setSearchTerm('');

  const handleClear = () => {
    setSelected([]);
    setSuggestedOptions(options);
  };

  const handleOnKeyDown = ({ event: { keyCode, currentTarget } }) => {
    // Remove tag on backspace if the cursor is at the beginning of the field

    if (keyCode === 8 /* Backspace */ && currentTarget.selectionEnd === 0) {
      const newSelected = [...selected.slice(0, -1)];
      setSelected(newSelected);
      setSuggestedOptions(
        options.filter((pronoun) => !newSelected.includes(pronoun.label))
      );
    }
  };

  const handleRemoveTag = (removedValue) => {
    const newSelected = selected.filter(
      (tagValue) => tagValue !== removedValue
    );
    setSelected(newSelected);
    setSuggestedOptions(
      options.filter((pronoun) => !newSelected.includes(pronoun.label))
    );
  };

  const renderedTags = selected.map((pronoun) => (
    <Tag
      key={pronoun}
      onRemove={() => handleRemoveTag(pronoun)}
      removeIconAccessibilityLabel={`Remove ${pronoun} tag`}
      text={pronoun}
    />
  ));

  return (
    <Box padding={2} width="100%" height="100%">
      <Flex
        width="100%"
        height="100%"
        justifyContent="center"
        alignItems="center"
      >
        <Box width={320}>
          <ComboBox
            accessibilityClearButtonLabel="Clear the current value"
            label="Pronouns"
            id="tags"
            inputValue={searchTerm}
            noResultText="No results for your selection"
            options={suggestedOptions}
            ref={ref}
            helperText="Choose up to 2 sets of pronouns to appear on your profile so others know how to refer to you. You can edit or remove these any time."
            onKeyDown={handleOnKeyDown}
            onChange={handleOnChange}
            onClear={handleClear}
            onBlur={handleOnBlur}
            onSelect={handleOnSelect}
            placeholder={selected.length > 0 ? '' : 'Add your pronouns'}
            tags={renderedTags}
          />
        </Box>
      </Flex>
    </Box>
  );
}

To enter the code editing mode, press Enter. To exit the edit mode, press Escape

You are editing the code. To exit the edit mode, press Escape

import { useRef } from 'react';
import { Box, ComboBox, Flex } from 'gestalt';

export default function Example() {
  const ref = useRef();

  return (
    <Box padding={2} width="100%" height="100%">
      <Flex
        width="100%"
        height="100%"
        justifyContent="center"
        alignItems="center"
      >
        <Flex direction="column" gap={4}>
          <Box width={320}>
            <ComboBox
              accessibilityClearButtonLabel="Clear the current values"
              label="Select your favorite shape"
              id="favoriteShape"
              noResultText="No results for your selection"
              options={[
                { label: 'square', value: '1' },
                { label: 'circle', value: '2' },
              ]}
              onSelect={() => ref.current?.focus()}
              placeholder="Select a shape"
            />
          </Box>
          <Box width={320}>
            <ComboBox
              accessibilityClearButtonLabel="Clear the current values"
              label="Select your favorite color"
              id="favoriteColor"
              noResultText="No results for your selection"
              options={[
                { label: 'red', value: '1' },
                { label: 'blue', value: '2' },
                { label: 'green', value: '3' },
                { label: 'yellow', value: '4' },
              ]}
              placeholder="Select a color"
              ref={ref}
            />
          </Box>
        </Flex>
      </Flex>
    </Box>
  );
}

To enter the code editing mode, press Enter. To exit the edit mode, press Escape

You are editing the code. To exit the edit mode, press Escape

import { Box, ComboBox, Flex } from 'gestalt';

export default function Example() {
  const options = Array(20)
    .fill(0)
    .map((item, index) => ({
      label: `Label-${index + 1}`,
      value: `Value-${index + 1}`,
      subtext: `Subtext-${index + 1}`,
    }));

  return (
    <Box padding={2} width="100%" height="100%">
      <Flex
        width="100%"
        height="100%"
        justifyContent="center"
        alignItems="center"
      >
        <Box width={320}>
          <ComboBox
            accessibilityClearButtonLabel="Clear the current value"
            label="Choose a value"
            id="subtext"
            noResultText="No results for your selection"
            options={options}
            placeholder="Select a value"
          />
        </Box>
      </Flex>
    </Box>
  );
}

To enter the code editing mode, press Enter. To exit the edit mode, press Escape

You are editing the code. To exit the edit mode, press Escape

import { Box, ComboBox, Flex } from 'gestalt';

export default function Example() {
  return (
    <Box padding={2} width="100%" height="100%">
      <Flex
        width="100%"
        height="100%"
        justifyContent="center"
        alignItems="center"
      >
        <Box width={320}>
          <ComboBox
            accessibilityClearButtonLabel="Clear the current value"
            helperText="Select one from all your current active accounts."
            id="helperText"
            label="Select account"
            noResultText="No results for your selection"
            options={[]}
          />
        </Box>
      </Flex>
    </Box>
  );
}

To enter the code editing mode, press Enter. To exit the edit mode, press Escape

You are editing the code. To exit the edit mode, press Escape

import { Box, ComboBox, Flex } from 'gestalt';

export default function Example() {
  return (
    <Box padding={2} width="100%" height="100%">
      <Flex
        width="100%"
        height="100%"
        justifyContent="center"
        alignItems="center"
      >
        <Box width={320}>
          <ComboBox
            accessibilityClearButtonLabel="Clear the current value"
            errorMessage="Please select a valid category"
            id="error"
            label="Category"
            noResultText="No results for your selection"
            options={[]}
          />
        </Box>
      </Flex>
    </Box>
  );
}

To enter the code editing mode, press Enter. To exit the edit mode, press Escape

You are editing the code. To exit the edit mode, press Escape