Autocomplete
Importβ
import { Autocomplete } from '@resultadosdigitais/tangram-components'
Propertiesβ
value
β
Type | object | array |
---|
Descriptionβ
Sets the Autocomplete
value. Providing an empty object will set no value.
Used for controlled component.
defaultValue
β
Type | object | array |
---|
Descriptionβ
Sets the Autocomplete
default value. Providing an empty object will set no value.
Used for uncontrolled component.
options
β
Type | arrayOf(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
β
Type | func |
---|---|
Param | option 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
β
Type | func |
---|---|
Param | option 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
β
multiple
β
Type | bool |
---|---|
Default | false |
Descriptionβ
Sets multiple selection.
When it is true
, the value
or the defaultValue
must be an array.
kind
β
loading
β
disabled
β
Type | bool |
---|---|
Default | false |
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
β
Type | string | 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
β
hideClear
β
renderNoOption
β
Type | string | func |
---|---|
Param | inputValue 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
β
Type | string | func |
---|---|
Param | props Object - Object with information available for rendering the footer in case the attribute value is a function. |
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
β
Type | func |
---|---|
Param | event React.SyntheticEvent - The event source of the callback. |
Param | value (Object|Object[]) - The selected value. When multiple is true , the value is an array. |
Param | payload Object - Additional information about component status. |
Descriptionβ
Callback triggered when the value
requests to be changed.
onClear
β
Type | func |
---|---|
Param | event React.SyntheticEvent - The event source of the callback. |
Descriptionβ
Callback triggered when the clear button is clicked.
onInputChange
β
Type | func |
---|---|
Param | event React.SyntheticEvent - The event source of the callback. |
Param | inputValue String - The input value. |
Param | payload Object - Additional information about component status. |
Descriptionβ
Callback triggered when the inputValue
changes.
onClose
β
Type | func |
---|---|
Param | event React.SyntheticEvent - The event source of the callback. |
Param | reason String - Can be Autocomplete.closeReasons.clear , Autocomplete.closeReasons.blur , Autocomplete.closeReasons.escape or Autocomplete.closeReasons.clickOption . |
Descriptionβ
Callback triggered when the Autocomplete
closes.
onOpen
β
Type | func |
---|---|
Param | event 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
β
label
πβ
Concerns | π Required |
---|---|
Type | string |
Descriptionβ
Sets the label, the main text displayed by the component.
value
β
auxiliaryText
β
truncate
β
Type | bool |
---|
Descriptionβ
Identifies that the label and the auxiliary text will be truncated when it exceeds the available size.
icon
β
Type | node |
---|
Descriptionβ
Sets icon to be displayed at the beginning of the item.
This property is ignored when the Autocomplete
multiple
property is true
.
suffix
β
<AutocompleteTitle />β
Importβ
import { AutocompleteTitle } from '@resultadosdigitais/tangram-components'