Cell Switch
A toggle switch styled as a settings cell with label and description, ideal for preference panels.
Usage
Controlled
Disabled
Feature Announcement
Secondary Group
Settings Group
Variants
CSS Classes
Base Classes
.cell-switch- Root wrapper (renders as alabelvia HeroUI Switch)
Element Classes
.cell-switch__trigger- The visible cell row container.cell-switch__trigger--default- Default variant trigger styling.cell-switch__trigger--secondary- Secondary variant trigger styling.cell-switch__label- Leading text label.cell-switch__control- Switch control wrapper.cell-switch__control--secondary- Secondary variant control styling
Variant Classes
.cell-switch--secondary- Secondary variant on the root
API Reference
CellSwitch
The root component. Wraps HeroUI Switch with cell-style layout. Clicking anywhere in the cell toggles the switch.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'default' | 'secondary' | 'default' | Visual style variant |
Also supports all HeroUI Switch props except variant.
CellSwitch.Trigger
The visible cell row containing the label and switch control.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | Label and control elements |
Also supports all native div HTML attributes.
CellSwitch.Label
Leading text label rendered as a span.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | Label text |
Also supports all native span HTML attributes.
CellSwitch.Control
Switch control. Renders the default HeroUI Switch.Thumb when no children are provided.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | Custom control content |
Also supports all HeroUI Switch.Control props.