Autocomplete

Autocomplete is a special type of input field that provides selectable suggestions as a list. it allows to search from a large collection of options. The component is also known as a combobox (combine a text input with a select).

Basic

Helper Text

Source Code

import {
  Autocomplete,
  AutocompleteOption,
  ListItemText,
} from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { AutocompleteItems } from '../../utils/Autocomplete/helpers';

export function Basic() {
  const [value, setValue] = React.useState<string[]>([]);

Sizes

  • Autocomplete supports 4 sizes sm, md, lg and responsive and can be changed by passing the size prop.
  • Default size is lg.

Source Code

import {
  Autocomplete,
  AutocompleteOption,
  ListItemText,
} from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { AutocompleteItems } from '../../utils/Autocomplete/helpers';

export function Sizes() {
  const [smValue, setSmValue] = React.useState<string[]>([]);
  const [mdValue, setMdValue] = React.useState<string[]>([]);
  • With size responsive, the component will be responsive to the viewport.

Screen prefix

Screen width

Component size

xs → xl0px → 1279pxsm
xl → 3xl1280px → 1919pxmd
3xl → ∞1920px → ∞lg

Source Code

import {
  Autocomplete,
  AutocompleteOption,
  ListItemText,
} from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { AutocompleteItems } from '../../utils/Autocomplete/helpers';

export function ResponsiveSize() {
  const [value, setValue] = React.useState<string[]>([]);

With Icons

  • Autocomplete supports icons from the @ocean-network-express/magenta-ui/icons package.
  • The prop leftContent support to add icon or other content to the left side.

Source Code

import { InfoCircleOutline } from '@ocean-network-express/magenta-ui/icons';
import {
  Autocomplete,
  AutocompleteOption,
  ListItemText,
} from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { AutocompleteItems } from '../../utils/Autocomplete/helpers';

export function WithIcons() {
  const [value, setValue] = React.useState<string[]>([]);

Right Content

  • The prop renderRightContent support to replace arrow icon in the right side with other content.

Source Code

import {
  Autocomplete,
  AutocompleteOption,
  Button,
  ListItemText,
  Spinner,
} from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { AutocompleteItems } from '../../utils/Autocomplete/helpers';

export function RenderRightContent() {

Alignment Label

  • Autocomplete supports 3 type of Alignment Label top, left and inline and can be changed by passing the labelAlignment prop.
  • Default Alignment is top.
  • When using inline Alignment with leftContent, the leftContent will be override by Label

Source Code

import { InfoCircleOutline } from '@ocean-network-express/magenta-ui/icons';
import {
  Autocomplete,
  AutocompleteOption,
  ListItemText,
} from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { AutocompleteItems } from '../../utils/Autocomplete/helpers';

export function AlignLabel() {
  const [topValue, setTopValue] = React.useState<string[]>([]);

Clearable

  • The clear button can be turn off by setting clearable prop to false.
Helper Text

Source Code

import {
  Autocomplete,
  AutocompleteOption,
  ListItemText,
} from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { AutocompleteItems } from '../../utils/Autocomplete/helpers';

export function Clearable() {
  const [value, setValue] = React.useState<string[]>([]);

Disabled

  • Disabled state can be enabled by setting disabled prop to true.
Helper Text

Source Code

import { InfoCircleOutline } from '@ocean-network-express/magenta-ui/icons';
import {
  Autocomplete,
  AutocompleteOption,
  ListItemText,
} from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { AutocompleteItems } from '../../utils/Autocomplete/helpers';

export function Disabled() {
  const [value, setValue] = React.useState<string[]>([]);

Helper text

  • Helper text can be changed by passing the helperText prop.
  • The helper text can be displayed in 2 ways: inline and tooltip and can be changed by passing the renderHelperType prop.

Inline (default)

Helper Text

Source Code

import {
  Autocomplete,
  AutocompleteOption,
  ListItemText,
} from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { AutocompleteItems } from '../../utils/Autocomplete/helpers';

export function HelperTextInline() {
  const [value, setValue] = React.useState<string[]>([]);

Tooltip

Source Code

import {
  Autocomplete,
  AutocompleteOption,
  ListItemText,
} from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { AutocompleteItems } from '../../utils/Autocomplete/helpers';

export function HelperTextTooltip() {
  const [value, setValue] = React.useState<string[]>([]);

Option Helper Text

  • Autocomplete supports search and filter for both label and helper text for each option.
Helper Text

Source Code

import {
  Autocomplete,
  AutocompleteOption,
  ListItemText,
} from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { AutocompleteOptions } from '../../utils/Autocomplete/helpers';

export function OptionHelperText() {
  const [value, setValue] = React.useState<string[]>([]);

States

  • Currently, Autocomplete supports 3 state is error, warning and success and can be changed by passing the state prop.

  • As use case of the tooltip, you can use the renderHelperType='tooltip' to display the error message in the tooltip.

  • The tooltip content render by helperText prop value, and it only accept string type for this case. Otherwise, it accept ReactNode when using with default validation.

Inline (default)

Helper Text
Helper Text
Helper Text

Source Code

import { InfoCircleOutline } from '@ocean-network-express/magenta-ui/icons';
import {
  Autocomplete,
  AutocompleteOption,
  ListItemText,
} from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { AutocompleteItems } from '../../utils/Autocomplete/helpers';

export function States() {
  const [errorValue, setErrorValue] = React.useState<string[]>([]);

Tooltip

Source Code

import { InfoCircleOutline } from '@ocean-network-express/magenta-ui/icons';
import {
  Autocomplete,
  AutocompleteOption,
  ListItemText,
} from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { AutocompleteItems } from '../../utils/Autocomplete/helpers';

export function TooltipStates() {
  const [errorValue, setErrorValue] = React.useState<string[]>([]);

Using with Form

  • Remember to set name prop when using with form.
  • Autocomplete value must be an array string, other types are not supported. onValueChange function is called with an array string value as a single argument.
Helper Text

Source Code

import {
  Autocomplete,
  AutocompleteOption,
  ListItemText,
} from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { AutocompleteItems } from '../../utils/Autocomplete/helpers';

export function Basic() {
  const [value, setValue] = React.useState<string[]>([]);

Controlled open state

  • You can control the open state of the autocomplete with the open prop

Source Code

import {
  Autocomplete,
  AutocompleteOption,
  Button,
  ListItemText,
} from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { AutocompleteItems } from '../../utils/Autocomplete/helpers';

export function Open() {
  const [toggleValue, setToggleValue] = React.useState<string[]>([]);

Controlled Input Value

  • You can control the input value state of the autocomplete with the inputValue prop
  • You can handle the change input value event of the autocomplete with the onInputValueChange prop
    • onInputValueChange type: (value: string, reason: AutocompleteInputChangeReasons) => void
    • AutocompleteInputChangeReasons can be: input (user input), reset (programmatic change), clear
Helper Text

Source Code

import {
  Autocomplete,
  AutocompleteInputChangeReasons,
  AutocompleteOption,
  ListItemText,
} from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { AutocompleteItems } from '../../utils/Autocomplete/helpers';

export function ControlledInputValue() {
  const [value, setValue] = React.useState<string[]>([]);

Custom Filter Logic

  • By default, the Autocomplete component compares input values to item labels or helper text using case-insensitive filter logic.
  • You can disabled by passing the noFilter prop is true.
  • You can customize the filter logic render a filtered list of options by passing the children of Autocomplete.
Helper Text

Source Code

import {
  Autocomplete,
  AutocompleteItem,
  AutocompleteOption,
  ListEmpty,
  ListItemText,
} from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { CustomFilterItems } from '../../utils/Autocomplete/helpers';

export function CustomFilterLogic() {

Empty Option

  • The empty option is displayed when there are no options passed into the items prop of Autocomplete or no item matches the user input.
  • You can customize the option that is displayed when there are no options available by passing the emptyOption prop. Or set it to null to not display anything.
Helper Text
Helper Text
Helper Text

Source Code

import { WarningOutline } from '@ocean-network-express/magenta-ui/icons';
import { Autocomplete, ListEmpty } from '@ocean-network-express/magenta-ui/react';
import React from 'react';

export function EmptyOption() {
  const [value, setValue] = React.useState<string[]>([]);

  return (
    <div className="flex justify-center px-8">
      <div className="flex flex-col gap-6 w-[350px]">
        <Autocomplete
          items={[]}

Multiple

Default

  • The Autocomplete component can handle multiple selections. It’s enabled with the multiple prop.
  • Like with the single selection, you can pull out the new value by accessing in the onValueChange callback. It’s always an array.

Source Code

import {
  Autocomplete,
  AutocompleteOption,
  ListItemText,
} from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { AutocompleteItems } from '../../utils/Autocomplete/helpers';

export function Multiple() {
  const [value, setValue] = React.useState<string[]>([]);

Limit Tags

  • While autocomplete is enabled multiple selection, you can use the limitTags prop to to limit the number of displayed options.
Helper Text

Source Code

import {
  Autocomplete,
  AutocompleteOption,
  ListItemText,
} from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { AutocompleteItems } from '../../utils/Autocomplete/helpers';

export function LimitTags() {
  const [value, setValue] = React.useState<string[]>(['2', '3', '4']);

Limit Tags Idle

  • If true, the show/hide selected tags functionality will be disabled. All the selected tags that exceed limitTags number will be hidden.
  • Default is false.
Helper Text

Source Code

import {
  Autocomplete,
  AutocompleteOption,
  ListItemText,
} from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { AutocompleteItems } from '../../utils/Autocomplete/helpers';

export function LimitTagsIdle() {
  const [value, setValue] = React.useState<string[]>(['1', '3', '4']);

Creatable mode

  • You can create selected values by your own logic with the onValueChange callback with Enter key.
  • The onValueChange callback will be called with the new value as an array of strings.
Type something and press "Enter" to create a new item. (e.g. "new item")

Source Code

import {
  Autocomplete,
  AutocompleteInputChangeReasons,
  AutocompleteOption,
  ListItemText,
} from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { AutocompleteItems } from '../../utils/Autocomplete/helpers';

export function Creatable() {
  const [value, setValue] = React.useState<string[]>([]);

Custom Render Selected Items

  • You can customize the render of selected items by passing the renderSelectedItems prop.
  • The renderSelectedItems prop have type as a component that accept selectedItems and numberOfHiddenItem as props.

Prop

Description

itemSelected item data type AutocompleteItem
onDeleted

The built-in callback action to delete selected item

classNameThe built-in className prop for the selected item is passed to the Tag component
deletableThe built-in deletable prop for the selected item is passed to the Tag component
data-visible-on-activeThe built-in prop for a component that displays the selected item. If Autocomplete is set to limitTags, this prop will trigger show/hide behavior for the selected item.
disabled | readOnly | sizeThe props pass for a component that displays the selected item from Autocomplete
Helper Text

Source Code

import { FileDataOutline } from '@ocean-network-express/magenta-ui/icons';
import {
  Autocomplete,
  AutocompleteOption,
  ListItemText,
  Tag,
  TagContent,
} from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { AutocompleteItems } from '../../utils/Autocomplete/helpers';

Checkboxes

Source Code

import {
  Autocomplete,
  AutocompleteOption,
  Checkbox,
  ListItemText,
} from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { AutocompleteItems } from '../../utils/Autocomplete/helpers';

export function Checkboxes() {
  const [value, setValue] = React.useState<string[]>(['1', '2']);

Async items

Load on open

Helper Text

Source Code

import {
  Autocomplete,
  AutocompleteOption,
  ListEmpty,
  ListItemText,
  ListLoading,
} from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { AutocompleteItems } from '../../utils/Autocomplete/helpers';

export function Async() {

Load on input change

Helper Text

Source Code

import {
  Autocomplete,
  AutocompleteInputChangeReasons,
  AutocompleteItem,
  AutocompleteOption,
  ListEmpty,
  ListItemText,
  ListLoading,
} from '@ocean-network-express/magenta-ui/react';
import React from 'react';

export interface Response {

Grouping

  • Display categories with the ListSubheader component

Usage of ListSubheader component:

Source Code

<ListSubheader>DELIVERY SERVICES</ListSubheader>;
{
  deliveryServices.map((item, index) => {
    return (
      <AutocompleteOption key={`autocomplete-option-${item.value}-${index}`} item={item}>
        <ListItemText primaryText={item.label} />
      </AutocompleteOption>
    );
  });
}
  • To provide better user experience, the ListSubheader will only be displayed when there is at least one visible option in the group. You can add custom logic to control the display of ListSubheader components.

Logic Example:

Helper Text

Source Code

import {
  Autocomplete,
  AutocompleteOption,
  ListItemText,
  ListSubheader,
} from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import {
  ConditionalListItem,
  ConditionalListSubheaderGroup,
} from '../../utils/Autocomplete/Group.helpers';

Max Height

When there are too many selected options in autocomplete field, which may break the UI layout, you can set max height allowing the field to scroll through className.

Source Code

import {
  Autocomplete,
  AutocompleteOption,
  ListItemText,
} from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { AutocompleteItems } from '../../utils/Autocomplete/helpers';

export function MaxHeight() {
  const [value, setValue] = React.useState<string[]>(['1', '2', '3', '4', '5']);

DropdownConfig

The dropdownConfig props allow you to set the CSS of the dropdown list.

Width/Height

Helper Text

Source Code

import {
  Autocomplete,
  AutocompleteOption,
  ListItemText,
} from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { AutocompleteItems } from '../../utils/Autocomplete/helpers';

export function DropdownConfig() {
  const [value, setValue] = React.useState<string[]>([]);

Padding

Helper Text

Source Code

import {
  Autocomplete,
  AutocompleteOption,
  ListItemText,
} from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { AutocompleteItems } from '../../utils/Autocomplete/helpers';

export function DropdownConfigPadding() {
  const [value, setValue] = React.useState<string[]>([]);

Padding Content

  • The paddingContent prop allows you to set the padding of the dropdown list content.
Helper Text

Source Code

import {
  Autocomplete,
  AutocompleteOption,
  ListItemText,
} from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { AutocompleteItems } from '../../utils/Autocomplete/helpers';

export function DropdownConfigInnerPadding() {
  const [value, setValue] = React.useState<string[]>([]);

Strategy

  • The strategy prop allows you to control the positioning strategy of the popover.
  • The available strategies are absolute and fixed.
  • The default strategy is fixed.
  • View more details: Fixed position scrolling example.

Placement

  • If you want to place the popover anywhere relative to the button, use the placement prop.
  • The available base directions are top, right, bottom, left.
  • Each of these base placements has an alignment in the form [direction]-start and [direction]-end. For example, right-start, or bottom-end.
  • The default placement is bottom-start.

Source Code

import {
  Autocomplete,
  AutocompleteOption,
  ListItemText,
} from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { AutocompleteItems } from '../../utils/Autocomplete/helpers';

export function Placement() {
  const [value, setValue] = React.useState<string[]>([]);

Render Input

  • The prop renderInput support to custom render Input field of autocomplete component.

Source Code

import {
  Autocomplete,
  AutocompleteOption,
  Button,
  Input,
  ListItemText,
  RenderAutocompleteInputProps,
  Tag,
  TagContent,
} from '@ocean-network-express/magenta-ui/react';
import React from 'react';

Re-order selected items

  • You can re-order selected list items by yourself with returned value from onValueChange call back.
Helper Text

Source Code

import {
  Autocomplete,
  AutocompleteOption,
  ListItemText,
  ListSubheader,
} from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { DefaultSelectItems, DefaultSelectItemsKeys } from '../../utils/Autocomplete/helpers';

export function ReOrderListItem() {
  const [value, setValue] = React.useState<string[]>([]);

Select All

  • You can select all items in the Autocomplete by adding custom Select All option.
Helper Text

Source Code

import {
  Autocomplete,
  AutocompleteOption,
  Checkbox,
  ListItemIcon,
  ListItemText,
} from '@ocean-network-express/magenta-ui/react';
import React from 'react';

import { IGNORE_VALUE, SelectAllOptions, ValidOptions } from '../../utils/Autocomplete/helpers';

export function SelectAll() {

Custom Input Props

  • The inputProps prop support to add custom props for the input element of autocomplete component.

Example pass autocomplete attribute to input element

  • The autocomplete attribute provides a hint to the user agent specifying how to, or indeed whether to, prefill a form control.
  • Definition of autocomplete prop
  • Modern browsers like Chrome use “educated guesses” to decide which fields should be autofilled. When you set autocomplete=“disabled” or use a random string, you are giving the browser an instruction it doesn’t recognize. Because the browser doesn’t have a rule for that value, it often gets confused and stops trying to fill the field entirely.
Helper Text

Source Code

import {
  Autocomplete,
  AutocompleteOption,
  Input,
  ListItemText,
} from '@ocean-network-express/magenta-ui/react';
import React from 'react';

const EmailItems = [
  { value: 'john.doe@example.com', label: 'john.doe@example.com' },
  { value: 'jane.doe@example.com', label: 'jane.doe@example.com' },
  { value: 'jim.doe@example.com', label: 'jim.doe@example.com' },

Was this page helpful?