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 or via a datasource which follows the fw-select-option schema.

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

Show Code

# 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
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 ''
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 ''
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
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 ''
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>

# 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>

# 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-avatar
  fw-tag --> fw-icon
  fw-icon --> fw-toast-message
  fw-toast-message --> fw-spinner
  fw-toast-message --> fw-icon
  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-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) →