Cell Switch

Usage

Anatomy

Import the CellSwitch component and access all parts using dot notation.

import {CellSwitch} from "@heroui-pro/react";

<CellSwitch>
  <CellSwitch.Trigger>
    <CellSwitch.Label />
    <CellSwitch.Control />
  </CellSwitch.Trigger>
</CellSwitch>

Controlled

Disabled

Feature Announcement

Secondary Group

Settings Group

Variants

CSS Classes

Base Classes

• .cell-switch - Root wrapper (renders as a label via 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.

Also supports all HeroUI Switch props except variant.

CellSwitch.Trigger

The visible cell row containing the label and switch control. Renders HeroUI Switch.Content (a <label> element from React Aria's SwitchButton), so clicking anywhere in the row toggles the switch.

Also supports all HeroUI Switch.Content props.

CellSwitch.Label

Leading text label rendered as a span.

Also supports all native span HTML attributes.

CellSwitch.Control

Switch control. Renders the default HeroUI Switch.Thumb when no children are provided.

Also supports all HeroUI Switch.Control props.