Skip to content

Setting

Official

A setting.

Import:

import { Setting } from 'obsidian';

Signature:

export class Setting

Constructor

new Setting(containerEl: HTMLElement)

Constructor.

To get the constructor instance, use getSettingConstructor from obsidian-typings/implementations.

Properties

PropertyTypeDescription
componentsBaseComponent[]The components for the setting.
controlElHTMLElementThe HTML element for the control.
descElHTMLElementThe HTML element for the description.
disabledbooleanWhether the setting row is disabled. Initialized to false, written only by Setting.setDisabled, and read as its guard by the row-click listener that Setting.setRowClick attaches, so a disabled row does not invoke Setting.rowClick.
errorElHTMLElement | nullError message element shown below the input. Created by setErrorMessage.
iconElHTMLDivElement | nullThe HTML element for the icon, prepended to Setting.settingEl. Created by Setting.setIcon on its first call, and null until then.
infoElHTMLElementThe HTML element for the info.
nameElHTMLElementThe HTML element for the name.
rowClick(() => void) | nullThe click handler for the setting row, stored by Setting.setRowClick and invoked by the listener it attaches. null until that first call.
settingElHTMLElementThe HTML element for the setting.

Methods

MethodReturnsDescription
addButton(cb)thisAdd a button to the setting.
addColorPicker(cb)thisAdd a color picker component to the setting.
addComponent(cb)thisAdd a component to the setting.
addDisplayValue(cb)thisAdd a read-only display value to the row. On a navigable row, this surfaces the value edited on the page the row opens, so the user can see it without opening that page.
addDropdown(cb)thisAdd a dropdown component to the setting.
addExtraButton(cb)thisAdd an extra button to the setting.
addMomentFormat(cb)thisAdd a moment format component to the setting.
addProgressBar(cb)thisAdd a progress bar component to the setting.
addSearch(cb)thisAdd a search component to the setting.
addSlider(cb)thisAdd a slider component to the setting.
addText(cb)thisAdd a text component to the setting.
addTextArea(cb)thisAdd a text area component to the setting.
addToggle(cb)thisAdd a toggle to the setting.
clear()thisClear the setting.
setAction(callback)thisMakes the whole setting row act as a button, invoking the callback when clicked.
setClass(cls)thisSet the class of the setting.
setDesc(desc)thisSet the description of the setting.
setDisabled(disabled)thisDisable the setting.
setErrorMessage(message)thisShow a persistent validation error message below the setting. Pass an empty string or null to clear it. Adds the is-invalid class to the setting row when a message is present.
setHeading()thisMake the setting a heading.
setIcon(icon)thisSet the icon of the setting, shown at the start of the row before the info section.

Creates Setting.iconEl on the first call. Passing null or an empty string empties that element instead of removing it.
setName(name)thisSet the name of the setting.
setName(name)thisSet the name of the setting.
setNavigable(callback)thisMakes the setting row navigable (adds a chevron and click handling).
setNoInfo()thisHide the info section of the setting.
setRowClick(callback)voidMake the whole setting row invoke a callback when clicked, storing it in Setting.rowClick.

The DOM listener is attached only on the first call, so a later call replaces the handler rather than adding a second one. The stored handler is skipped while the setting is disabled, or when the click has already been default-prevented.

Unlike Setting.setNavigable and Setting.setAction, which are both implemented in terms of it, this returns nothing and so does not chain.
setTooltip(tooltip, options?)thisSet the tooltip of the setting.
setVisibility(visible)thisShows/hides the setting.
then(cb)thisFacilitates chaining.

Links to this page: