# Cell

> Settings-list row with a ready-made control.

Source: https://ui.jcsoftdev.com/docs/components/cell

Settings-list row with a ready-made control. It extends `SettingsRow` (same layout, divider and
wrapping) and fills its `control` slot with a switch, native select, slider or color picker, wiring
the row title as the control's accessible name.

## Import

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

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

## Usage

```tsx
<Cell
  variant="switch"
  title="Recordatorio por WhatsApp"
  description="Se envía al cliente 2 horas antes de la cita."
  defaultChecked
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` * | `"select" \| "switch" \| "color" \| "slider"` |  |  |
| `defaultChecked` | `boolean` |  |  |
| `disabled` | `boolean` |  |  |
| `title` * | `ReactNode` |  |  |
| `description` | `ReactNode` |  |  |
| `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-cell--default)
- [Select](/storybook/?path=/story/containers-cell--select)
- [Slider](/storybook/?path=/story/containers-cell--slider)
- [Color](/storybook/?path=/story/containers-cell--color)
- [List](/storybook/?path=/story/containers-cell--list)
- [Narrow](/storybook/?path=/story/containers-cell--narrow)
- [Brutal Preset](/storybook/?path=/story/containers-cell--brutal-preset)

## Source

`packages/ui/src/containers/cell/cell.tsx`