Select

UsoExemplos
• Código

Import

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

Properties

children

Type	node

Description

Sets the children.

defaultValue

Type	any

Description

Sets the value. Used for Uncontrolled component. Initial value of the selected option, or an array of initial values ​​in case of multiple selection.

value

Type	any

Description

Used for Controlled component. Value of the selected option, or an array of values ​​in case of multiple selection. The input value. Set to an empty string ('') if you don't want any of the available options to be selected. If is multiple the value need to be an array ([]).

multiple

Type	bool
Default	false

Description

Sets multiple selection. If is multiple the value or defaultValue need to be an array.

placeholder

Type	string

Description

Sets the text displayed when no value is selected.

open

Type	bool

Description

A boolean value to control if render opened.

disabled

Type	bool
Default	false

Description

Sets if is disabled.

startIcon

Type	node

Description

Sets icon to be displayed at the beginning of the input.

success

Type	bool
Default	false

Description

When is true, changes the layout to demonstrate that something positive has happened.

error

Type	bool
Default	false

Description

Sets if selected value is invalid.

maxHeight

Type	number
Default	460

Description

Sets the max list height.

dropdownComponent

Type	elementType

Description

Sets the custom Dropdown component.

dropdownAnchor

Type	instance of Element

Description

The custom anchor element for the dropdown. Useful for component development where Select is present internally but the dropdown must be positioned relative to another component of the composition.

inputRef

Type	func | object

Description

Sets the ref to the input element.

renderInputValue

Type

func

Param

props Object - Object with information available for rendering the input value. props.value * - The value provided to the Select component. props.label string|string[] - The label of the selected option. props.placeholder string - The placeholder of the Select component. props.multiple boolean - The multiple selection state. props.deselect function - The function to deselect an option. props.clear function - The function to clear all the selection.

Description

Render the selected value in the input. When using it, you will have to deal with the rule of displaying the placeholder when there is no value. The layout will come clean, so if you want to keep the existing layout you will have to encapsulate the result with the component Select.Display.

<Select
  renderInputValue={({ label, placeholder }) => {
    return (
      <Select.Display showPlaceholder={!label}>
        {label || placeholder}
      </Select.Display>
    );
  }}
/>

Receives an React.SyntheticEvent and a value as parameter. Receives an React.SyntheticEvent.

renderCheck

Type	func
Param	props Object - Object with information available for rendering the selection inidicator. props.selected boolean - true if the Select.Option is selected, false otherwise. props.multiple boolean - The multiple selection state. props.value * - The value prop of the Select.Option. props.label string - The label of the Select.Option. props.disabled boolean - The disabled prop of the Select.Option.
Param	rest Object - The rest of the props passed to the Select.Option.

Description

Render custom selection indicator.

<Select
  renderCheck={({ selected, disabled }) => (
    <RoundedIcon
      fill={`var(${
        disabled
          ? '--neutral-icon-disabled'
          : selected
          ? '--primary-icon'
          : '--neutral-icon-low-emphasis'
      })`}
      size={RoundedIcon.sizes.xs}
    >
      <Checkmark
        title="Checkmark icon"
        fill="var(--neutral-icon-inverse)"
      />
    </RoundedIcon>
  )}
/>

onChange

Type	func
Param	event React.SyntheticEvent - The event source of the callback.
Param	value * - The new intended value for the Select.
Param	infos Object - Additional information about the selected option. infos.label (string|string[]) - The label of the selected option.

Description

Callback fired when the select changes.

onClose

Type	func
Param	event React.SyntheticEvent - The event source of the callback.

Description

Callback fired when the select is close.

onOpen

Type	func
Param	event React.SyntheticEvent - The event source of the callback.

Description

Callback fired when select will open.

renderValue 🗑️

Concerns	🗑️ Deprecated
Type	func
Param	value any - The value provided to the component.

Description

Render the selected value. When using it, you will have to deal with the rule of displaying the placeholder when there is no value. The layout will come clean, so if you want to keep the existing layout you will have to encapsulate the result with the component Select.Display.

<Select
  renderValue={(value) => {
    // The value is like { name: '', ... }
    const displayText = value?.name;

    return (
      <Select.Display showPlaceholder={displayText === ""}>
        {displayText || "Select an option..."}
      </Select.Display>
    );
  }}
/>

tabIndex

Type	Error to identify property type
Default	0

Description

<SelectDisplay />

Import

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

Properties

showPlaceholder

Type	bool
Default	false

Description

Add this property when the placeholder is displayed to enable appropriate styles.

<SelectDisplayTag />

Import

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

Properties

value

Type	any | arrayOf

Description

Value of the selected option, or an array of values ​​in case of multiple selection.

label

Type	string | arrayOf

Description

Label associated with the selected value, or an array of labels in case of multiple selection, with each label in the same position in the array as its associated value.

multiple

Type	bool

Description

Indicates if it is a multiple selection.

placeholder

Type	string

Description

Sets the text displayed when no value is selected.

deselect

Type	func
Param	event React.SyntheticEvent - The event responsible for triggering deselection.
Param	value * - The value of the option that will be deselected.

Description

The function that will be used to deselect an option.

<SelectDivider />

Import

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

<SelectFooter />

Import

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

Properties

children

Type	node

Description

Sets the children.

<SelectGroup />

Import

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

Properties

children

Type	node

Description

Sets the children. Ideally one or more Select.Option.

label

Type	node

Description

Sets the label of the group.

collapsible

Type	bool
Default	false

Description

Sets the Select.Group as collapsible.

defaultClose

Type	bool

Description

Starts a collapsible Select.Group as closed.

<SelectHeader />

Import

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

Properties

children

Type	node

Description

Sets the children.

<SelectOption />

Import

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

Properties

children

Type	node

Description

Sets the children.

value

Type	any
Default	''

Description

Sets the value when the option is selected.

disabled

Type	bool
Default	false

Description

Sets the option as disabled.

listItemProps

Type	object

Description

Sets the List.Item props.

renderCheck

Type	func
Param	props Object - Object with information available for rendering the selection inidicator. props.selected boolean - true if the Select.Option is selected, false otherwise. props.multiple boolean - The multiple selection state. props.value * - The value prop of the Select.Option. props.label string - The label of the Select.Option. props.disabled boolean - The disabled prop of the Select.Option.
Param	rest Object - The rest of the props passed to the Select.Option.

Description

Render custom selection indicator. It takes precedence over the Select renderCheck.

<Select
  renderCheck={({ selected, disabled }) => (
    <RoundedIcon
      fill={`var(${
        disabled
          ? '--neutral-icon-disabled'
          : selected
          ? '--primary-icon'
          : '--neutral-icon-low-emphasis'
      })`}
      size={RoundedIcon.sizes.xs}
    >
      <Checkmark
        title="Checkmark icon"
        fill="var(--neutral-icon-inverse)"
      />
    </RoundedIcon>
  )}
/>

selected

Type	Error to identify property type
Default	false

Description

<SelectOptionLabel />

Import

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

Properties

label

Type	string

Description

Sets the label.

auxiliaryText

Type	string

Description

Sets the auxiliary text.

Feedback