Functionality
Overview
Webix contains several controls that allow selecting options from the list. This group includes Select, RichSelect, Combo, Multicombo, Multiselect, Checkbox, Switch, Radio and Suggest List controls. Each select control is fast, lightweight, and customizable.
The Select component represents the most common example of such a control. It allows selecting a single item from the drop-down list.
If your app requires extended functionality, you can look for the ideal solution among more complex controls. For example, the Multicombo control will be helpful for creating an online email client. It will allow selecting multiple recipients from a drop-down list of contacts. Also, a user can type symbols into the text field to filter available items.
Checkbox
Checkbox is a control that lets a user manage possible options by choosing either an enabled or disabled state for them. You can use a set of checkboxes to allow selecting multiple items from the list. It works just like a standard HTML checkbox.
Switch
Switch is a slider variation of a checkbox. It can be used for enabling or disabling some settings. Switch can be combined with a label, which can be placed on top of it to reflect 'on' and 'off' states.
Radio
Radio presents a block of items that lets you choose one of them. This control will be your best choice if you need a user to select just one of the available options. It works just like a standard HTML radio.
Suggest List
Suggest List is a control that can help users with filling forms. When a user starts typing, a list of relevant options appears on the screen. This list of suggestions is formed according to the typed text. You can use this control with a standard HTML input, Webix text control, or a text editor within a widget data item. Webix provides different types of a Suggest List control.
Type letter 'a' in the 'Country' field
MultiSuggest
MultiSuggest is an advanced version of a Suggest List control. This drop-down list of suggested options is used in the Multiselect control and allows selecting multiple items at once. The selected items are highlighted. The button at the bottom of the list allows confirming the choice.
CheckSuggest
CheckSuggest is an advanced version of a Suggest List control that allows a user to select multiple items at once. Each item of the list is equipped with a checkbox to highlight the chosen options.
GridSuggest
GridSuggest is an advanced version of the Suggest List. The drop-down list of available options is presented by the DataTable widget, a fully customizable component that visualizes data in the form of a sortable table with a scroll support.
DataSuggest
DataSuggest is an advanced version of a Suggest List control. In this Suggest List extension, the drop-down list of available options is presented by the DataView widget which is perfect for using images as list items.
DateRangeSuggest
DateRangeSuggest is an advanced version of the Suggest List control. The drop-down list is presented by the DateRangePicker control and allows selecting a particular date range.
Select
Select is a control that allows choosing a particular item from a drop-down list. It works similarly to the HTML < select > input and doesn't require much effort to add it to your app.
RichSelect
RichSelect looks like a non-editable text input with a pop-up window containing a list of options. The pop-up window appears after you click the text input. It is possible to adjust the configuration of the RichSelect in various ways. You can set the template and size of the suggest list, define the way of options loading, choose the type of a suggest, get popup and list objects to work with them separately.
Combo
The Combo control is an editable text input with a pop-up window that appears on the screen after you click the text field. This pop-up window contains a list of items that a user can select from. It's also possible to edit the content of the text field. The items of the list will be filtered according to the inserted values. Combo possesses extended configuration settings for the suggest list.
Start to fill in 'Banana' in the Fruit field
Multicombo
Multicombo is an editable control that comes in tandem with the CheckSuggest popup list. Each list item has a checkbox which allows users to select several options at once. The list appears after clicking the input field. While the user is entering symbols into the input field, items in the list are filtered accordingly. Selected Items can be removed from the input field by clicking the 'cross' sign. It is also possible to adjust the way of displaying selected items and show only their number.
Multiselect
Multiselect is a non-editable control that allows users to select multiple items from the dedicated drop-down list. You can get access to the list of items by clicking on the input field. By default Multiselect is supplied with the CheckSuggest popup list, that's why each list option contains a checkbox. The configuration of the control as well as the suggest list appearance and functionality can be optionally customized.