# How do I add a settings tab?
#obsidian/api/faq
---
Below is an excerpt from the [sample-plugin](https://github.com/obsidianmd/obsidian-sample-plugin) for creating a basic Setting tab.
The API provides `Setting` as a builder class for adding text fields, toggles, and other input types.
You also have access to the `containerEl` so you are free to customize the setting tab to your heart's delight. This means even if the API doesn't provide the built-in control element that you want, you can always bring your own. Or it means you can drop in a nice heading a link to your buymeacoffee if you want!
## Sample Code
```ts
interface ISettings {
mySetting: string;
}
const DEFAULT_SETTINGS: MyPluginSettings = {
mySetting: 'default'
}
export default class MyPlugin extends Plugin {
async onLoad(): Promise<void> {
this.addSettingTab(new SampleSettingTab(this.app, this));
}
}
class SampleSettingTab extends PluginSettingTab {
plugin: MyPlugin;
constructor(app: App, plugin: MyPlugin) {
super(app, plugin);
this.plugin = plugin;
}
display(): void {
let { containerEl } = this;
// Remove any existing children from the container HTML element. This allows
// the `display` function to be idempotent and you can freely call `display()`
// if you ever need to reset the settings view.
containerEl.empty();
containerEl.createEl('h2', {text: 'Settings for my awesome plugin.'});
// Create a basic text input and add it to the `containerEl`
new Setting(containerEl)
.setName('Setting #1')
.setDesc('It\'s a secret')
.addText(text => text
.setPlaceholder('Enter your secret')
.setValue('')
.onChange(async (value) => {
console.log('Secret: ' + value);
this.plugin.settings.mySetting = value;
await this.plugin.saveSettings();
}));
}
}
```