# 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

Starks Lannisters Starks Lannisters Sand Greyjoys Tyrell
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

Last Updated: 12/21/2020, 7:42:36 AM