Crayons

# Select (fw-select)

fw-select displays a list or drop-down box that enables selection of an option or multiple options from an available list of values.

# Demo

The data for the select can either be passed as a child/slot* or via a datasource which follows the fw-select-option schema.

*Please note that we do not support dynamic updation of options when passed as a child/slot. Kindly utilise the options prop provided for dynamic updation of options.

Starks Lannisters Starks Lannisters Sand Greyjoys Tyrell Starks Lannisters

`hint-text`, `warning-text`, `error-text` can be passed as slots

Select singluar option
Starks Lannisters
Show Code

# Usage

# Demo with datasource

Starks Lannisters Sand Greyjoys Tyrell
Show Code

# Usage with datasource

# Demo for setting/getting selected options

To set the default selected value following methods can be used set setSelectedOptions or setSelectedValues or by directly modifying the value prop.

NOTE: The value will be of type string for single select and string[] for multi-select. The params for the function setSelectedValues will be of type string for single select and string[] for multi-select.

To get the selected values the consuming app can listen to fwChange event for detail attribute or by calling the method getSelectedItem which can be resolved to get the selected value.

Starks Lannisters Sand Greyjoys Tyrell Starks Lannisters Sand Greyjoys Tyrell Starks Lannisters Sand Greyjoys Tyrell
Show Code

# Usage for setting/getting selected options

# Demo with dynamic filter option

undefined
Show Code

# Usage of dynamic filter option

# Demo with select variants

Show Code

# Usage for select variants

# Demo with creatable select

Show Code

# Usage for select variants

Show Code

# Demo with option-label-path and option-value-path

undefined
Show Code

# Usage for option-label-path and option-value-path

# Using maxHeight property

maxHeight property can be used to set the maximum height of select when there are multiple choices selected. If the content overflows the specified height, it adds a scroll bar.

Show Code

# Usage for max-height property

# Using showDropdown and hideDropdown methods

The dropdown panel can be manually shown using showDropdown method and can be manually hidden using hideDropdown method

Show Dropdown Hide Dropdown

Starks Lannisters
Show Code

# Usage for showDropdown and hideDropdown methods

# Styling

Refer the css variables in fw-popover to control the height and width of the select popup. Refer the css variables for modifying the appearance of the the fw-select.

# Properties

Property Attribute Description Type Default
allowDeselect allow-deselect Whether clicking on the already selected option disables it. boolean true
boundary -- Describes the select's boundary HTMLElement HTMLElement undefined
caret caret Whether the arrow/caret should be shown in the select. boolean true
checkbox checkbox Place a checkbox. boolean false
creatableProps -- Props to be passed for creatable select isCreatable: boolean - If true, select accepts user input that are not present as options and add them as options validateNewOption: (value) => boolean - If passed, this function will determine the error state for every new option entered. If return value is true, error state of the newly created option will be false and if return value is false, then the error state of the newly created option will be true. formatCreateLabel: (label) => string - Gets the label for the "create new ..." option in the menu. Current input value is provided as argument. { isCreatable: boolean; validateNewOption: (_value: any) => boolean; formatCreateLabel: (label: any) => string; } { isCreatable: false, validateNewOption: (_value): boolean => true, formatCreateLabel: (label): string => label, }
debounceTimer debounce-timer Debounce timer for the search promise function. number 300
disabled disabled Disables the component on the interface. If the attribute’s value is undefined, the value is set to false. boolean false
errorText error-text Error text displayed below the text box. string ''
fallbackPlacements -- Alternative placement for popover if the default placement is not possible. [PopoverPlacementType] ['top']
forceSelect force-select If true, the user must select a value. The default value is not displayed. boolean true
hintText hint-text Hint text displayed below the text box. string ''
hoist hoist Option to prevent the select options from being clipped when the component is placed inside a container with overflow: auto\|hidden\|scroll. boolean false
label label Label displayed on the interface, for the component. string ''
labelledBy labelled-by If the default label prop is not used, then use this prop to pass the id of the label. string ''
max max Works with multiple enabled. Configures the maximum number of options that can be selected with a multi-select component. number Number.MAX_VALUE
maxHeight max-height Sets the max height of select with multiple options selected and displays a scroll when maxHeight value is exceeded string 'none'
multiple multiple Enables selection of multiple options. If the attribute’s value is undefined, the value is set to false. boolean false
name name Name of the component, saved as part of form data. string ''
noDataText no-data-text Text to be displayed when there is no data available in the select. string ''
notFoundText not-found-text Default option to be shown if the option doesn't match the filterText. string ''
optionLabelPath option-label-path Key for determining the label for a given option string 'text'
optionValuePath option-value-path Key for determining the value for a given option string 'value'
options options The data for the select component, the options will be of type array of fw-select-options. any undefined
optionsPlacement options-placement Placement of the options list with respect to select. "bottom" \| "bottom-end" \| "bottom-start" \| "left" \| "left-end" \| "left-start" \| "right" \| "right-end" \| "right-start" \| "top" \| "top-end" \| "top-start" 'bottom'
optionsVariant options-variant Standard is the default option without any graphics other options are icon and avatar which places either the icon or avatar at the beginning of the row. The props for the icon or avatar are passed as an object via the graphicsProps. "avatar" \| "icon" \| "standard" 'standard'
placeholder placeholder Text displayed in the list box before an option is selected. string undefined
readonly readonly If true, the user cannot modify the default value selected. If the attribute's value is undefined, the value is set to true. boolean false
required required Specifies the select field as a mandatory field and displays an asterisk next to the label. If the attribute’s value is undefined, the value is set to false. boolean false
sameWidth same-width Whether the select width to be same as that of the options. boolean true
search search Filter function which takes in filterText and dataSource and return a Promise. Where filter text is the text to filter the value in dataSource array. The returned promise should contain the array of options to be displayed. any undefined
searchable searchable Allow to search for value. Default is true. boolean true
selectedOptions -- Array of the options that is displayed as the default selection, in the list box. Must be a valid option corresponding to the fw-select-option components used in Select. any[] []
state state Theme based on which the list box is styled. "error" \| "normal" \| "warning" 'normal'
tagVariant tag-variant The variant of tag to be used. "avatar" \| "standard" 'standard'
type type Type of option accepted as the input value. If a user tries to enter an option other than the specified type, the list is not populated. "number" \| "text" 'text'
value value Value of the option that is displayed as the default selection, in the list box. Must be a valid value corresponding to the fw-select-option components used in Select. any undefined
variant variant The UI variant of the select to be used. "button" \| "mail" \| "standard" 'standard'
warningText warning-text Warning text displayed below the text box. string ''

# Events

Event Description Type
fwBlur Triggered when the list box loses focus. CustomEvent<any>
fwChange Triggered when a value is selected or deselected from the list box options. CustomEvent<any>
fwFocus Triggered when the list box comes into focus. CustomEvent<any>

# Methods

# getSelectedItem() => Promise<any>

# Returns

Type: Promise<any>

# hideDropdown() => Promise<any>

Hides the dropdown panel

# Returns

Type: Promise<any>

# setFocus() => Promise<any>

# Returns

Type: Promise<any>

# setSelectedOptions(options: any[]) => Promise<any>

# Returns

Type: Promise<any>

# setSelectedValues(values: string | string[]) => Promise<any>

# Returns

Type: Promise<any>

# showDropdown() => Promise<any>

Shows the dropdown panel

# Returns

Type: Promise<any>

# CSS Custom Properties

Name Description
--fw-error-color Color of the error text.
--fw-hint-color Color of the hint text.
--fw-select-border Border of the select component
--fw-select-border-radius Border radius of the select component
--fw-select-margin-bottom Bottom margin of the select component
--fw-warning-color Color of the warning text.

# Dependencies

# Used by

# Depends on

# Graph

graph TD;
  fw-select --> fw-tag
  fw-select --> fw-popover
  fw-select --> fw-button
  fw-select --> fw-spinner
  fw-select --> fw-icon
  fw-select --> fw-list-options
  fw-tag --> fw-tooltip
  fw-tag --> fw-avatar
  fw-tag --> fw-icon
  fw-tooltip --> fw-popover
  fw-button --> fw-spinner
  fw-button --> fw-icon
  fw-list-options --> fw-select-option
  fw-list-options --> fw-input
  fw-select-option --> fw-icon
  fw-select-option --> fw-checkbox
  fw-select-option --> fw-avatar
  fw-checkbox --> fw-icon
  fw-input --> fw-icon
  fw-country-phone --> fw-select
  fw-datepicker --> fw-select
  fw-form-control --> fw-select
  fw-timepicker --> fw-select
  style fw-select fill:#f9f,stroke:#333,stroke-width:4px

Built with ❤ at Freshworks

← Select Option (fw-select-option) →