Cell Switch

Usage

"use client";

import { CellSwitch } from "@thenamespace/uikit";

function SwitchContents({ label }: { label: string }) {

Anatomy

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

import { CellSwitch } from "@thenamespace/uikit";

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

Controlled

"use client";

import { useState } from "react";

import { CellSwitch } from "@thenamespace/uikit";

Disabled

"use client";

import { CellSwitch } from "@thenamespace/uikit";

function SwitchContents({ label }: { label: string }) {

Feature Announcement

"use client";

import { useState } from "react";

import { CellSwitch } from "@thenamespace/uikit";

Secondary Group

"use client";

import { useState } from "react";

import { CellSwitch } from "@thenamespace/uikit";

Settings Group

"use client";

import { useState } from "react";

import { CellSwitch } from "@thenamespace/uikit";

Variants

"use client";

import { CellSwitch } from "@thenamespace/uikit";

function SwitchContents({ label }: { label: string }) {

CSS Classes

Base Classes

• .cell-switch - Root wrapper (renders as a label via Namespace UIKit 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 Namespace UIKit Switch with cell-style layout. Clicking anywhere in the cell toggles the switch.

Also supports all Namespace UIKit Switch props except variant.

CellSwitch.Trigger

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

Also supports all Namespace UIKit 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 Namespace UIKit Switch.Thumb when no children are provided.

Also supports all Namespace UIKit Switch.Control props.