---
id: style-guide-settings
title: Style Guide - Settings Pages
sidebar_label: Settings Pages
---

## Overview

Setting pages should focus solely on settings and configuring the device. Hardware is often a related topic, however these pages should not attempt to explain attaching hardware. Mention that hardware is required and link to the appropriate page(s).

## Layout

### Overview

This section should describe the group of settings and what they do for the device.

### Settings

This section starts with an alphabetized table of settings, available values, and default values.

Available values should be listed with tick marks `` surrounding the value.

| Value Type |           Example           |
| :--------: | :-------------------------: |
|  Boolean   |       `true`, `false`       |
|    List    | `apple`, `banana`, `orange` |
|   Range    |          `0`-`100`          |

After the table each setting is described in brief detail. If the available options for a setting need additional explanation, a table should be used to describe each available option.

### Details

If additional details are needed, this optional section can explain that. These would include prerequisites, links to hardware guides, etc.

### Examples

This optional section can have examples of configurations needed where multiple settings are required to be set up for a specific use case.

## Example Template

```markdown title="Template for Settings Pages"
---
id: unique-id
title: Title for Page
sidebar_label: Label for Sidebar
---

<!--- Allows client-specific tabs to be used --->

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

## Overview

<!--- Add overview text to describe this group of settings --->

## Settings

<!--- Table of settings in alphabetical order --->

|         Setting         |      Acceptable Values      | Default |
| :---------------------: | :-------------------------: | :-----: |
| my_setting_with_options | `apple`, `banana`, `orange` | `apple` |

<!--- H3 for each setting above (alphabetized) --->

### my_setting_with_options

<!--- description for what the setting does --->

<!--- if the setting has many options, insert a table describing what those variables do --->

|  Value   |          Description           |
| :------: | :----------------------------: |
| `apple`  | Description of apple (default) |
| `banana` |     Description of banana      |
| `orange` |     Description of orange      |

<!--- Client tabs that were imported above --->

<Tabs
groupId="settings"
defaultValue="cli"
values={[
{label: 'CLI', value: 'cli'},
{label: 'Android', value: 'android'},
{label: 'iOS', value: 'iOS'},
{label: 'Web', value: 'web'},
]}>
<TabItem value="cli">
CLI content here
</TabItem>
<TabItem value="android">
Android content here
</TabItem>
<TabItem value="iOS">
iOS content here
</TabItem>
<TabItem value="web">
Web content here
</TabItem>
</Tabs>

## Details

<!--- Additional details about the settings IF NEEDED otherwise delete this h2 header --->

## Examples

<!--- Meant for examples where multiple settings are configured at the same time (WiFi type/SSID/password in a single command). If not needed, delete this h2 header --->
```