12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697 |
- ---
- title: Choose Input Field Components Wisely
- order: 31
- layout: page
- ---
-
- [[choosing-input-field-components-wisely]]
- = Choosing input field components wisely
-
- The core Vaadin framework has more than ten different input field
- components. Choosing the right one can improve your application’s
- usability significantly. Which component is the best fit in a certain
- situation depends on so many factors that it’s pretty much impossible to
- set down any specific rules. Nevertheless, here are some helpful
- pointers that might guide you in the right direction.
-
- [[textfield-or-selection-component]]
- Textfield or selection component?
- ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
-
- **TextField**s are of course the most obvious choice in most cases.
- However, their inherent lack of restrictions requires that the user
- understands what kind of values are acceptable. They don't present any
- options to choose from, and, although you can restrict them to certain
- kinds of values e.g. by using **Converter**s, these restrictions are not
- immediately obvious to the user. Furthermore, if the UI in question is
- mostly mouse-operated, a *TextField* forces the user to move her hands
- to the keyboard to enter a value. Thus, a selection component can in
- many cases be more convenient for your users.
-
- [[optiongroup-and-checkbox]]
- OptionGroup and Checkbox
- ^^^^^^^^^^^^^^^^^^^^^^^^
-
- **OptionGroup**s are handy for very small sets of options (typically
- 2-4). You can toggle between single-select (radiobuttons) and
- multi-select (checkboxes) with the *setMultiSelect(boolean)* method.
- Using an OptionGroups to present purely numerical options might be
- somewhat strange, though.
-
- image:img/optiongroup.png[OptionGroup]
-
- For binary either/or, yes/no options, a *CheckBox* is a natural choice.
- However, if the meaning of the "no" option (i.e. unchecked) is not
- completely obvious, or the "yes" (i.e. checked) option could be
- confusing by itself, a two-item single-select *OptionGroup* might be
- better, since it clearly states what both options represent.
-
- image:img/checkbox-vs-og.png[Checkbox vs OptionGroup]
-
- [[nativeselect]]
- NativeSelect
- ^^^^^^^^^^^^
-
- The often-overlooked *NativeSelect* component is also convenient for
- small sets of options (up to 10 or so), and works great both for named
- items and small sets of numbers.
-
- image:img/nativeselect.png[NativeSelect]
-
- [[combobox]]
- ComboBox
- ^^^^^^^^
-
- If the set of options is larger than about 10 items, a *ComboBox* might
- be a better choice, since it allows the user to search for a specific
- value to typing part of it, and supports lazy loading.
-
- image:img/combo.png[ComboBox]
-
- [[slider]]
- Slider
- ^^^^^^
-
- The *Slider* is great for _quickly_ selecting a value from a wide range
- of values, _if precision is not that important_, such as audio volume,
- brightness, or any approximate value. (If precision is important it's
- much better to allow the user to manually enter the value, such as with
- a *TextField*.)
-
- image:img/slider.png[Slider]
-
- [[datefields]]
- DateFields
- ^^^^^^^^^^
-
- The *PopupDateField* component, which opens a calendar popup for date
- selection, is great for entering dates and times. Remember to set the
- datefield's _resolution_ to something appropriate: seconds are hardly
- relevant in most cases, and sometimes all you need is the date.
-
- image:img/datefield.png[DateField]
-
- There’s also the *InlineDateField*, which is really just the
- *PopupDateField*’s datepicker without a textfield. It’s probably a bit
- too big to use in most forms, but if picking dates is one of the few
- tasks in a form, give it a try if you have the space.
|