Setting Components

Obsidian Dev Utils provides some setting components that you can use in your plugin.

In order for components to look properly, their styles has to be initialized. See Styling for more details.

CheckboxComponent

import { CheckboxComponent } from 'obsidian-dev-utils/obsidian/components/setting-component/checkbox-component';

const checkbox = new CheckboxComponent(containerEl);
checkbox.setValue(false);

// or

import { SettingEx } from 'obsidian-dev-utils/obsidian/setting-ex';

new SettingEx()
  .addCheckbox((checkbox) => {
    checkbox.setValue(false);
  });

CodeHighlighterComponent

import { CodeHighlighterComponent } from 'obsidian-dev-utils/obsidian/components/setting-component/code-highlighter-component';

const codeHighlighter = new CodeHighlighterComponent(containerEl);
codeHighlighter
  .setLanguage('javascript')
  .setValue(`function foo() {
  console.log('bar');
}`);

// or

import { SettingEx } from 'obsidian-dev-utils/obsidian/setting-ex';

new SettingEx()
  .addCodeHighlighter((codeHighlighter) => {
    codeHighlighter
      .setLanguage('javascript')
      .setValue(`function foo() {
  console.log('bar');
}`);
  });

DateComponent

import { DateComponent } from 'obsidian-dev-utils/obsidian/components/setting-component/date-component';

const date = new DateComponent(containerEl);
date.setValue(new Date());

// or

import { SettingEx } from 'obsidian-dev-utils/obsidian/setting-ex';

new SettingEx()
  .addDate((date) => {
    date.setValue(new Date());
  });

DateTimeComponent

import { DateTimeComponent } from 'obsidian-dev-utils/obsidian/components/setting-component/date-time-component';

const dateTime = new DateTimeComponent(containerEl);
dateTime.setValue(new Date());

// or

import { SettingEx } from 'obsidian-dev-utils/obsidian/setting-ex';

new SettingEx()
  .addDateTime((dateTime) => {
    dateTime.setValue(new Date());
  });

EmailComponent

import { EmailComponent } from 'obsidian-dev-utils/obsidian/components/setting-component/email-component';

const email = new EmailComponent(containerEl);
email.setValue('foo@bar.com');

// or

import { SettingEx } from 'obsidian-dev-utils/obsidian/setting-ex';

new SettingEx()
  .addEmail((email) => {
    email.setValue('foo@bar.com');
  });

FileComponent

import { FileComponent } from 'obsidian-dev-utils/obsidian/components/setting-component/file-component';

const file = new FileComponent(containerEl);
file.onChange((value) => console.log(value));

// or

import { SettingEx } from 'obsidian-dev-utils/obsidian/setting-ex';

new SettingEx()
  .addFile((file) => {
    file.onChange((value) => console.log(value));
  });

MonthComponent

import { MonthComponent } from 'obsidian-dev-utils/obsidian/components/setting-component/month-component';

const month = new MonthComponent(containerEl);
month.setValue({
  month: 4,
  year: 2025
});

// or

import { SettingEx } from 'obsidian-dev-utils/obsidian/setting-ex';

new SettingEx()
  .addMonth((month) => {
    month.setValue({
      month: 4,
      year: 2025
    });
  });

MultipleDropdownComponent

import { MultipleDropdownComponent } from 'obsidian-dev-utils/obsidian/components/setting-component/multiple-dropdown-component';

const multipleDropdown = new MultipleDropdownComponent(containerEl);
multipleDropdown.addOptions({
  Value1: 'Display 1',
  Value2: 'Display 2',
  Value3: 'Display 3',
  Value4: 'Display 4',
  Value5: 'Display 5'
});
multipleDropdown.setValue(['Value2', 'Value3']);

// or

import { SettingEx } from 'obsidian-dev-utils/obsidian/setting-ex';

new SettingEx()
  .addMultipleDropdown((multipleDropdown) => {
    multipleDropdown.addOptions({
      Value1: 'Display 1',
      Value2: 'Display 2',
      Value3: 'Display 3',
      Value4: 'Display 4',
      Value5: 'Display 5'
    });
    multipleDropdown.setValue(['Value2', 'Value3']);
  });

MultipleEmailComponent

import { MultipleEmailComponent } from 'obsidian-dev-utils/obsidian/components/setting-component/multiple-email-component';

const multipleEmail = new MultipleEmailComponent(containerEl);
multipleEmail.setValue(['foo@bar.com', 'baz@qux.com']);

// or

import { SettingEx } from 'obsidian-dev-utils/obsidian/setting-ex';

new SettingEx()
  .addMultipleEmail((multipleEmail) => {
    multipleEmail.setValue(['foo@bar.com', 'baz@qux.com']);
  });

MultipleFileComponent

import { MultipleFileComponent } from 'obsidian-dev-utils/obsidian/components/setting-component/multiple-file-component';

const multipleFile = new MultipleFileComponent(containerEl);
multipleFile.onChange((value) => console.log(value));

// or

import { SettingEx } from 'obsidian-dev-utils/obsidian/setting-ex';

new SettingEx()
  .addMultipleFile((multipleFile) => {
    multipleFile.onChange((value) => console.log(value));
  });

MultipleTextComponent

import { MultipleTextComponent } from 'obsidian-dev-utils/obsidian/components/setting-component/multiple-text-component';

const multipleText = new MultipleTextComponent(containerEl);
multipleText.setValue(['foo', 'bar']);

// or

import { SettingEx } from 'obsidian-dev-utils/obsidian/setting-ex';

new SettingEx()
  .addMultipleText((multipleText) => {
    multipleText.setValue(['foo', 'bar']);
  });

NumberComponent

import { NumberComponent } from 'obsidian-dev-utils/obsidian/components/setting-component/number-component';

const number = new NumberComponent(containerEl);
number.setValue(42);

// or

import { SettingEx } from 'obsidian-dev-utils/obsidian/setting-ex';

new SettingEx()
  .addNumber((number) => {
    number.setValue(42);
  });

PasswordComponent

import { PasswordComponent } from 'obsidian-dev-utils/obsidian/components/setting-component/password-component';

const password = new PasswordComponent(containerEl);
password.setValue('foo');

// or

import { SettingEx } from 'obsidian-dev-utils/obsidian/setting-ex';

new SettingEx()
  .addPassword((password) => {
    password.setValue('foo');
  });

TelephoneComponent

import { TelephoneComponent } from 'obsidian-dev-utils/obsidian/components/setting-component/telephone-component';

const telephone = new TelephoneComponent(containerEl);
telephone.setValue('+123 456 78 90');

// or

import { SettingEx } from 'obsidian-dev-utils/obsidian/setting-ex';

new SettingEx()
  .addTelephone((telephone) => {
    telephone.setValue('+123 456 78 90');
  });

On mobile the keyboard for this component changes.

TimeComponent

import { moment } from 'obsidian';
import { TimeComponent } from 'obsidian-dev-utils/obsidian/components/setting-component/time-component';

const time = new TimeComponent(containerEl);
time.setValue(moment.duration({ hours: 12, minutes: 34 }));

// or

import { moment } from 'obsidian';
import { SettingEx } from 'obsidian-dev-utils/obsidian/setting-ex';

new SettingEx()
  .addTime((time) => {
    time.setValue(moment.duration({ hours: 12, minutes: 34 }));
  });

TriStateCheckboxComponent

import { TriStateCheckboxComponent } from 'obsidian-dev-utils/obsidian/components/setting-component/tri-state-checkbox-component';

const triStateCheckbox = new TriStateCheckboxComponent(containerEl);
triStateCheckbox.setValue(null);

// or

import { SettingEx } from 'obsidian-dev-utils/obsidian/setting-ex';

new SettingEx()
  .addTriStateCheckbox((triStateCheckbox) => {
    triStateCheckbox.setValue(null);
  });

TypedDropdownComponent

import { TypedDropdownComponent } from 'obsidian-dev-utils/obsidian/components/setting-component/typed-dropdown-component';

export class TypedItem {
  public static readonly Bar = new TypedItem('Bar');
  public static readonly Baz = new TypedItem('Baz');
  public static readonly Foo = new TypedItem('Foo');

  public constructor(public readonly name: string) {}
}

const typedDropdown = new TypedDropdownComponent(containerEl);
const map = new Map<TypedItem, string>();
map.set(TypedItem.Foo, 'Display Foo');
map.set(TypedItem.Bar, 'Display Bar');
map.set(TypedItem.Baz, 'Display Baz');
typedDropdown.addOptions(map);
typedDropdown.setValue(TypedItem.Bar);

// or

import { SettingEx } from 'obsidian-dev-utils/obsidian/setting-ex';

export class TypedItem {
  public static readonly Bar = new TypedItem('Bar');
  public static readonly Baz = new TypedItem('Baz');
  public static readonly Foo = new TypedItem('Foo');

  public constructor(public readonly name: string) {}
}

new SettingEx()
  .addTypedDropdown((typedDropdown) => {
    const map = new Map<TypedItem, string>();
    map.set(TypedItem.Foo, 'Display Foo');
    map.set(TypedItem.Bar, 'Display Bar');
    map.set(TypedItem.Baz, 'Display Baz');
    typedDropdown.addOptions(map);
    typedDropdown.setValue(TypedItem.Bar);
  });

TypedMultipleDropdownComponent

import { TypedMultipleDropdownComponent } from 'obsidian-dev-utils/obsidian/components/setting-component/typed-multiple-dropdown-component';

export class TypedItem {
  public static readonly Bar = new TypedItem('Bar');
  public static readonly Baz = new TypedItem('Baz');
  public static readonly Foo = new TypedItem('Foo');

  public constructor(public readonly name: string) {}
}

const typedMultipleDropdown = new TypedMultipleDropdownComponent(containerEl);
const map = new Map<TypedItem, string>();
map.set(TypedItem.Foo, 'Display Foo');
map.set(TypedItem.Bar, 'Display Bar');
map.set(TypedItem.Baz, 'Display Baz');
typedMultipleDropdown.addOptions(map);
typedMultipleDropdown.setValue([TypedItem.Bar, TypedItem.Baz]);

// or

import { SettingEx } from 'obsidian-dev-utils/obsidian/setting-ex';

export class TypedItem {
  public static readonly Bar = new TypedItem('Bar');
  public static readonly Baz = new TypedItem('Baz');
  public static readonly Foo = new TypedItem('Foo');

  public constructor(public readonly name: string) {}
}

new SettingEx()
  .addTypedMultipleDropdown((typedMultipleDropdown) => {
    const map = new Map<TypedItem, string>();
    map.set(TypedItem.Foo, 'Display Foo');
    map.set(TypedItem.Bar, 'Display Bar');
    map.set(TypedItem.Baz, 'Display Baz');
    typedMultipleDropdown.addOptions(map);
    typedMultipleDropdown.setValue([TypedItem.Bar, TypedItem.Baz]);
  });

UrlComponent

import { UrlComponent } from 'obsidian-dev-utils/obsidian/components/setting-component/url-component';

const url = new UrlComponent(containerEl);
url.setValue('https://foo.com/');

// or

import { SettingEx } from 'obsidian-dev-utils/obsidian/setting-ex';

new SettingEx()
  .addUrl((dateTime) => {
    url.setValue('https://foo.com/');
  });

WeekComponent

import { WeekComponent } from 'obsidian-dev-utils/obsidian/components/setting-component/week-component';

const week = new WeekComponent(containerEl);
dateTime.setValue({
  weekNumber: 6,
  year: 2025
});

// or

import { SettingEx } from 'obsidian-dev-utils/obsidian/setting-ex';

new SettingEx()
  .addWeek((week) => {
    dateTime.setValue({
      weekNumber: 6,
      year: 2025
    });
  });