MultipleAutocomplete

How to get MultipleAutocomplete

import { MultipleAutocomplete } from 'fds/components';

Type: Component

An autocompletable TextInput with an ItemsMenu inside a Drop for rendering the autocomplete suggestions. Allows for toggling multiple items. Toggled items are displayed in chips above the TextInput.

Keyboard behavior:

  • ArrowDown: open the Drop

  • Escape: close the Drop

Props

# Name Type Description
1. [emptyVisual] String | ReactElement

The visual to use when the component has no values. Usually displayed in a StateMessage or CompactStateMessage as appropriate.

  Default value
"exclamation-triangle"
2. [isDisabled] Boolean

Whether or not the component should be rendered in a disabled state.

  Default value
false
3. items Array<ItemWithLabelAndValue>
  ItemWithLabelAndValue

Type: Object

An item with a label property with a string value to display and a property to hold the actual value.

Properties

Name Type Description
label String | Number

The human readable label for the item, displayed by the component as needed.

tooltipContent String | ReactElement

The content of the tooltip to be shown for the item.

The content of the tooltip that is displayed when hovering over the whole component.

  • string: the textual content of the tooltip

  • ReactElement: a React Element (instance of a React Component, usually created with JSX)

value *

The actual value of the item.

The value of an ItemWithLabelAndValue.

This value is used to compare items, eg. when determining the selected item(s).

Depending on the component, the data type in JavaScript might be restricted further: eg: a TimeSelect might expect a Date, a TextInput a string etc. These restrictions are implemented with React PropTypes console warnings.

4. [name] String

The name of this component to identify it (and its value) when used inside an intelligent container component which aggregates its children (and/or their values), like a Form.

  Default value
null
5. [onChange] Function

A callback that is called whenever a component's value changes.

This callback is called just before the "validate" prop is called.

Use this callback to update local state which in turn should update the value prop of the component whose callback just fired.


  Arguments
# Name Type Description
1. value Value | Array<ItemWithLabelAndValueValue>

A single value or an array of values, depending on the component that is changing.


  Value

Type: *

The current value of the component. This value will be visualized in the component, often using a human readable label, sometimes using another visual indication (e.g. Checkbox).

Depending on the component, the data type in JavaScript might be restricted further: eg: a TimeSelect might expect a Date, a TextInput a string etc. These restrictions are implemented with React PropTypes console warnings.

  ItemWithLabelAndValueValue

Type: *

The value of an ItemWithLabelAndValue.

This value is used to compare items, eg. when determining the selected item(s).

Depending on the component, the data type in JavaScript might be restricted further: eg: a TimeSelect might expect a Date, a TextInput a string etc. These restrictions are implemented with React PropTypes console warnings.

6. [onRef] Function

A callback that is called whenever a component's ref changes.

Use this callback to get a ref to (the domNode of) a component. There shouldn't be many usecases for using this prop yourself, but you might have to implement it with a given argument from a render callback somewhere.

For more information about React and "refs", check the React documentation


  Arguments
# Name Type Description
1. domNode HTMLElement

The domNode on which the component placed its ref callback attribute.

  Returns

Type: void

7. [placeholder] String

The placeholder text displayed in component when it is empty, i.e. has no values.

  Default value
""
8. [renderEmptyMessage] Function

A callback that is called when rendering the empty state for a component, i.e. when it has no values.

Use this callback to customize the message displayed near the empty visual.


  Arguments
# Name Type Description
1. [inputValue] String

The current value of an input component, if used/applicable.

  Returns

Type: void

9. [tooltipContent] String | ReactElement

The content of the tooltip that is displayed when hovering over the whole component.

  • string: the textual content of the tooltip

  • ReactElement: a React Element (instance of a React Component, usually created with JSX)

  Default value
null
10. [validate] Function

A callback that is called directly after the value(s) of a form component change(s).

Use this callback to check the selected value(s) against business rules and to set any feedback for the user based on this.


  Arguments
# Name Type Description
1. value Value | Array<ItemWithLabelAndValueValue>

A single value or an array of values, depending on the component being validated.


  Value

Type: *

The current value of the component. This value will be visualized in the component, often using a human readable label, sometimes using another visual indication (e.g. Checkbox).

Depending on the component, the data type in JavaScript might be restricted further: eg: a TimeSelect might expect a Date, a TextInput a string etc. These restrictions are implemented with React PropTypes console warnings.

  ItemWithLabelAndValueValue

Type: *

The value of an ItemWithLabelAndValue.

This value is used to compare items, eg. when determining the selected item(s).

Depending on the component, the data type in JavaScript might be restricted further: eg: a TimeSelect might expect a Date, a TextInput a string etc. These restrictions are implemented with React PropTypes console warnings.

  Returns

Type: Object

The result of validating form input.

Properties

Name Type Description
connotation String

Determines the text/border color of the feedback message.

Specifies the meaning and/or severity of the given feedback. The possible values are: (from least to most severe)

  • 'success'

  • 'info'

  • 'warning'

  • 'error'

message String

The textual content of the feedback message shown near the form component whose validate callback yielded this result.

  Default value
null
11. values Array<ItemWithLabelAndValueValue>
  Default value
[]

  ItemWithLabelAndValueValue

Type: *

The value of an ItemWithLabelAndValue.

This value is used to compare items, eg. when determining the selected item(s).

Depending on the component, the data type in JavaScript might be restricted further: eg: a TimeSelect might expect a Date, a TextInput a string etc. These restrictions are implemented with React PropTypes console warnings.