Skip to main content

Autocomplete

Import​

import { Autocomplete } from '@resultadosdigitais/tangram-components'

Properties​

value​

Typeobject | array

Description​

Sets the Autocomplete value. Providing an empty object will set no value. Used for controlled component.

defaultValue​

Typeobject | array

Description​

Sets the Autocomplete default value. Providing an empty object will set no value. Used for uncontrolled component.

options​

TypearrayOf(object)
Default[]

Description​

Sets all options displayed by the Autocomplete's dropdown.

const options = [{value: '104f597f-63cc-4717-84b2-ac0086d13a9a', label: 'Joel'}, {value: '9a18a955-e615-405b-90c8-a939daaefe51', label: 'Ellie'}]

getOptionLabel​

Typefunc
Paramoption Object - The option.
Returns(String|Number) - A string or number to be used as label.

Description​

A function used to customize and return the label of each option. If this property is undefined, your option must have a label property. Only works when options property is defined.

const options = [{id: '104f597f-63cc-4717-84b2-ac0086d13a9a', name: 'Joel'}, {id: '9a18a955-e615-405b-90c8-a939daaefe51', name: 'Ellie'}]
const getOptionLabel = (option) => option.name

getOptionValue​

Typefunc
Paramoption Object - The option.
Returns(String|Number) - A string or number to be used as value.

Description​

A function used to customize and return the value of each option. If this property is undefined, your option must have a value property. Only works when options property is defined.

const options = [{id: '104f597f-63cc-4717-84b2-ac0086d13a9a', name: 'Joel'}, {id: '9a18a955-e615-405b-90c8-a939daaefe51', name: 'Ellie'}]
const getOptionValue = (option) => option.id

placeholder​

Typestring

Description​

Sets the text displayed when no option is selected.

multiple​

Typebool
Defaultfalse

Description​

Sets multiple selection. When it is true, the value or the defaultValue must be an array.

kind​

Type
Enum of:
  • Autocomplete.kinds.input
  • Autocomplete.kinds.select
DefaultAutocomplete.kinds.select

Description​

Sets the Autocomplete's appearance.

loading​

Typebool
Defaultfalse

Description​

Sets the loading visibility.

disabled​

Typebool
Defaultfalse

Description​

When it is true, makes the element not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control.

id​

Typestring | number

Description​

This property is used to implement accessibility logic. If you don't provide a value for this property then it will be generated randomly.

name​

Typestring

Description​

Sets the Autocomplete's name.

hideClear​

Typebool
Defaultfalse

Description​

Hides the clear button.

renderNoOption​

Typestring | func
ParaminputValue String - The input value.

Description​

Sets the text to be displayed when an option with the label typed in the input does not exists. If you want to customize the renderization of this property, you must pass a component instead.

renderNoOption="No option found"
renderNoOption={(inputValue) => <Text>No "{inputValue}" found</Text>}

renderFooter​

Typestring | func
Paramprops Object - Object with information available for rendering the footer in case the attribute value is a function.
  • props.inputValue String - The value of input.
  • props.hasOption Boolean - A boolean to indicates if has option available in the search.
  • props.close Function - Function that closes the Autocomplete options list.
  • props.selectedOption Object - Useful when multiple property is false (default). This property returns the selected option.
  • props.selectedOptions Object[] - Useful when multiple property is true. This property returns a list with all selected options.
  • props.clearInputValue Function - Function to clear the value of input.

Description​

Sets the footer.

// Can be a string:
renderFooter="My footer"

// Or a function:
renderFooter={({ inputValue, hasOption, close, selectedOption }) => <Button onClick={() => myFunction(selectedOption)}>Add "{inputValue}"</Button>}

onChange​

Typefunc
Paramevent React.SyntheticEvent - The event source of the callback.
Paramvalue (Object|Object[]) - The selected value. When multiple is true, the value is an array.
Parampayload Object - Additional information about component status.
  • payload.reason String - The reason for change. Can be Autocomplete.changeReasons.clickOption.

Description​

Callback triggered when the value requests to be changed.

onClear​

Typefunc
Paramevent React.SyntheticEvent - The event source of the callback.

Description​

Callback triggered when the clear button is clicked.

onInputChange​

Typefunc
Paramevent React.SyntheticEvent - The event source of the callback.
ParaminputValue String - The input value.
Parampayload Object - Additional information about component status.
  • payload.reason String - The reason for changes. Can be Autocomplete.changeReasons.clickOption or Autocomplete.changeReasons.type.

Description​

Callback triggered when the inputValue changes.

onClose​

Typefunc
Paramevent React.SyntheticEvent - The event source of the callback.
Paramreason String - Can be Autocomplete.closeReasons.clear, Autocomplete.closeReasons.blur, Autocomplete.closeReasons.escape or Autocomplete.closeReasons.clickOption.

Description​

Callback triggered when the Autocomplete closes.

onOpen​

Typefunc
Paramevent React.SyntheticEvent - The event source of the callback.

Description​

Callback triggered when the Autocomplete opens.

<AutocompleteDivider />​

Import​

import { AutocompleteDivider } from '@resultadosdigitais/tangram-components'

<AutocompleteOption />​

Import​

import { AutocompleteOption } from '@resultadosdigitais/tangram-components'

Properties​

disabled​

Typebool
Description​

Disables the Autocomplete.Option.

label πŸ“β€‹

Concerns
πŸ“ Required
Typestring
Description​

Sets the label, the main text displayed by the component.

value​

Typestring | number
Description​

Sets the value.

auxiliaryText​

Typestring
Description​

Sets the auxiliary text.

truncate​

Typebool
Description​

Identifies that the label and the auxiliary text will be truncated when it exceeds the available size.

icon​

Typenode
Description​

Sets icon to be displayed at the beginning of the item. This property is ignored when the Autocomplete multiple property is true.

suffix​

Typenode
Description​

Sets a content to be displayed at the end of the item.

<AutocompleteTitle />​

Import​

import { AutocompleteTitle } from '@resultadosdigitais/tangram-components'

Properties​

children πŸ“β€‹

Concerns
πŸ“ Required
Typenode
Description​

Sets the children element.

Feedback​