# Settings controls (/cloud/desktop/settings-controls)



```ts title="Import"
import {
  SettingsRow,
  SettingsSelect,
  SettingsStepper,
  SettingsSwitch,
} from "../chrome/settings-controls.tsx";
```

File: `packages/desktop/src/renderer/src/chrome/settings-controls.tsx`. Styles come from
`theme/settings-patterns.stylex.ts` (`settingsPatterns`: section, sectionHeader, sectionTitle,
sectionDescription, group, row, rowCopy, rowTitle, rowDescription, rowControl, …). Every Settings
section is `section › sectionHeader › group › SettingsRow*`.

## `SettingsRow` [#settingsrow]

Title and description on the left, one control on the right, optional detail below.

| Prop           | Type                     | Default      | Description                                                                               |
| -------------- | ------------------------ | ------------ | ----------------------------------------------------------------------------------------- |
| `title`        | `string`                 |              | Required.                                                                                 |
| `description`  | `string`                 |              | Required. One sentence; can change with state ("Connect a provider below to choose one"). |
| `variant`      | `"standard" \| "slider"` | `"standard"` | Slider rows are taller.                                                                   |
| `controlWidth` | `"standard" \| "wide"`   | `"standard"` | Wide for model selects.                                                                   |
| `detail`       | `ReactNode`              |              | A block under the row (a slider's readout).                                               |
| `children`     | `ReactNode`              |              | The control.                                                                              |

The row does not create a `<label>`; each control carries its own `aria-label`.

## `SettingsSelect<T extends string>` [#settingsselectt-extends-string]

Over [`@nyte-ai/ui/select`](/cloud/headless/select): \`Select.Root › Trigger(aria-label) › Value

* Icon › Portal › Positioner › Popup › List › Item › ItemText + ItemIndicator\`.

| Prop            | Type                                 | Default      | Description                            |
| --------------- | ------------------------------------ | ------------ | -------------------------------------- |
| `label`         | `string`                             |              | Required. `aria-label` on the trigger. |
| `value`         | `T`                                  |              | Required, controlled.                  |
| `options`       | `readonly SettingsSelectOption<T>[]` |              | `{ value, label, fontFamily? }`.       |
| `disabled`      | `boolean`                            | `false`      |                                        |
| `width`         | `"standard" \| "wide"`               | `"standard"` |                                        |
| `onValueChange` | `(value: T) => void`                 |              | Required.                              |

`SettingsSelectOption.fontFamily` exists because "installed family names cannot be compiled into
StyleX"; the font-family select sets it inline per item. Collision avoidance is
`{ side: "flip", align: "shift", fallbackAxisSide: "none" }`.

Keyboard is Base UI Select's: Arrow keys move, typeahead, Enter/Space select, Escape closes, and
the popup aligns the selected item over the trigger.

## `SettingsSwitch` [#settingsswitch]

Over [`@nyte-ai/ui/switch`](/cloud/headless/switch).

| Prop              | Type                         | Description                                                                                                   |
| ----------------- | ---------------------------- | ------------------------------------------------------------------------------------------------------------- |
| `label`           | `string`                     | Required. `aria-label`.                                                                                       |
| `checked`         | `boolean`                    | Required.                                                                                                     |
| `disabled`        | `boolean`                    |                                                                                                               |
| `title`           | `string`                     | Native tooltip explaining why it is disabled (the reduce-transparency switch when the OS already reduces it). |
| `onCheckedChange` | `(checked: boolean) => void` | Required.                                                                                                     |

`role="switch"`, `aria-checked`; Space toggles.

## `SettingsStepper` [#settingsstepper]

Over [`@nyte-ai/ui/number-field`](/cloud/headless/number-field), with decrement and increment
`IconButton`s around the value.

| Prop            | Type                      | Description |
| --------------- | ------------------------- | ----------- |
| `label`         | `string`                  | Required.   |
| `value`         | `number`                  | Required.   |
| `minimum`       | `number`                  | Required.   |
| `maximum`       | `number`                  | Required.   |
| `onValueChange` | `(value: number) => void` | Required.   |

Arrow Up/Down step, Home/End jump to min/max, the buttons repeat on hold.

## Where they appear [#where-they-appear]

| Page       | Controls                                                                                                        |
| ---------- | --------------------------------------------------------------------------------------------------------------- |
| General    | `SettingsSelect` (window restoration)                                                                           |
| Appearance | `SettingsSelect` (theme, fonts), `SettingsSwitch` ×4, `SettingsStepper` ×2, Slider rows                         |
| Models     | `SettingsSelect` (default model, thinking, **default subagent model**), `SettingsSwitch` per provider and model |
| Usage      | none; toggle group and drag-sortable cards                                                                      |
| Accounts   | none; `ConnectionList` rows                                                                                     |

See [Surfaces › Settings](/cloud/surfaces/settings).