Form Controls
Webix delivers a variety of controls that can be placed on the form.
Depending on the functionality they provide, these controls can be used for entering text,
selecting an option, date or color, switching between multiview cells, etc.
You can learn more about common controls functionality from the article Controls Guide.
The current article describes each form control in details.

Standard Buttons

{ view:"button", id:"my_button", value:"Button", type:"...", inputWidth:100 }
//types are descriped below
Related sample: Button ('button')
Icon Buttons

{ view:"button", type:"icon", icon:"mail", label:"Mail", width:80 }
Related sample: Icons
Image Buttons

{ view:"button", type: "image", image:".../img.gif", label: "Image Button" }
Related sample: Buttons: Type 'image'
HTML Buttons

{ view:"button", id:"my_button", value:"Button", type:"htmlbutton" }
Related sample: Buttons: Styling
Buttons with Badges

{ view:"button", width:40, badge:12, type:"icon", icon:"envelope" }
Related sample: Buttons: Type 'icon' with Badges
Main Button Types
Type of a button defines the way is looks like:
- base (no type) - default button;
- 'form' - a button for a form (darker than standard);
- 'danger' - a red button to attract user attention;
- 'prev' - a button with left arrow;
- 'next' - a button with right arrow;
- 'htmlbutton' - a button than can be defined by HTML markup;
- 'image' and its variations - a button with an image on it;
- 'icon' and its variations - a button with an icon in it.
Main properties
- value (string) - defines the text displayed on standard buttons (basic, form, danger, prev, next);
- label (string) - defines the text or/and HTML markup for the button of imabeButton and iconButton types and their valiarions as well as for htmlbutton;
- width (number) - sets the width of the button;
- inputWidth (number) - sets the width of the text on the button and adjusts button's width to it;
- image (string) - sets a path to the button icon;
- align (string)- positions a button with relation to a parent view;
- popup (string)- defines the ID of a popup window that will be shown on button click;
- click (function) - defines a function that will be executed on clicking the button (another possibility is to attach an event to it using the button's ID);
- css (string) - name of CSS class applied to a button;
- badge (number/string) - adds an orange circle that notifies about the number of new message for an icon button.
Specific button types as imagebutton and an icon button feature images / icons in their bodies and are described separately.
Controls Common Functionality
API Reference
Checkbox

Related sample: Check Box ('checkbox')
Checkbox enables zero, one and more choices from the defined list.
Checkbox Initialization
{ view:"checkbox", id:"field_a", label:"Second age", value:1}
Main properties
- label (string) - text label of a control. It can be customized by:
- labelAlign (string) - label alignment towards its container. Possible values are "left" and "right". In any way, it's placed left to the control;
- labelWidth - width of the label container;
- labelRight (string) - set the text of right-hand label. Only checkbox features this functionality;
- value (boolean) - defines whether the checkbox is selected by default or not (0 for false, 1 for true);
- align (string)- positions button with relation to a parent view;
- checkValue (string) - value of the checkbox in the checked state (1 by default);
- uncheckValue (string) - value of the checkbox in the unchecked state (0 by default);
Webix checkbox control is based on standard HTML checkbox yet some skins use a FontAwesome icon to render it. To switch to a standard HTML checkbox, use customCheckbox property:
{ view:"checkbox", customeCheckbox:false}
Controls Common Functionality
API Reference
Colorpicker

Colorpicker Initialization
{ view:"colorpicker", label:"Front color", name:"color", value:"#ffaadd" }
Related sample: Colorpicker in Form
Colorpicker is used with ui-related colorboard that is initialized on clicking the control. Colorpicker allows selecting a color from the board for its further usage.
Main Properties
- label (string) - text label of a control. It can be customized by:
- labelAlign (string) - label alignment towards its container. Possible values are "left" and "right". In any way, it's placed left to the control;
- labelWidth (number) - width of the label container;
- value(hex code) - the initial value of the picker that is changed by picking any color from the colorboard.
Controls Common Functionality
API Reference
Combo

Related sample: Editable Combo Box ('combo')
Ui-related combo is a text-like field with a popup window that appears as you click the field. A popup displays options for users to select. At the same
time, you can edit the text field and the items will be filtered according to the input values.
Combo Initialization
//short form
{ view:"combo", id:'field_m', label: 'Combo', value:"One", yCount:"3",
options:["One", "Two", "Three"]}
//full form
{ view:"combo", id:'field_t', label: 'Combo', value:"1", yCount:"3",
options:[
{id:1, value:"One"},
{id:2, value:"Two"},
{id:3, value:"Three"}
]}
//server options
{ view:"combo", options:"server/data.json"}
Main properties
- value (string, number)
- within options array it sets text value for selectable items;
- within Combo constructor it defines the initially selected item of the control (option ID in case of a full form, option text in case of a short form);
- placeholder (string) - defines placeholder for combo input. The control should be inited without an initial value;
- yCount (number) - the number of lines in a popup;
- options (array, object, string) - sets the options to choose from;
- label (string) - text label of a control. It can be customized by:
- labelAlign (string) - label alignment towards its container. Possible values are "left" and "right". In any way, it's placed left to the control;
- labelWidth (number) - width of the label container.
Advanced Combo Configuration
Combo box control can be customized in a number of ways, e.g.:
- options can be defined dynamically;
- options can be loaded from serverside;
- template can be changed;
- filtering rule can be changed..
To learn more, go to Advanced Combo and Richselect Settings article.
Pro Extensions for Combo
In the Webix Pro edition the control can be extended to show either a dataview or datatable in the popup:
Getting Current Value
In case of a full initialization form, the getValue() method for combo will return ID of selected option rather than text. Use getInput() to get to input object and, hence, the text value.
$$('field_t').getValue(); // ->returns 1
$$('field_t').getInput().value // -> returns "One"
Related sample: Working with UnitList Items
Alternatives to Combo Box
- richselect - identical to combo in look, but text field is non-editable.
- text coupled with suggest list. Indentical to combo in look, but while combo requires selection from a popup list, suggest offers values that can be either chosen or ignored.
Controls Common Functionality
API Reference
Counter
Counter is a spin-box helps select a number by clicking "+" and "-" buttons to reach the necessary value. Negative valuies are possible

Related sample: Spin Box ('counter')
Counter Initialization
{ view:"counter", label:"Age", step: 10, min:21, max:100}
Main properties
- label (string) - text label of a control. It can be customized by:
- labelAlign (string) - label alignment towards its container. Possible values are "left" and "right". In any way, it's placed left to the control;
- labelWidth (number) - width of the label container;
- step (number) - sets a step to the next value (1 by default);
- align (string)- positions a button with relation to the parent view;
- value (number) - the initial value of a control. 0 by default;
- min (number) - minimal value for a control. 0 by default;
- max (number) - maximum value for a control.
Note that if you set min and max parameters, the initial conreol value should be within the range.
Controls Common Functionality
API Reference
Datepicker

Related sample: Date Picker ('datepicker')
Datepicker is used in a combination with ui-related calendar that is initialized on clicking the control. It allows choosing a date and, optionally, time in the calendar for their further usage.
Datepicker initialization
{view:"datepicker", date: new Date(2012, 6, 8), label: 'Select Date', timepicker:true}
Main properties
- label (string) - text label of a control. It can be customized by:
- labelAlign (string) - label alignment towards its container. Possible values are "left" and "right". In any way, it's placed left to the control;
- labelWidth (number) - width of the label container;
- value (string, obj) - initial value to display in the control input field;
- placeholder (string) - defines placeholder for datepicker input. The control should be inited without an initial value;
- timepicker (boolean) - enables a clock for time selection (false by default);
- date (function) - new Date() constructor to define the initial date of a calendar. If used without parameters, shows current date;
- stringResult (boolean) - sets the data type of value returned by getValue()/get Values() methods. If true, it returns date as string. By default the property is false and the method returns date object;
- format (string) - sets a date format to display in the datepicker field. By default it is "%Y-%m-%d".
- type (string) - (optional) sets the datepicker type:
- "time" - configures datepicker for time selection only (uses webix.i18n.timeFormat as formatting pattern)
Datepickier type "time"

{ view:"datepicker", type:"time", stringResult:true}
Controls Common Functionality
API Reference
Fieldset

A grouping control based on HTML < fieldset > tag. Creates a group to put controls into and sets a border around the group.
Can be used to neatly put controls into layout:
{view:"fieldset", body:{
rows:[
{view:"text", ..},
{view:"button", ..}]
}
}
Related sample: Multiple Fieldsets
Or, to create a control group within a form:
{view:"form", elements:[
{view:"text", ..},
{view:"fieldset", body:{
rows:[
{view:"text", ..},
{view:"datepicker", ..}]}
}
]}
Related sample: Fieldset
Main Properties
- body (object) - fieldset body object that contains rows or cols array with controls;
- label (string) - text label of the control group, integrated into border.
Controls Common Functionality
API Reference
Icon

Icon Initialization
{ view:"icon", icon: 'mail', align:"left"}
Main properties
- align (string) - the alignment of component inside designated area;
- icon (string) - a predefined name of an icon, its name. Icons and their names are listed on the Font Awesome.
Icons in this lib exist in the form of a separate view (as described above), as a button type and as CSS class. Read more about Icon types in the dedicated chapter of the documentation.
Controls Common Functionality
API Reference

Image Button Initialization
{ view:"button", type: "image", image:".../img.gif", label: "Image Button"}
Related sample: Buttons: Type 'image'
Main Properties
- image (path) - path to the desired image;
- label (string) - text on a button by the image;
- type (string) - defines the type of a button. Numbers indicate image sizes:
- image - an image with a left-hand label (if any);
- imageTop - an image with a bottom label;
- imageButton - a button with an image and a left-hand label:
- imageButtonTop - a button with an image and a label below the image;
- width (number) - sets the width of the entire button including its image and text label.
Controls Common Functionality
Manipulating Groups of Buttons
Label

Ui-related label is a non-scrollable placeholder for plain text. Like other components, it features specific label property that sets text value.
Label Initialization
{ view:"label", label: "Label", inputWidth:100, align:"center"}
Related sample: Attributes
Main properties
- label (string) - defines text of the label control;
- inputWidth (number) - defines the width of the control;
- align (string) - positions the label with relation to the parent view.
Label control can be used to render any user HTML or icons (as well as built-in in Webix FontAwesome icons):
{ view:"label", label:"<span class='myCss'>My Label</span>"},
{ view:"label", label:"<span class='webix_icon fa-user'></span> My Label" }
Controls Common Functionality
API Reference
Multiselect
The control is available only in Webix Pro edition.

Related sample: Multi-select input
UI-related multiselect is a select control baed on Webix richselect and allows selecting multiple option at a time while displaying them in the dedicated
non-editable input field.
The control's popup is supplied with a "select" button out of box.
Multiselect initialization
{ view:"multiselect", id:"multi", label:"Participant", options:[
{ id:1, value:"Alex Brown" },
{ id:2, value:"Dan Simons" },
{ ... }
], value:"1,3" }
Main properties
- value (string) - the initial value to display in the input field, its ID. The string can be separated by a comma (",") to define multiple values;
- label (string) - text label of a control. It can be customized by:
- labelAlign (string) - label alignment towards its container. Possible values are "left" and "right". In any way, it's placed left to the control;
- labelWidth (number) - width of the label container;
- labelPosition (string) - defines label position related to the input field. The only possible value is "top";
- placeholder (string) - the initial text in the text field, disappears as you start typing in it;
- options (array, object) - defines the set of items to select from. Details;
- optionWidth (number) - defines the width of a popup list. By default, it is adjusted to the control width.
Changing "Select" button text
Multiselect control can be customized via extended configuration of its popup suggest, which is described in the Advanced Settings of Popup Selectors article.
Multiselect suggest features a buttonText property that allows defining any custom text for the button:
{view:"multiselect", label:"Participant",options:{
buttonText:"Done",
data:[
{ id:1, value:"Alex Brown" },
{ id:2, value:"Dan Simons" }
]
}}
Another way is to modify the locale.
"Select" button text is taken from the current locale (if other is not stated by buttonText, as shown above). The locale can be altered:
webix.i18n.controls.select = "Done";
webix.i18n.setLocale(); //apply the locale
Then all the multiselect instances in the app will be supplied with the "Done" word.
Accessing popup elements
Multiselect API allows getting to its constituent parts:
//button object
multiselect.getPopup().getButton();
//list object
multiselect.getpopup().getList();
Controls Common Functionality
API Reference
Multitext
The control is available only in Webix Pro edition.

Related sample: Multi-Text input
UI-related multitext is a dynamic control based on standard Webix text input. It offers users the possibility to add and delete additional fields on the go.
Multitext initialization
{ view:"multitext", id:"multi", value:'dummy@email.com, mirror@email.com', label:"Email" }
Main properties
- value (string) - the initial value to display in the input field. The string parts separated by a comma (",") will be put to additional input fields);
- label (string) - text label of a control. It can be customized by:
- labelAlign (string) - label alignment towards its container. Possible values are "left" and "right". In any way, it's placed left to the control;
- labelWidth (number) - width of the label container;
- labelPosition (string) - defines label position related to the input field. The only possible value is "top";
- placeholder (string) - the initial text in the text field, disappears as you start typing in it;
- icon (string) - the control's icon.
Field Collection IDs
Each field of a multitext control features its own ID. It can be either a given (for the basic field) or an auto-generated one.
All the methods of a multitext object can be applied to any field object - the changes will be reflected for the whole control.
Adding and removing fields
Multitext API allows adding and removing additional fields dynamically:
var newFieldId = $$("multi").addSection();
//remove specific field
$$("multi").remove(newFieldId);
//remove all the additional fields
$$("multi").remove();
Notes:
- Only additional fields can be removed, basic one always remains.
- The methods can be called from any multitext object from the group.
Setting and getting values
Multitext features an extended API for setting and getting its values.
Controls Common Functionality
API Reference
Radio

Related sample: Radio Button ('radio')
Ui-related radio is a block of severel items with the possibility to check only one of them at a time.
Radio Initialization
{view:"radio", label:"Branch", value:1, options:[
{ id:1, value:"Master" }, //the initially selected item
{ id:2, value:"Branch" }
]}
//short form for options array
{view:"radio", options:["Master", "Branch"]}
Main properties
- value (string, number)
- within options array it sets titles of radiobuttons;
- within Radio constructor it defines the initially selected radiobutton;
- id (string, number) - used with the radio block as well as with each of its items;
- options (array, object) - defines the set of items to select from. Details.
- label (string) - text label of a control. It can be customized by:
- labelAlign (string) - label alignment towards its container. Possible values are "left" and "right". In any way, it's placed left to the control;
- labelWidth (number) - width of the label container;
- align (string)- positions button with relation to a parent view;
- vertical (boolean) - defines vertical arrangement of radiobuttons.
Webix radio control is based on standard HTML radio yet some skins use a FontAwesome icon to render it. To switch to a standard HTML radio, use customRadio property:
{view:"radio", customRadio:false}
Controls Common Functionality
API Reference
Richselect

Related sample: Non-editable Combo Box ('richselect')
Ui-related richselect is a non-editable combo-box.
Richselect Initialization
//full form
{view:"richselect",
id: "list2", label: 'richselect',
value:1, yCount:"3", options:[
{id:1, value:"One"}, // the initially selected item
{id:2, value:"Two"},
{id:3, value:"Three"}
]
}
...
//short form for options array
{view:"richselect", options:["One", "Two", "Three"]}
//server options
{ view:"richselect", options:"server/data.json"}
Visually, the richselect control consists of a text input and popup window that contains a standard list of options in its body.
Another possibility to create a component with a similar functionality is attaching a suggest list to a text field, but in this case, text field will be editable.
Main Properties
- value (string, number)
- within options array it sets text value for selectable items;
- within richselect constructor it defines the initially selected item of the control(ID in case of a long form, text value in case of a short form of initialization);
- placeholder (string) - defines placeholder for richselect input. The control should be inited without an initial value;
- label (string) - text label of a control. It can be customized by:
- labelAlign (string) - label alignment towards its container. Possible values are "left" and "right". In any way, it's placed left to the control;
- labelWidth (number) - width of the label container;
- options (array, object, string) - sets the options to choose from in a long or short form. Details.
Advanced Richselect configuration
Richselect control can be customized in a number of ways, e.g.:
- options can be defined dynamically;
- options can be loaded from serverside;
- template can be changed..
To learn more, go to Advanced Settings of Popup Selectors article.
Pro Extensions for Richselect
In the Webix Pro edition the control can be extended to show either a dataview or datatable in the popup:
Getting Current Value
In case of a full initialization form, the getValue() method for combo will return ID of selected option rather than text. Use getInput() to get to input object and, hence, the text value.
$$('field_t').getValue(); // ->returns 1
$$('field_t').getInput().value // -> returns "One"
Related sample: Working with UnitList Items
Controls Common Functionality
API Reference
Search

Related sample: Search Field
Main Properties:
- placeholder (string) - a prompt text displayed in the search field.
- label (string) - text label of a control. It can be customized by:
- labelAlign (string) - label alignment towards its container. Possible values are "left" and "right". In any way, it's placed left to the control;
- labelWidth (number) - width of the label container.
UI-related search looks like an input text field with a 'search icon' to indicate that it can be used for filtering data in a data-presenting component to get to the necessary item.
Filtering function should be written by a developer. See the attached sample for details.
Controls Common Functionality
API Reference
Select

Related sample: Select Box ('select')
Select is a control that allows selection from several items. Looks like a dropdown list.
Select Initialization
// full form
{view:"select", label:"Branch", value:1, options:[
{id:1, value:"Master" }, // the initially selected value
{id:2, value:"Release" }
], labelAlign:'right'
}
//short form
{ view:"select", options:["Master", "Release"]}
//server options
{ view:"select", options:"server/data.json"}
Main properties
- label (string) - text label of a control. It can be customized by:
- labelAlign (string) - label alignment towards its container. Possible values are "left" and "right". In any way, it's placed left to the control;
- labelWidth (number) - width of the label container;
- options (array, object, string) - defines a set of items to select from;
- value (string, number)
- within options array it sets text values for select items;
- within Select constructor it defines the initially selected item of the control (option ID in case of a full form, option text in case of a long form);
Select option, a list record, may contain:
- a short string, like "Apple";
- multi-line text with html tags. In this case, parent (e.g. toolbar) height should be increased.
"toolbar", height:100,
.....
options:[
{id:1,value:"Some long multiline content<ul><li>item1</li><li>item 2</li></ul>"},
{id:2,value:"Papaya" }
]
Related sample: Select Boxes
Controls Common Functionality
API Reference
Segmented Button

Related sample: Holistic Panel with Multiple Buttons ('segmented')
Segmented is an integral button with as many segments as you like. Can be used for switching between multiview cells.
Segmented Initialization
{view:"segmented", multiview:true, value:1, options:[
{ id:"1", value:"Section A" }, // the initially selected segment
{ id:"2", value:"Section B" },
{ id:"3", value:"Section C" }]
}
//short form for options array
{ view:"segmented", options:["Section A", "Section B", "Section C"]}
Main properties
- multiview (boolean) - connects the control to the multiview cells, enables switching between these cells;
- options (array, object) - defines the buttons (segments) within the control. Details;
- value (string, number)
- within options array it sets titles for button segments;
- within Segmented constructor it defines the initially selected item for the control;
- label (string) - text label of a control. It can be customized by:
- labelAlign (string) - label alignment towards its container. Possible values are "left" and "right". In any way, it's placed left to the control;
- labelWidth (number) - width of the label container;
- selected (string) - defines the tab that will be visible initially.
Adding and Deleting Segments (Options) on the Go
Controls Common Functionality
API Reference
Slider

Related sample: Slider
Slider is designed for setting a numeric value from a predefined range of values. It's done by dragging a marker left and right over the value line.
Negative values are possible.
Slider Initialization
{ view:"slider", label:"Level", value:"20", min:10, max: 120; name:"s1"},
Main Properties
- value (number) - initial value of the control;
- label (string) - text label of a control. It can be customized by:
- labelAlign (string) - label alignment towards its container. Possible values are "left" and "right". In any way, it's placed left to the control;
- labelWidth (number) - width of the label container;
- name (string) - name of the control used to get its value in the form;
- step (number) - distance to the next selectable value (1 by default);
- min (number) - minimal value of a slider control. 0 by default.
- max (number) - maximum value of the slider control. 100 by default.
- title (template, function) - text label over the slider marker
Related sample: Slider: Custom Step.
Note that if you set min and max parameters, the initial control value should be within their range.
Slider Title is based on the current value of the control.
For simple title that displayes current value and static text, set a template via webix.template class:
{view:"slider", title:webix.template("Selected: #value#")}
For complex title that changes its text depending on the current value, define a function template:
{view:"slider", title:function(obj){
var text = obj.value > 20 ? "Minimum level reached. " : ""; //title for values over 20
return text + "Value: "+ obj.value;} //title for other values
}
Slider Events
Make use of slider events to set changing title for a drag marker:
- onChange - a common event for all conrtol that fires each time control value changes. For slider it takes place as soon as you stop dragging the marker, which sets a new value.
- onSlider Drag - fires each time you drag the marker over the line while paying attention to the changing value.
{view:"slider", on:{
onChange:function(){
this.define("title", "Final value " + this.getValue());
this.refresh();
},
onSliderDrag:function(){
this.define("title", "Dragging... Currently "+this.getValue());
this.refresh();
}
}}
Related sample: Slider: Labels
The new title is set with the help of define() method while current value of derived with getValue(). Read more about Changing Component properies.
Controls Common Functionality
API Reference
Tabbar

Related sample: Tabbar
Related sample: Panel with Clickable Items ('tabbar')
U-related tabbar is an integral button that allows for changing between views in a multiview layout. Its tabs can be nested with
images and icons.
Tabbar Initialization
rows:[
{view:"tabbar", id:'tabbar', value: 'listView', multiview:true, options: [
{ value: 'List', id: 'listView'},
{ value: 'Form', id: 'formView'},
{ value: 'Empty', id: 'emptyView'}]
},
//and then goes multiview
{cells:[...]}
]
Main properties
- multiview (boolean)- if true, it links tabs to multiview cells;
- options (array, object) - defines buttons for switching between views. Details;
- value (string) -
- within options array it sets titles for tabs;
- within Tabbar constructor it defines the tab that will be shown initially on page loading.
- type (string) - if set to "bottom", the tabbar gets other styling, more suitable for tabs placed under the multiview. It can be done by changing the order of layout rows;
- close (boolean) - if true, the "close" functionality for each tab is provided. Each tab can be closed by clicking a dedicated icon on it.
Defining tabs that can be closed

Tabs featuring a close property in tabbar options array gain the functionality:
//all tabs can be closed
{view:"tabbar", close:true, options:[...]}
//only "Tab1" can be closed
{view:"tabbar", options:[
{id:1, value:"Tab1", close:true},
{id:1, value:"Tab2"}
]}
Related sample: Tabview: Close tab button
Defining Icons for the tabs

Icons are defined through additional HTML provided within the tab value:
{ view:"tabbar", options: [
{ value: "<span class='webix_icon fa-film'></span>List", id: 'listView' }
]}
Related sample: Multiview Tabbar with Icons
More about different types of defining icons in Webix you can learn in the Icons with UI Components article.
Advanced Tabbar Usage
Controls Common Functionality
API Reference
Text

Related sample: Text Input ('text')
Ui-related text control is a one-line input field with a label.
Text Initialization
{view:"text", value:'dummy@email.com', label:"Email", labelAlign:'right'},
{view:"text", type:'password', value:'123pass', label:"Password", labelAlign:'right'}
Main properties
- value (string, integer) - the initial value for a text field, can be editable or readonly on your choice;
- label (string) - text label of a control. It can be customized by:
- labelAlign (string) - label alignment towards its container. Possible values are "left" and "right". In any way, it's placed left to the control;
- labelWidth (number) - width of the label container;
- labelPosition (string) - defines label position related to the input field. The only possible value is "top";
- type (string)- type of a text field, can be either "text" by default, or "password" or "email". Type is vital for HTML5 input data validation.
- placeholder (string) - the initial text in the text field, disappears as you start typing in it;
- suggest (array, string) - collection of suggest values, or the ID of an attached suggest list with these values.
At the same time, "text" properties can be set via an attributes object containing properties that coincide with HTML input tag properties. The object is used for HTML5 data validation.
- attributes (object)
- maxlength (number) - the maximum quantity of symbols that can be typed into the text field;
- required (boolean) - indicats whether this field must be filled before the form can be submitted. False by default;
- title (string) - a prompt message that appears on pointing cursor over the field.
The same is true for textarea.
Controls Common Functionality
API Reference
Textarea

Related sample: Multiline Text Input('textarea')
Ui-related textarea control is a multi-line input field with a label.
Textarea Initialization
{ view:"textarea", label:"Note", labelAlign:"right", height:200, value: "type here" }
Main properties
- label (string) - text label of a control. It can be customized by:
- labelAlign (string) - label alignment towards its container. Possible values are "left" and "right". In any way, it's placed left to the control;
- labelWidth (number) - width of the label container;
- width, height (integer) - defines the dimension of the text field;
- labelAligh (string) - sets the position of a text label;
- value (string) - sets the initial text in the field (replaced by input text later)
- placeholder (string) - the initial text in the textarea field, disappears as you start typing in it;
- attributes (object) - hash of properties. See text description for details.
Controls Common Functionality
API Reference
Toggle

Related sample: Toggle Button ('toggle')
A two-state button that can be not only clicked but pressed. Hence, it has two states - pressed and unpressed (initial), which makes it resemble checkbox that also has two states (checked and unchecked).
If needed, Toggle can change its values for each each state.
Toggle initialization
{ view:"toggle", type:"iconButton", name:"s4",
offIcon:"pause",
onIcon:"play",
offLabel:"Disabled", onLabel:"Enabled" },
Main properties
- name (string) - read-only property, defining the toggle's name. It should be unique within a page;
- label (string) - text on the button body, one and the same for pressed and unpressed states;
- onLabel (string) - text label on the button in a pressed state;
- offLabel (string) - text label on the button in an unpressed state;
- icon (string) - icon for pressed and unpressed toggle states;
- onIcon (string) - icon for a pressed toggle;
- offIcon (string) - icon for an unpressed toggle.
Icons taken from the Font Awesome, so pick the necessary icon name at their site.
Toggle Types
Toggle type is defined by the type property. If it isn't defined, a standard button is displayed. For image toggles there exist the following types:
- iconButton for a standard button with an icon;
- image for an image with a left-hand label (if any);
- imageButton for a standard button with an image and a left-hand label;
- imageTop for a picture and a label below it;
- imageButtonTop for a standard button with a picture and a label under the picture;
- next for a button with a right-hand arrow;
- prevfor a button with a left-handed arrow.
Image Toggle types
type:"iconButton" |
 |
type:"image" |
 |
type:"imageButton" |
 |
type:"imageTop" |
 |
type:"imageButtonTop" |
 |
Related sample: Toggle Image Button ('toggle')
Controls Common Functionality
API Reference
Back to top