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

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

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

Usage

<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
• Select
• Slider
• Color
• List
• Narrow
• Brutal Preset

Source

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