# SettingsRow

> `SettingsRow` is part of the Containers set, imported from `@jcsoftdev/ui/containers`.

Source: https://ui.jcsoftdev.com/docs/components/settings-row

`SettingsRow` is part of the Containers set, imported from `@jcsoftdev/ui/containers`.

## Import

```ts
import { SettingsRow } from "@jcsoftdev/ui/containers";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/containers/settings-row`.

## Usage

```tsx
<SettingsRow
  title="Recordatorio por WhatsApp"
  description="Se envía al cliente 2 horas antes de la cita."
  control={<Switch defaultChecked aria-label="Recordatorio por WhatsApp" />}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` * | `ReactNode` |  |  |
| `description` | `ReactNode` |  |  |
| `control` | `ReactNode` |  | Control on the right: a switch, a button, etc. |
| `titleId` | `string` |  | Id for the title element, so the control can reference it with `aria-labelledby`. |

`*` marks a required prop.

It also accepts the native props of the element or primitive it renders (for example `className`, `id`, `aria-*` and event handlers).

## Storybook stories

- [Default](/storybook/?path=/story/containers-settingsrow--default)
- [With Button](/storybook/?path=/story/containers-settingsrow--with-button)
- [Without Description](/storybook/?path=/story/containers-settingsrow--without-description)
- [Without Control](/storybook/?path=/story/containers-settingsrow--without-control)
- [Narrow](/storybook/?path=/story/containers-settingsrow--narrow)

## Source

`packages/ui/src/containers/settings-row/settings-row.tsx`