Switch Card

SwitchCard is a card layout for settings that need a toggle on the left and explanatory or state-aware content on the right. This page documents the card itself; the standalone toggle and SwitchGroup APIs live on the Switch documentation.

Basic usageCopy Anchor Link

import { SwitchCard } from '@mosmox/ui';

<SwitchCard
  title="Email alerts"
  description="Choose whether this workspace sends email alerts."
  defaultChecked
  alwaysContent="Changes apply to all workspace members."
  checkedContent="Email alerts are enabled and new messages will be sent."
  uncheckedContent="Email alerts are disabled and no messages will be sent."
/>

The card uses a content-sized switch column and a flexible content column. It remains full width without splitting the two columns into equal halves. The switch is on the left by default.

Switch positionCopy Anchor Link

Use switchPosition="right" to place the switch on the right side while keeping the content on the left. The default is switchPosition="left".

<SwitchCard
  switchPosition="right"
  title="Right-aligned control"
  description="The switch is displayed on the right side of the card."
  checkedContent="This setting is enabled."
  uncheckedContent="This setting is disabled."
/>

Content areasCopy Anchor Link

alwaysContent is rendered in either state. checkedContent is rendered only when the toggle is on, while uncheckedContent is rendered only when it is off. These props accept any React content and are rendered as regular card content.

<SwitchCard
  title="Advanced workspace"
  description="Expose additional workspace controls."
  alwaysContent="Workspace members can review this setting."
  checkedContent={<button type="button">Open advanced settings</button>}
  uncheckedContent="Enable this option to see advanced settings."
/>

If a conditional content prop is omitted, that state simply has no conditional content. alwaysContent and the selected conditional content are rendered in order beneath the description.

Toggle stateCopy Anchor Link

The card composes the native checkbox toggle used by Switch, so it supports the same controlled and uncontrolled checked behavior:

const [sharing, setSharing] = useState(false);

<SwitchCard
  title="Data sharing"
  description="Control optional analytics sharing."
  checked={sharing}
  onChange={(event) => setSharing(event.target.checked)}
  checkedContent="Analytics are shared anonymously."
  uncheckedContent="Analytics are not shared."
/>

Use defaultChecked for local state. The card forwards toggle interaction props to its internal control, including loading, disabled, validation, sizing, and native input behavior. Refer to the Switch documentation for the standalone toggle's interaction and accessibility model.

AccessibilityCopy Anchor Link

• the card heading and description are rendered as visible supporting content;
• the interactive control remains a native checkbox-based toggle;
• state-aware content is updated when the toggle value changes;
• keep title descriptive and provide enough context for the embedded control;
• use the Switch documentation for detailed toggle semantics, keyboard behavior, and status guidance.

Styling modelCopy Anchor Link

SwitchCard uses the same border, radius, typography, and text tokens as Accordion. It intentionally has no card background, so the surrounding surface remains visible. These values inherit theme overrides supplied through ConfigProvider; its two-column layout and content regions are defined in SwitchCard.css, while toggle styling is defined by the composed Switch component.

API ReferenceCopy Anchor Link

These are the props owned by the card layout:

SwitchCard also accepts the toggle and native input props composed from Switch. See the Switch API reference for those shared props. The page-level Open interactive example link points to the #switch-card showcase anchor and uses the configured NEXT_PUBLIC_SHOWCASE_URL.