# 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.
# Usage
Show Code
# Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
autofocus | autofocus | If true, the select component is auto focused on the page | boolean | false |
disabled | disabled | Disables the component on the interface. If the attribute’s value is undefined, the value is set to false. | boolean | false |
forceSelect | force-select | If true, the user must select a value. The default value is not displayed. | boolean | true |
label | label | Label displayed on the interface, for the component. | 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 | '' |
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 |
state | state | Theme based on which the list box is styled. | "error" or "normal" or "warning" | 'normal' |
stateText | state-text | Descriptive or instructional text displayed below the list box. | string | '' |
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" or "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 |
# 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>
# setSelectedValues(values: string[]) => Promise<any>
# Returns
Type: Promise<any>
# CSS Custom Properties
| Name | Description |
|---|---|
--max-height | Maximum height of the select component |
--min-height | Minimum height of the select component |
# Dependencies
# Used by
# Depends on
# Graph
graph TD;
fw-select --> fw-tag
fw-select --> fw-select-option
fw-datepicker --> fw-select
fw-timepicker --> fw-select
style fw-select fill:#f9f,stroke:#333,stroke-width:4px
Built with ❤ at Freshworks