G
Tokens
TypographySpacingColorRadiusShadowMotion
Icons
Icon set
Components
AutocompleteAutocomplete2BadgeButtonCheckboxDropdownIconIconButtonIconToggleLinkModalNavPaginationPopoverProgressRadioSelectSliderSpinnerSwitchTabTextTextareaTextButtonTextInputTextToggleToastTooltip
Layouts
ArrangeBoxFlexStack
Foundational
FieldMenuTextbox
Utilities
CardHooksStyle utilities
Patterns
CardsFormsLists and tablesModals
Guides
ResponsiveTheming
Showcase
CompositionsLayoutsLayout examplesTests

Autocomplete2

Options


    () => {
      const options = [
        { value: 'Neopan 100 Acros', content: 'Neopan 100 Acros' },
        { value: 'Fujicolor Pro 160NS', content: 'Fujicolor Pro 160NS' },
        { value: 'Fujicolor Superior 200', content: 'Fujicolor Superior 200' },
      ];
      const defaultOption = options[0];
      const [option, setOption] = useState(defaultOption)
      return (
        <Autocomplete2
          label="Film"
          hint="Choose your favorite film"
          options={options}
          value={option.value}
          onChange={(option) => setOption(option)}
        />
      )
    }

Grouped menu


    () => {
      const options = Object.values(demoFilmsObject).map((film, index) => {
        return { value: film.name, content: film.name, groupTitle: film.company, }
      })
      const defaultOption = options[0];
      const [option, setOption] = useState(defaultOption)
      return (
        <Autocomplete2
          label="Film"
          hint="Choose your favorite film"
          options={options}
          value={option.value}
          onChange={(option) => setOption(option)}
        />
      )
    }



    () => {
      const options = [
        { value: 'Neopan 100 Acros', content: 'Neopan 100 Acros' },
        { value: 'Fujicolor Pro 160NS', content: 'Fujicolor Pro 160NS' },
        { value: 'Fujicolor Superior 200', content: 'Fujicolor Superior 200' },
      ];
      const defaultOption = options[0];
      const [option, setOption] = useState(defaultOption)
      const sharedProps = {        
        options: options,
        value: option.value,
        onChange: (option) => setOption(option),
        menuWidth: '240px',
      }
      return (
        <Arrange gap="s">
          <Autocomplete2 menuPlacement="bottomStart" {...sharedProps} />
          <Autocomplete2 menuPlacement="bottomEnd" {...sharedProps} />
          <Autocomplete2 menuPlacement="topStart" {...sharedProps} />
          <Autocomplete2 menuPlacement="topEnd" {...sharedProps} />
        </Arrange>
      )
    }

Use the menuItemsHaveEllipsis to disable ellipsis on menu items


    () => {
      const options = [
        { value: 'Neopan 100 Acros', content: demoText.l },
        { value: 'Fujicolor Pro 160NS', content: 'Fujicolor Pro 160NS' },
        { value: 'Fujicolor Superior 200', content: 'Fujicolor Superior 200' },
      ];
      const defaultOption = options[0];
      const [option, setOption] = useState(defaultOption)
      return (
        <Autocomplete2
          label="Film"
          options={options}
          value={option.value}
          onChange={(option) => setOption(option)}
          menuItemsHaveEllipsis={false}
        />
      )
    }

With error


    () => {
      const options = [
        { value: 'Neopan 100 Acros', content: 'Neopan 100 Acros' },
        { value: 'Fujicolor Pro 160NS', content: 'Fujicolor Pro 160NS' },
        { value: 'Fujicolor Superior 200', content: 'Fujicolor Superior 200' },
      ];
      const defaultOption = { value: '', content: ''}
      const [option, setOption] = useState(defaultOption)
      return (
        <Autocomplete2
          label="Film"
          value={option.value}
          hint="Choose your favorite film"
          options={options}
          onChange={(option) => setOption(option)}
          hasError
          errorMessage="This field is required"
        />
      )
    }

Custom items

Using Autocomplete2.Item


    () => {
      const Tag = ({children}) => (
        <Box backgroundColor="fade2" radius="xs" paddingY="xs" paddingX="s">
          <Text variant="caps">{children}</Text>
        </Box>
      )
      const options = [
        { 
          value: 'Neopan 100 Acros', 
          content: 'Neopan 100 Acros', 
          item: ({ isActive, isSelected, isDisabled }) => (
            <Autocomplete2.Item paddingLeft="6px">
              <Arrange gap="s" columns="auto 1fr auto" tag="span">
                <Tag>PRE</Tag>
                Neopan 100 Acros
                <Tag>POST</Tag>
              </Arrange>
            </Autocomplete2.Item>
          )
        },
        { 
          value: 'Fujicolor Pro 160NS', 
          content: 'Fujicolor Pro 160NS', 
          item: ({ isActive, isSelected, isDisabled }) => (
            <Autocomplete2.Item paddingLeft="6px">
              <Arrange gap="s" columns="auto 1fr auto" tag="span">
                <Tag>PRE</Tag>
                Fujicolor Pro 160NS
                <Tag>POST</Tag>
              </Arrange>
            </Autocomplete2.Item>
          )
        },
        {
          value: 'Fujicolor Superior 200',
          content: 'Fujicolor Superior 200',
          item: ({ isActive, isSelected, isDisabled }) => (
            <Autocomplete2.Item paddingLeft="6px">
              <Arrange gap="s" columns="auto 1fr auto" tag="span">
                <Tag>PRE</Tag>
                Fujicolor Superior 200
                <Tag>POST</Tag>
              </Arrange>
            </Autocomplete2.Item>
          )
        },
      ];
      const defaultOption = options[0];
      const [option, setOption] = useState(defaultOption)
      return (
        <Autocomplete2
          label="Film"
          hint="Choose your favorite film"
          options={options}
          value={option.value}
          onChange={(option) => setOption(option)}
        />
      )
    }

Using custom elements


    () => {
      const Tag = ({children, isActive, isSelected, isDisabled}) => (
        <Flex
          paddingX="var(--grn-textbox-paddingX-s)"
          height="var(--grn-textbox-height-s)"
          radius="var(--grn-textbox-radius-s)"
          backgroundColor={isActive ? 'content' : 'fade1'}
          color={isActive ? 'background' : 'content'}
          width="fit-content"
          marginLeft="calc((var(--grn-textbox-height-m) - var(--grn-textbox-height-s)) / 2)"
          opacity={isDisabled ? '0.5' : '1'}
          alignContent="center"
        >
          <Text size="var(--grn-textbox-textSize-s)" weight="medium">
            {children}
          </Text>
        </Flex>
      )
      const optionWrapperProps = {
        paddingY: "calc((var(--grn-textbox-height-m) - var(--grn-textbox-height-s)) / 2)",
        alignContent: "center",
        cursor: "pointer",
      }
      const options = [
        { 
          value: 'Neopan 100 Acros', 
          content: 'Neopan 100 Acros', 
          item: ({ isActive, isSelected, isDisabled }) => (
            <Flex {...optionWrapperProps}> 
              <Tag 
                isActive={isActive}
                isSelected={isSelected}
                isDisabled={isDisabled}
              >
                Neopan 100 Acros
              </Tag>
            </Flex>
          )
        },
        { 
          value: 'Fujicolor Pro 160NS', 
          content: 'Fujicolor Pro 160NS', 
          item: ({ isActive, isSelected, isDisabled }) => (
            <Flex {...optionWrapperProps}> 
              <Tag 
                isActive={isActive}
                isSelected={isSelected}
                isDisabled={isDisabled}
              >
                Fujicolor Pro 160NS
              </Tag>
            </Flex>
          )
        },
        {
          value: 'Fujicolor Superior 200',
          content: 'Fujicolor Superior 200',
          item: ({ isActive, isSelected, isDisabled }) => (
            <Flex {...optionWrapperProps}>  
              <Tag 
                isActive={isActive}
                isSelected={isSelected}
                isDisabled={isDisabled}
              >
                Fujicolor Superior 200
              </Tag>
            </Flex>
          )
        },
        {
          value: 'Fujicolor Superior X-Tra400',
          content: 'Fujicolor Superior X-Tra400',
          item: ({ isActive, isSelected, isDisabled }) => (
            <Flex {...optionWrapperProps}>  
              <Tag 
                isActive={isActive}
                isSelected={isSelected}
                isDisabled={isDisabled}
              >
                Fujicolor Superior X-Tra400
              </Tag>
            </Flex>
          )
        },
        {
          value: 'Fujicolor Pro 400H',
          content: 'Fujicolor Pro 400H',
          isDisabled: true,
          item: ({ isActive, isSelected, isDisabled }) => (
            <Flex {...optionWrapperProps}>  
              <Tag 
                isActive={isActive}
                isSelected={isSelected}
                isDisabled={isDisabled}
              >
                Fujicolor Pro 400H
              </Tag>
            </Flex>
          )
        },
      ];
      const defaultOption = options[0];
      const [option, setOption] = useState(defaultOption)
      return (
        <Autocomplete2
          label="Film"
          hint="Choose your favorite film"
          options={options}
          value={option.value}
          onChange={(option) => setOption(option)}
        />
      )
    }

Create new option


    () => {
      const [options, setOptions] = useState([
        {
          value: 'Neopan 100 Acros',
          content: 'Neopan 100 Acros',
        },
        {
          value: 'Fujicolor Pro 160NS',
          content: 'Fujicolor Pro 160NS',
        },
        {
          value: 'Fujicolor Superior 200',
          content: 'Fujicolor Superior 200',
        },
      ])

      const defaultOption = options[0];
      const [option, setOption] = useState(defaultOption)
      return (
        <Autocomplete2
          label="Film"
          value={option.value}
          hint="Choose your favorite film"
          options={options}
          onChange={(option) => setOption(option)}
          isCreatable
          onCreate={(option) => {
            setOption(option)
            setOptions([...options, option])
          }}
        />
      )
    }

Large list test


    () => {
      const films = Object.values(demoFilmsObject)
      const duplicatedFilms = films.concat(films, films, films, films, films, films, films, films, films, films, films, films, films, films, films)
      const options = duplicatedFilms.map((film, index) => {
        return { value: film.name, content: film.name }
      })
      const defaultOption = { value: '', content: ''}
      const [option, setOption] = useState(defaultOption)
      return (
        <Autocomplete2
          label="Film"
          value={option.value}
          hint="Choose your favorite film"
          options={options}
          onChange={(option) => setOption(option)}
        />
      )
    }

Background color


    () => {
      const options = [
        { value: 'Neopan 100 Acros', content: 'Neopan 100 Acros' },
        { value: 'Fujicolor Pro 160NS', content: 'Fujicolor Pro 160NS' },
        { value: 'Fujicolor Superior 200', content: 'Fujicolor Superior 200' },
      ];
      const defaultOption = options[0];
      const [option, setOption] = useState(defaultOption)
      return (
        <Box padding="l2" backgroundColor="background2" borderSide="all" radius="m">
          <Autocomplete2
            backgroundColor="background"
            label="Film"
            hint="Choose your favorite film"
            options={options}
            value={option.value}
            onChange={(option) => setOption(option)}
          />
        </Box>
      )
    }

Disabled


    () => {
      const options = [
        { value: 'Neopan 100 Acros', content: 'Neopan 100 Acros' },
        { value: 'Fujicolor Pro 160NS', content: 'Fujicolor Pro 160NS' },
        { value: 'Fujicolor Superior 200', content: 'Fujicolor Superior 200' },
      ];
      const defaultOption = options[0];
      const [option, setOption] = useState(defaultOption)
      return (
        <Autocomplete2
          options={options}
          value={option.value}
          onChange={(option) => setOption(option)}
          isDisabled
        />
      )
    }

Clearable


    () => {
      const options = [
        { value: 'Neopan 100 Acros', content: 'Neopan 100 Acros' },
        { value: 'Fujicolor Pro 160NS', content: 'Fujicolor Pro 160NS' },
        { value: 'Fujicolor Superior 200', content: 'Fujicolor Superior 200' },
      ];
      const defaultOption = options[0];
      const [option, setOption] = useState(defaultOption)
      return (
        <Autocomplete2
          label="Film"
          hint="Choose your favorite film"
          placeholder="Choose an option"
          options={options}
          value={option.value}
          onChange={(option) => setOption(option)}
          onClear={() => setOption({})}
        />
      )
    }

Props

Name
Type
Default
menuPlacement
oneOf
'top' 'topStart' 'topEnd' 'bottom' 'bottomStart' 'bottomEnd'
'bottomStart'
menuMaxHeight
oneOfType
number
string
'468px'
menuItemsHaveEllipsis
bool
true
hasPortal
bool
true
searchField
'content'
options
array
value
string
onChangeREQUIRED
func
isCreatable
bool
onCreate
func
menuWidth
oneOfType
number
string
menuZIndex
oneOfType
number
string
label
oneOfType
string
node
hint
oneOfType
string
node
placeholder
string
hasError
bool
errorMessage
string
isDisabled
bool
backgroundColor
oneOfType
Object.keys(vars.colors)
string
onClear
func