Skip to main content

Select properties

Usage

{
type: "select",
name?: string,
id?: string,
options: [
{
value: string | number,
content: string,
disabled?: boolean,
},
// more options
],
value?: string | number,

css?: string,
disabled?: boolean, // false by default
height?: string | number | "content", // "content" by default
hidden?: boolean, // false by default
padding?: string | number,
required?: boolean, // false by default
validation?: (input: string | number | boolean) => boolean,
width?: string | number | "content", // "content" by default

icon?: string,

hiddenLabel?: boolean, // false by default
label?: string,
labelPosition?: "left" | "top", // "top" by default
labelWidth?: string | number,

helpMessage?: string,
preMessage?: string,
successMessage?: string,
errorMessage?: string,
}

Description

type(required) the type of a control, set it to "select"
name(optional) the name of a control
id(optional) the id of a control, auto-generated if not set
options(required) an array of Select options, each option is an object with a set of key:value pairs - attributes of options and their values:
  • value - (required) sets the value for the select option
  • content - (required) the content displayed in the select option
  • disabled - (optional) defines whether the option is enabled (false) or disabled (true)
value(optional) the initial value of the select control
css(optional) adds style classes to a control
disabled(optional) defines whether a control is enabled (false) or disabled (true), false by default
height(optional) the height of a control, "content" by default
hidden(optional) defines whether a control is hidden, false by default
padding(optional) sets padding between a cell and a border of the Select control
required(optional) defines whether a control is required, false by default
validation(optional) the validation function, takes as a parameter the value to validate and returns true/false to indicate the result of validation
width(optional) the width of a control, "content" by default
icon(optional) the CSS class name of an icon from the used icon font
hiddenLabel(optional) makes the label invisible, false by default
label(optional) specifies a label for a control
labelPosition(optional) defines the position of a label: "left" | "top", "top" by default
labelWidth(optional) sets the width of the label of a control
helpMessage(optional) adds a help message to a control
preMessage(optional) a message that contains instructions for interacting with the control
successMessage(optional) a message that appears in case of successful validation of the control value
errorMessage(optional) a message that appears in case of error during validation of the control value

Example

Related article: Select