# Settings

| **Platform** | **Status** |
| :----------- | :--------- |
| Web          | Ready      |

## Goal

Allow the user to consistently manage settings for their account or for specific
features within the application.

## Use when…

Something about the user's account or functionality needs to be managed and it

* can't be done in the context of the main application
* involves setting a default that does not frequently change
* has a group of related options that are better managed in a single place

## Solution

Under the appropriate section in the Settings menu, add a setting for the
feature.

Most settings can be managed with the
[FeatureSwitch](../FeatureSwitch/FeatureSwitch.md) component, which allows:

* turning functionality on and off
* editing aspects of the feature via a [Dialog](../Dialog/Dialog.md)
* if the page supports it, live updates to the setting

### Grouping settings

Use a [Card](../Card/Card.md) to group related settings together.

## Implementation

The [FeatureSwitch](../FeatureSwitch/FeatureSwitch.md) component is a good starting
point for most settings. If the setting is more complex, you can trigger a
[Dialog](../Dialog/Dialog.md) to edit the setting.

For cases where you don't need the full functionality of the `FeatureSwitch`,
you can either opt out of props like `onSwitch` or `onEdit`, or compose a layout
of the pieces you do need.

## Related

### Components

* [FeatureSwitch](../FeatureSwitch/FeatureSwitch.md)
* [Card](../Card/Card.md)
* [Dialog](../Dialog/Dialog.md)
* [Switch](../Switch/Switch.md)

## Principles

* [Visibility of system status](https://www.nngroup.com/articles/visibility-system-status/)
* [Help users recognize, diagnose and recover from errors](https://www.nngroup.com/articles/ten-usability-heuristics/#toc-9-help-users-recognize-diagnose-and-recover-from-errors-9)