Select
The Select element, commonly known as a dropdown list, allows users to choose a single option from a predefined list. It's a compact way to present multiple choices when only one can be selected.
In BetterForms, this is frequently used for selecting a country, state, category, status, or any other scenario where a user needs to pick one item from a moderately long list of options.
Common Configuration Properties
Below are some of the most common properties used when configuring a Select element in BetterForms:
type
String
Must be set to "select"
.
label
String
A label for the dropdown list.
model
String
The key in your BetterForms data model where the value of the selected option will be stored.
values
Array
An array of strings or objects defining the options in the dropdown. If objects, they usually have name
(display text) and id
or value
(stored value) properties. Can also be grouped if selectOptions
with groups
is used.
disabled
Boolean
If true
, the select element will be visible but not interactive. Defaults to false
.
hint
String
Additional helper text displayed with the select element.
required
Boolean
If true
, the form will require an option to be selected. Defaults to false
.
featured
Boolean
Can be used by themes to apply special styling.
styleClasses
String
/ Array
CSS class(es) to apply to the select element wrapper for custom styling.
selectOptions
Object
Advanced options for the select field, such as multiple
(for multi-select, though less common with basic select
), noneSelectedText
, or defining groups
for optgroups within the dropdown.
Example Schema Snippet
BetterForms Specific Notes
The
model
will store theid
(orvalue
) of the chosen option from thevalues
array.The
values
array is key. For simple lists, an array of strings can suffice. For more control over display text vs. stored value, use an array of objects (commonly withid
/value
andname
keys).For very long lists of options that might benefit from searching or type-ahead functionality, consider more advanced select components like
vueMultiSelect
(an optional VFG field) or custom solutions if available in BetterForms.
Full Property Reference
Last updated
Was this helpful?