Skip to main content

RadioGroup and RadioButton properties

Usage

{
type: "radiogroup",
name?: string,
id?: string,
options: {
rows?: [
{
type: "radiobutton",
id?: string,
value: string,
checked?: boolean, // false by default
css?: string,
height?: string | number | "content", // "content" by default
disabled?: boolean, // false by default
hidden?: boolean, // false by default
padding?: string | number, // "8px" by default
text?: string,
width?: string | number | "content", // "content" by default
},
// more radio buttons
],
cols?: [
{
type: "radiobutton",
id?: string,
value: string,
checked?: boolean,
css?: string,
height?: string | number | "content",
disabled?: boolean,
hidden?: boolean,
padding?: string | number,
text?: string,
width?: string | number | "content",
},
// more radio buttons
],
css?: string,
height?: string | number | "content",
padding?: string | number,
width?: string | number | "content",
},
value?: string,

css?: string,
disabled?: boolean, // false by default
height?: string | number | "content", // "content" by default
hidden?: boolean, // false by default
padding?: string | number, // "8px" by default
required?: boolean, // false by default
width?: string | number | "content", // "content" by default

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

RadioGroup properties

type(required) the type of a control, set it to "radioGroup"
name(optional) the name of a control
id(optional) the id of a control, auto-generated if not set
options(required) an object with options of a RadioGroup. The object can contain the following attributes:
  • rows - (optional) arranges radio buttons inside the RadioGroup control vertically
  • cols - (optional) arranges radio buttons inside the RadioGroup control horizontally
  • css - (optional) adds style classes to a RadioGroup
  • height - (optional) the height of a RadioGroup
  • padding - (optional) sets padding between a cell and a border of a RadioGroup
  • width - (optional) the width of a RadioGroup
value(optional) the initial value of a RadioGroup. The option has a higher priority than the checked attribute of a RadioButton
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 RadioGroup is hidden, false by default
padding(optional) sets padding between a cell and a border of a RadioGroup control, "8px" by default
required(optional) defines whether a control is required, false by default
width(optional) the width of a control, "content" by default
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, applied for all radio buttons in a group
successMessage(optional) a message that appears in case of successful validation of the control value, applied for all radio buttons in a group
errorMessage(optional) a message that appears in case of error during validation of the control value, applied for all radio buttons in a group

RadioButton properties

type(optional) the type of a control, set it to "radioButton"
id(optional) the id of a control, auto-generated if not set
value(required) the value of a radioButton
checked(optional) defines the initial state of a radio button, only one radio button can be checked at a time, false by default
disabled(optional) defines whether a control is enabled (false) or disabled (true), false by default
css(optional) adds style classes to a control
height(optional) the height of a control, "content" by default
hidden(optional) defines whether a radio button is hidden, false by default
padding(optional) sets padding between a cell and a border of a radio button, "8px" by default
text(optional) the text label of a radio button
width(optional) the width of a control, "content" by default

Example

Related article: RadioGroup