Skip to main content

Select

Import​

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

Properties​

children​

Typenode

Description​

Sets the children.

defaultValue​

Typeany

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​

Typeany

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​

Typebool
Defaultfalse

Description​

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

placeholder​

Typestring

Description​

Sets the text displayed when no value is selected.

open​

Typebool

Description​

A boolean value to control if render opened.

disabled​

Typebool
Defaultfalse

Description​

Sets if is disabled.

startIcon​

Typenode

Description​

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

success​

Typebool
Defaultfalse

Description​

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

error​

Typebool
Defaultfalse

Description​

Sets if selected value is invalid.

maxHeight​

Typenumber
Default460

Description​

Sets the max list height.

dropdownComponent​

TypeelementType

Description​

Sets the custom Dropdown component.

dropdownAnchor​

Typeinstance 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​

Typefunc | object

Description​

Sets the ref to the input element.

renderInputValue​

Typefunc
Paramprops 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​

Typefunc
Paramprops 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.
Paramrest 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​

Typefunc
Paramevent React.SyntheticEvent - The event source of the callback.
Paramvalue * - The new intended value for the Select.
Paraminfos 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​

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

Description​

Callback fired when the select is close.

onOpen​

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

Description​

Callback fired when select will open.

renderValue 🗑️​

Concerns
🗑️ Deprecated
Typefunc
Paramvalue 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​

TypeError to identify property type
Default0

Description​

<SelectDisplay />​

Import​

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

Properties​

showPlaceholder​

Typebool
Defaultfalse
Description​

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

<SelectDisplayTag />​

Import​

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

Properties​

value​

Typeany | arrayOf
Description​

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

label​

Typestring | 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​

Typebool
Description​

Indicates if it is a multiple selection.

placeholder​

Typestring
Description​

Sets the text displayed when no value is selected.

deselect​

Typefunc
Paramevent React.SyntheticEvent - The event responsible for triggering deselection.
Paramvalue * - 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​

Typenode
Description​

Sets the children.

<SelectGroup />​

Import​

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

Properties​

children​

Typenode
Description​

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

label​

Typenode
Description​

Sets the label of the group.

collapsible​

Typebool
Defaultfalse
Description​

Sets the Select.Group as collapsible.

defaultClose​

Typebool
Description​

Starts a collapsible Select.Group as closed.

<SelectHeader />​

Import​

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

Properties​

children​

Typenode
Description​

Sets the children.

<SelectOption />​

Import​

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

Properties​

children​

Typenode
Description​

Sets the children.

value​

Typeany
Default''
Description​

Sets the value when the option is selected.

disabled​

Typebool
Defaultfalse
Description​

Sets the option as disabled.

listItemProps​

Typeobject
Description​

Sets the List.Item props.

renderCheck​

Typefunc
Paramprops 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.
Paramrest 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​

TypeError to identify property type
Defaultfalse
Description​

<SelectOptionLabel />​

Import​

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

Properties​

label​

Typestring
Description​

Sets the label.

auxiliaryText​

Typestring
Description​

Sets the auxiliary text.

Feedback​