SettingsBuilder Components

Overview

This section contains all components and utilities for SettingsBuilder Components.

Components

Item	Type	Description
Section	Class	Handle for configuring a settings section.
Badge Field	Class	Handle for configuring a badge display field.
Button Field	Class	Handle for configuring a button field.
Info Field	Class	Handle for configuring an info display field.
Input Field	Class	Handle for configuring an input field.
Link Field	Class	Handle for configuring a link button field.
Select Field	Class	Handle for configuring a select dropdown field.
Switch Field	Class	Handle for configuring a switch field.
Text Field	Class	Handle for configuring a text display field.

---

Section

Handle for configuring a settings section.

Provides methods to configure section properties like name, visibility, and expandability.

Methods

Method	Parameters	Description
setDisabled()	disabled: boolean	Sets the disabled state of the section..
setExpandable()	expandable: boolean	Sets the expandable state of the section.
setExpanded()	expanded: boolean	Sets the expanded state of the section.
setHidden()	hidden: boolean	Sets the hidden state of the section..
setName()	name: string	Sets the name of the section..

setDisabled()

setDisabled(disabled: boolean): this

Sets the disabled state of the section.

Parameters:

Name	Type	Required	Description
disabled	boolean	Yes	The disabled state of the section

Returns:

this - The SectionHandle for method chaining

setExpandable()

setExpandable(expandable: boolean): this

Sets the expandable state of the section. When set to true, the section will render as an expandable section.

Parameters:

Name	Type	Required	Description
expandable	boolean	Yes	The expandable state of the section

Returns:

this - The SectionHandle for method chaining

setExpanded()

setExpanded(expanded: boolean): this

Sets the expanded state of the section. When set to true, the section will be expanded. When set to false, the section will be collapsed.

Parameters:

Name	Type	Required	Description
expanded	boolean	Yes	The expanded state of the section

Returns:

this - The SectionHandle for method chaining

setHidden()

setHidden(hidden: boolean): this

Sets the hidden state of the section.

Parameters:

Name	Type	Required	Description
hidden	boolean	Yes	The hidden state of the section

Returns:

this - The SectionHandle for method chaining

setName()

setName(name: string): this

Sets the name of the section.

Parameters:

Name	Type	Required	Description
name	string	Yes	The name of the section

Returns:

this - The SectionHandle for method chaining

---

Badge Field

Handle for configuring a badge display field.

Returned by SettingsBuilder.addBadge. Provides methods to configure badge properties like label, text content, and style.

Live Examples

View Examples

Methods

Method	Parameters	Description
assign()	props: Partial	Bulk assigns multiple properties to the badge field..
setDesc()	description: string	Sets the help text displayed below the badge..
setLabel()	label: string	Sets the label of the badge..
setStyle()	style: "info" | "success" | "warning" | "error" | "default" | "muted" | undefined	Sets the visual style and color of the badge..
setText()	text: string	Sets the text content of the badge..

assign()

assign(props: Partial): this

Bulk assigns multiple properties to the badge field.

Parameters:

Name	Type	Required	Description
props	Partial	Yes	Object containing properties to assign

Returns:

this - The BadgeFieldHandle for method chaining

setDesc()

setDesc(description: string): this

Sets the help text displayed below the badge.

Parameters:

Name	Type	Required	Description
description	string	Yes	The description text to display

Returns:

this - The BadgeFieldHandle for method chaining

setLabel()

setLabel(label: string): this

Sets the label of the badge.

Parameters:

Name	Type	Required	Description
label	string	Yes	The label text to display

Returns:

this - The BadgeFieldHandle for method chaining

setStyle()

setStyle(style: "info" \| "success" \| "warning" \| "error" \| "default" \| "muted" \| undefined): this

Sets the visual style and color of the badge.

Parameters:

Name	Type	Required	Description
style	"info" \| "success" \| "warning" \| "error" \| "default" \| "muted" \| undefined	Yes	The badge style (default, muted, info, success, warning, error)

Returns:

this - The BadgeFieldHandle for method chaining

setText()

setText(text: string): this

Sets the text content of the badge.

Parameters:

Name	Type	Required	Description
text	string	Yes	The text to display in the badge

Returns:

this - The BadgeFieldHandle for method chaining

---

Button Field

Handle for configuring a button field.

Returned by SettingsBuilder.addButton. Provides methods to configure button properties like title, label, style, and click handlers.

Live Examples

View Examples

Methods

Method	Parameters	Description
assign()	props: Partial	Bulk assigns multiple properties to the button field..
onClick()	onClick: () => void	Registers a callback function that is called when the button is clicked..
setDesc()	description: string	Sets the help text displayed below the button..
setLabel()	label: string	Sets the label text displayed beside the button..
setStyle()	style: "primary" | "secondary" | "danger" | undefined	Sets the visual style of the button..
setTitle()	title: string	Sets the text displayed on the button..

assign()

assign(props: Partial): this

Bulk assigns multiple properties to the button field.

Parameters:

Name	Type	Required	Description
props	Partial	Yes	Object containing properties to assign

Returns:

this - The ButtonFieldHandle for method chaining

onClick()

onClick(onClick: () => void): this

Registers a callback function that is called when the button is clicked.

Parameters:

Name	Type	Required	Description
onClick	() => void	Yes	Function called on button click

Returns:

this - The ButtonFieldHandle for method chaining

setDesc()

setDesc(description: string): this

Sets the help text displayed below the button.

Parameters:

Name	Type	Required	Description
description	string	Yes	The description text to display

Returns:

this - The ButtonFieldHandle for method chaining

setLabel()

setLabel(label: string): this

Sets the label text displayed beside the button.

Parameters:

Name	Type	Required	Description
label	string	Yes	The label text to display

Returns:

this - The ButtonFieldHandle for method chaining

setStyle()

setStyle(style: "primary" \| "secondary" \| "danger" \| undefined): this

Sets the visual style of the button.

Parameters:

Name	Type	Required	Description
style	"primary" \| "secondary" \| "danger" \| undefined	Yes	The button style (primary, secondary, danger)

Returns:

this - The ButtonFieldHandle for method chaining

setTitle()

setTitle(title: string): this

Sets the text displayed on the button.

Parameters:

Name	Type	Required	Description
title	string	Yes	The text to display on the button

Returns:

this - The ButtonFieldHandle for method chaining

---

Info Field

Handle for configuring an info display field.

Returned by SettingsBuilder.addInfo. Provides methods to configure info properties like text content and style.

Methods

Method	Parameters	Description
assign()	props: Partial	Bulk assigns multiple properties to the info field..
setStyle()	style: "info" | "success" | "warning" | "error" | "default" | undefined	Sets the visual style and color of the info banner..
setText()	text: string	Sets the text content of the info banner..
useIcon()	show: boolean	Controls whether the icon is displayed in the info banner..

assign()

assign(props: Partial): this

Bulk assigns multiple properties to the info field.

Parameters:

Name	Type	Required	Description
props	Partial	Yes	Object containing properties to assign

Returns:

this - The InfoFieldHandle for method chaining

setStyle()

setStyle(style: "info" \| "success" \| "warning" \| "error" \| "default" \| undefined): this

Sets the visual style and color of the info banner.

Parameters:

Name	Type	Required	Description
style	"info" \| "success" \| "warning" \| "error" \| "default" \| undefined	Yes	The info style (default, info, success, warning, error)

Returns:

this - The InfoFieldHandle for method chaining

setText()

setText(text: string): this

Sets the text content of the info banner.

Parameters:

Name	Type	Required	Description
text	string	Yes	The text to display in the info banner

Returns:

this - The InfoFieldHandle for method chaining

useIcon()

useIcon(show: boolean): this

Controls whether the icon is displayed in the info banner.

Parameters:

Name	Type	Required	Description
show	boolean	Yes	Whether to show the icon (default: true)

Returns:

this - The InfoFieldHandle for method chaining

---

Input Field

Handle for configuring an input field.

Returned by SettingsBuilder.addInput. Provides methods to configure input properties like type, placeholder, value, validation, and change handlers.

Live Examples

View Examples

Methods

Method	Parameters	Description
assign()	props: Partial	Bulk assigns multiple properties to the input field..
onChange()	callback: (data: any) => void	Registers a callback function that is called when the input value changes..
setDesc()	description: string	Sets the help text displayed below the input field..
setDisabled()	disabled: boolean	Sets the disabled state of the input field..
setLabel()	label: string	Sets the label of the input field..
setMax()	max: number	Sets the maximum value for number input types..
setMin()	min: number	Sets the minimum value for number input types..
setName()	name: string	Sets the label of the input field (alias for setLabel)..
setPlaceholder()	placeholder: string	Sets the placeholder text shown in the input field..
setRequired()	required: boolean	Marks the input field as required..
setType()	type: "number" | "text" | "password" | "textarea" | "color" | "file" | "ip_address" | "mac_address"	Sets the input type (text, password, number, etc.)..
setValue()	value: any	Sets the default or current value of the input field..

assign()

assign(props: Partial): this

Bulk assigns multiple properties to the input field.

Parameters:

Name	Type	Required	Description
props	Partial	Yes	Object containing properties to assign

Returns:

this - The InputFieldHandle for method chaining

onChange()

onChange(callback: (data: any) => void): this

Registers a callback function that is called when the input value changes.

Parameters:

Name	Type	Required	Description
callback	(data: any) => void	Yes	Function called with the new value

Returns:

this - The InputFieldHandle for method chaining

setDesc()

setDesc(description: string): this

Sets the help text displayed below the input field.

Parameters:

Name	Type	Required	Description
description	string	Yes	The description text to display

Returns:

this - The InputFieldHandle for method chaining

setDisabled()

setDisabled(disabled: boolean): this

Sets the disabled state of the input field.

Parameters:

Name	Type	Required	Description
disabled	boolean	Yes	Whether the field is disabled

Returns:

this - The InputFieldHandle for method chaining

setLabel()

setLabel(label: string): this

Sets the label of the input field.

Parameters:

Name	Type	Required	Description
label	string	Yes	The label text to display

Returns:

this - The InputFieldHandle for method chaining

setMax()

setMax(max: number): this

Sets the maximum value for number input types.

Parameters:

Name	Type	Required	Description
max	number	Yes	The maximum allowed value

Returns:

this - The InputFieldHandle for method chaining

setMin()

setMin(min: number): this

Sets the minimum value for number input types.

Parameters:

Name	Type	Required	Description
min	number	Yes	The minimum allowed value

Returns:

this - The InputFieldHandle for method chaining

setName()

setName(name: string): this

Sets the label of the input field (alias for setLabel).

Parameters:

Name	Type	Required	Description
name	string	Yes	The label text to display

Returns:

this - The InputFieldHandle for method chaining

setPlaceholder()

setPlaceholder(placeholder: string): this

Sets the placeholder text shown in the input field.

Parameters:

Name	Type	Required	Description
placeholder	string	Yes	The placeholder text to display

Returns:

this - The InputFieldHandle for method chaining

setRequired()

setRequired(required: boolean): this

Marks the input field as required.

Parameters:

Name	Type	Required	Description
required	boolean	Yes	Whether the field is required

Returns:

this - The InputFieldHandle for method chaining

setType()

setType(type: "number" \| "text" \| "password" \| "textarea" \| "color" \| "file" \| "ip_address" \| "mac_address"): this

Sets the input type (text, password, number, etc.).

Parameters:

Name	Type	Required	Description
type	"number" \| "text" \| "password" \| "textarea" \| "color" \| "file" \| "ip_address" \| "mac_address"	Yes	The input type

Returns:

this - The InputFieldHandle for method chaining

setValue()

setValue(value: any): this

Sets the default or current value of the input field.

Parameters:

Name	Type	Required	Description
value	any	Yes	The value to set

Returns:

this - The InputFieldHandle for method chaining

---

Link Field

Handle for configuring a link button field.

Returned by SettingsBuilder.addLink. Provides methods to configure link properties like URL, button text, icon, and label.

The button displays the provided icon (or a default link icon) and on hover swaps it with an external-link indicator to signal that the URL opens in a new tab.

Live Examples

View Examples

Methods

Method	Parameters	Description
assign()	props: Partial<LinkField>	Bulk assigns multiple properties to the link field.
setDesc()	description: string	Sets the help text displayed below the link button.
setHref()	href: string	Sets the URL that opens when the link is clicked.
setIcon()	icon: string	Sets the Font Awesome icon class for the link button.
setLabel()	label: string	Sets the label text displayed beside the link button.
setText()	text: string	Sets the text displayed on the link button.

assign()

assign(props: Partial<LinkField>): this

Bulk assigns multiple properties to the link field.

Parameters:

Name	Type	Required	Description
props	Partial<LinkField>	Yes	Object containing properties to assign

Returns:

this - The LinkFieldHandle for method chaining

setDesc()

setDesc(description: string): this

Sets the help text displayed below the link button.

Parameters:

Name	Type	Required	Description
description	string	Yes	The description text to display

Returns:

this - The LinkFieldHandle for method chaining

setHref()

setHref(href: string): this

Sets the URL that opens when the link button is clicked. Always opens in a new tab.

Parameters:

Name	Type	Required	Description
href	string	Yes	The full URL to open

Returns:

this - The LinkFieldHandle for method chaining

setIcon()

setIcon(icon: string): this

Sets the Font Awesome icon class displayed on the link button. On hover the icon is replaced with an external-link indicator.

Parameters:

Name	Type	Required	Description
icon	string	Yes	Font Awesome class string, e.g. 'fas fa-book'

Returns:

this - The LinkFieldHandle for method chaining

setLabel()

setLabel(label: string): this

Sets the label text displayed beside the link button.

Parameters:

Name	Type	Required	Description
label	string	Yes	The label text to display

Returns:

this - The LinkFieldHandle for method chaining

setText()

setText(text: string): this

Sets the text displayed on the link button. Defaults to the href value if not set.

Parameters:

Name	Type	Required	Description
text	string	Yes	The button label text

Returns:

this - The LinkFieldHandle for method chaining

---

Select Field

Handle for configuring a select dropdown field.

Returned by SettingsBuilder.addSelect. Provides methods to configure select properties like label, options, value, and change handlers.

Live Examples

View Examples

Methods

Method	Parameters	Description
assign()	props: Partial	Bulk assigns multiple properties to the select field..
onChange()	callback: (data: any) => void	Registers a callback function that is called when the selected value changes..
setDesc()	description: string	Sets the help text displayed below the select field..
setDisabled()	disabled: boolean	Sets the disabled state of the select field..
setLabel()	label: string	Sets the label of the select field..
setOptions()	options: any[] | string | number[]	Sets the selectable options for the dropdown menu..
setPlaceholder()	placeholder: string	Sets the placeholder text shown when no option is selected..
setRequired()	required: boolean	Marks the select field as required..
setValue()	value: any	Sets the default selected value of the select field..

assign()

assign(props: Partial): this

Bulk assigns multiple properties to the select field.

Parameters:

Name	Type	Required	Description
props	Partial	Yes	Object containing properties to assign

Returns:

this - The SelectFieldHandle for method chaining

onChange()

onChange(callback: (data: any) => void): this

Registers a callback function that is called when the selected value changes.

Parameters:

Name	Type	Required	Description
callback	(data: any) => void	Yes	Function called with the newly selected value

Returns:

this - The SelectFieldHandle for method chaining

setDesc()

setDesc(description: string): this

Sets the help text displayed below the select field.

Parameters:

Name	Type	Required	Description
description	string	Yes	The description text to display

Returns:

this - The SelectFieldHandle for method chaining

setDisabled()

setDisabled(disabled: boolean): this

Sets the disabled state of the select field.

Parameters:

Name	Type	Required	Description
disabled	boolean	Yes	Whether the field is disabled

Returns:

this - The SelectFieldHandle for method chaining

setLabel()

setLabel(label: string): this

Sets the label of the select field.

Parameters:

Name	Type	Required	Description
label	string	Yes	The label text to display

Returns:

this - The SelectFieldHandle for method chaining

setOptions()

setOptions(options: any[] \| string \| number[]): this

Sets the selectable options for the dropdown menu.

Parameters:

Name	Type	Required	Description
options	any[] \| string \| number[]	Yes	Array of options as objects with value/label or simple values

Returns:

this - The SelectFieldHandle for method chaining

setPlaceholder()

setPlaceholder(placeholder: string): this

Sets the placeholder text shown when no option is selected.

Parameters:

Name	Type	Required	Description
placeholder	string	Yes	The placeholder text to display

Returns:

this - The SelectFieldHandle for method chaining

setRequired()

setRequired(required: boolean): this

Marks the select field as required.

Parameters:

Name	Type	Required	Description
required	boolean	Yes	Whether the field is required

Returns:

this - The SelectFieldHandle for method chaining

setValue()

setValue(value: any): this

Sets the default selected value of the select field.

Parameters:

Name	Type	Required	Description
value	any	Yes	The value to set as selected

Returns:

this - The SelectFieldHandle for method chaining

---

Switch Field

Handle for configuring a switch field.

Returned by SettingsBuilder.addSwitch. Provides methods to configure switch properties like label, value, description, and change handlers.

Live Examples

View Examples

Methods

Method	Parameters	Description
assign()	props: Partial	Bulk assigns multiple properties to the switch field..
onChange()	callback: (data: any) => void	Registers a callback function that is called when the switch state changes..
setDesc()	description: string	Sets the help text displayed below the switch..
setDisabled()	disabled: boolean	Sets the disabled state of the switch..
setLabel()	label: string	Sets the label of the switch..
setRequired()	required: boolean	Marks the switch as required..
setValue()	value: boolean	Sets the default or current state of the switch (on/off)..

assign()

assign(props: Partial): this

Bulk assigns multiple properties to the switch field.

Parameters:

Name	Type	Required	Description
props	Partial	Yes	Object containing properties to assign

Returns:

this - The SwitchFieldHandle for method chaining

onChange()

onChange(callback: (data: any) => void): this

Registers a callback function that is called when the switch state changes.

Parameters:

Name	Type	Required	Description
callback	(data: any) => void	Yes	Function called with the new switch state

Returns:

this - The SwitchFieldHandle for method chaining

setDesc()

setDesc(description: string): this

Sets the help text displayed below the switch.

Parameters:

Name	Type	Required	Description
description	string	Yes	The description text to display

Returns:

this - The SwitchFieldHandle for method chaining

setDisabled()

setDisabled(disabled: boolean): this

Sets the disabled state of the switch.

Parameters:

Name	Type	Required	Description
disabled	boolean	Yes	Whether the switch is disabled

Returns:

this - The SwitchFieldHandle for method chaining

setLabel()

setLabel(label: string): this

Sets the label of the switch.

Parameters:

Name	Type	Required	Description
label	string	Yes	The label text to display

Returns:

this - The SwitchFieldHandle for method chaining

setRequired()

setRequired(required: boolean): this

Marks the switch as required.

Parameters:

Name	Type	Required	Description
required	boolean	Yes	Whether the switch is required

Returns:

this - The SwitchFieldHandle for method chaining

setValue()

setValue(value: boolean): this

Sets the default or current state of the switch (on/off).

Parameters:

Name	Type	Required	Description
value	boolean	Yes	The boolean state of the switch

Returns:

this - The SwitchFieldHandle for method chaining

---

Text Field

Handle for configuring a text display field.

Returned by SettingsBuilder.addText. Provides methods to configure text properties like label, text content, and style.

Live Examples

View Examples

Methods

Method	Parameters	Description
assign()	props: Partial	Bulk assigns multiple properties to the text field..
setDesc()	description: string	Sets the help text displayed below the text display..
setLabel()	label: string	Sets the label of the text display..
setStyle()	style: "info" | "success" | "warning" | "error" | "default" | "muted" | undefined	Sets the visual style and color of the text..
setText()	text: string	Sets the text content to display..

assign()

assign(props: Partial): this

Bulk assigns multiple properties to the text field.

Parameters:

Name	Type	Required	Description
props	Partial	Yes	Object containing properties to assign

Returns:

this - The TextFieldHandle for method chaining

setDesc()

setDesc(description: string): this

Sets the help text displayed below the text display.

Parameters:

Name	Type	Required	Description
description	string	Yes	The description text to display

Returns:

this - The TextFieldHandle for method chaining

setLabel()

setLabel(label: string): this

Sets the label of the text display.

Parameters:

Name	Type	Required	Description
label	string	Yes	The label text to display

Returns:

this - The TextFieldHandle for method chaining

setStyle()

setStyle(style: "info" \| "success" \| "warning" \| "error" \| "default" \| "muted" \| undefined): this

Sets the visual style and color of the text.

Parameters:

Name	Type	Required	Description
style	"info" \| "success" \| "warning" \| "error" \| "default" \| "muted" \| undefined	Yes	The text style (default, muted, info, success, warning, error)

Returns:

this - The TextFieldHandle for method chaining

setText()

setText(text: string): this

Sets the text content to display.

Parameters:

Name	Type	Required	Description
text	string	Yes	The text to display

Returns:

this - The TextFieldHandle for method chaining