Form controls
All KVision form controls are available in two variants. The first variant, with class name ending with "Input" (e.g. TextInput
), is a basic, fully-functional component ready to be used as a standalone widget. The second variant, with class name without "Input" (e.g. Text
), is a wrapper component implementing one of FormControl
interfaces and is intended primarily for use with a FormPanel
container. This variant can display a label, a validation information and has some additional CSS styling consistent with Bootstrap forms components. From the developer point of view both variants have the same properties and methods (a side of label
and rich
properties available for second variant only).
All KVision form controls have the following properties:
value
- allows to get or set the value of the componentname
- defines aname
attribute of the HTML input elementsize
- allows to set the size of the form control (normal, large or small Bootstrap style)disabled
- defines whether the form control is disabled
Text fields
i.k.f.text.Text
i.k.f.text.Text
This component is rendered as a standard HTML text field and is used to get simple, textual data from the user. The type
property can be set to any of these values: TEXT
, PASSWORD
, EMAIL
, TEL
, COLOR
, SEARCH
, URL
and is bound to the type
attribute of the HTML input field. Modern browsers can render such fields with additional elements (e.g. color chooser). Other properties allow you to define a placeholder, a maximum length, autofocus or autocomplete attributes and define if the control should be read-only.
i.k.f.text.Password
i.k.f.text.Password
This component is a direct subclass of i.k.form.text.Text
with type
property set to TextInputType.PASSWORD
.
i.k.f.text.TextArea
i.k.f.text.TextArea
This component is rendered as a standard HTML textarea field and is used to get longer, multi-line textual data from the user. It can be sized with cols
and rows
properties (mapped to standard HTML attributes).
Alternative way (and preferred nowadays) is to set CSS width
and height
properties.
Other properties allow you to define a placeholder, a maximum length, autofocus or hard wrap attributes and define if the control should be read-only.
i.k.f.text.RichText
i.k.f.text.RichText
i.k.f.text.TomTypeahead
i.k.f.text.TomTypeahead
The kvision-tom-select module contains an enhanced text field with support for typeahead (autocomplete) functionality. Both local and remote data sources are supported. To use local data source pass a list of values with the options
parameter.
To use a remote data source pass a TomSelectCallbacks
object with a load
callback.
i.k.f.text.TomTypeaheadRemote
i.k.f.text.TomTypeaheadRemote
Checkboxes and radiobuttons
i.k.f.check.CheckBox
i.k.f.check.CheckBox
This component can be used to display a checkbox and to get true/false data from the user. The style
property can be used to render the checkbox with one of six different styles.
You can layout your checkboxes horizontally using an inline
property.
And you can even make the checkbox look like a radiobutton.
A CheckBox
component has a convenient onClick
method to easily bind some action to the click
event.
By using indeterminate
property you can make the checkbox appear as neither selected nor deselected.
i.k.f.check.Radio
i.k.f.check.Radio
This component is similar to the CheckBox
component, but it is rendered as a radiobutton. By using the name
property, you can group some radiobuttons together, with only one control selected at a time.
The style
property can be used to render the radiobutton with one of six different styles.
You can layout your radiobuttons horizontally using an inline
property.
And you can even make the radiobutton look like a checkbox.
A Radio
component has a convenient onClick
method to easily bind some action to the click
event.
i.k.f.check.RadioGroup
i.k.f.check.RadioGroup
Although it is possible to use basic Radio
components to build and manage radiobutton groups (you would have to check which radio in a group is selected), KVision offers a dedicated RadioGroup
component, which allows you to treat a group of radiobuttons as a single component returning a String value. It can be initialized with a list of options (key to value pairs) and the selected option can be easily set or get with the value
property.
i.k.f.check.TriStateCheckBox
i.k.f.check.TriStateCheckBox
This component extends the usage of indeterminate
property of the standard CheckBox
component and allows you to easily use all three states of the checkbox - selected (value = true)
, deselected (value = false)
and indeterminate (value = null)
.
Select boxes
i.k.f.select.Select
i.k.f.select.Select
This is a simple select box component, based on standard HTML select control. It can be used when there is no need for advanced options of the Select
component. The SimpleSelect
component should be initialized with a list of options (key to values pairs).
i.k.f.select.SelectRemote
i.k.f.select.SelectRemote
i.k.f.select.TomSelect
i.k.f.select.TomSelect
Other properties allow to define a placeholder, an autofocus attribute and to automatically generate an empty option (to be able to de-select value).
TomSelect
component can also work with a remote data source - just pass a TomSelectCallbacks
object with a load
callback
i.k.f.select.TomSelectRemote
i.k.f.select.TomSelectRemote
Numeric
i.k.f.number.Spinner
i.k.f.number.Spinner
This is a simple integer field component, based on standard HTML input control. You can set min
and max
values (default - no limits) and set the step
value (default 1).
i.k.f.number.Range
i.k.f.number.Range
This component can be used to allow a user to select numeric value with a slider. You need to configure min
(default 0), max
(default 100) and step
(default 1) attributes.
i.k.f.number.Numeric
i.k.f.number.Numeric
This component can be used for fixed precision decimal numbers (e.g. currency). You need do set a number of decimal digits (default 2) and the component will automatically format the number. You can set min
and max
values (default - no limits). You can also specify a decimal digit character or just use the auto-detected default.
i.k.f.number.ImaskNumeric
i.k.f.number.ImaskNumeric
With kvision-imask
module you can use the advanced numeric component, which allows you to work with all decimal numbers (with or without fixed number of decimal digits) and fully controls the characters entered by the user. By setting decimals
property to a larger value (up to 15) you can support inputs with different number of decimal digits.
If you want to support fixed decimals, set padFractionalZeros = true
- the component will automatically format the number.
You can also use decimals and thousands separator chars (both are automatically detected from the current locale).
Others
i.k.f.time.DateTime
i.k.f.time.DateTime
Other properties allow you to set days of the week that should be disabled, visibility of "Clear", "Close" and "Today" buttons and also the increment used to build the hour view (default - 5 minutes).
You can also use minDate
, maxDate
, enabledDates
and disabledDates
properties to control which dates the user is allowed to choose.
i.k.f.upload.BootstrapUpload
i.k.f.upload.BootstrapUpload
Standard HTML form submission
You can use the Upload
component to upload files to the server with standard multi-part form action. You should create the FormPanel
container with additional parameters (FormMethod.POST
, FormEnctype.MULTIPART
). In this mode you will be able to upload only one file at a time (unless you add more Upload
controls). You should also add a button with type SUBMIT
.
AJAX upload
In this mode you have to handle your uploaded files and the rest of your form data separately. Alternatively you can use uploadExtraData
property and add your form data directly to your AJAX request.
Client side file handling
Modern browsers support FileReader API and allow you to work with files entirely on the client side. The FormPanel<K>
class has a suspending getDataWithFileContent
extension function, which is using Kotlin coroutines to read the content of all uploaded files as BASE64 dataURL strings. It makes it very easy to use such content in other KVision components (e.g. images or any HTML formatted text).
Last updated