# 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.
`hint-text`, `warning-text`, `error-text` can be passed as slots
# Usage
# Demo with datasource
# 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 andstring[]
for multi-select. The params for the functionsetSelectedValues
will be of typestring
for single select andstring[]
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.
# Usage for setting/getting selected options
# Demo with dynamic filter option
undefined
# Usage of dynamic filter option
# Demo with select variants
# Usage for select variants
# Navigation Demo with large option
# 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