Switch

A toggle switch component for boolean settings, ready for CMS integration.

CMSPayload CMS Integration

Switches can be configured through CMS fields, allowing content editors to customize labels, descriptions, and default states without code changes.

CMS Demo

See how content editors configure switches in a CMS:

Email notificationsReceive email updates about your account activity

CMS FieldsEN

Label

Description

Size

Default Enabled

Disabled

This simulates how a content editor configures switches in Payload CMS. Switch locales to see localized content.

CMS ConfigurationSimulates Payload CMS switch fields with localization

Payload Form Example

// In your Payload CMS form config
export const NotificationSettings = {
  slug: "notification-settings",
  fields: [
    {
      name: "emailNotifications",
      type: "group",
      fields: [
        { name: "label", type: "text", localized: true, required: true },
        { name: "description", type: "text", localized: true },
        { name: "defaultEnabled", type: "checkbox", defaultValue: true },
      ],
    },
  ],
}

Rendering the Form

import { Switch } from "@mordecai-design-system/ui"

export function NotificationSettings({ data }) {
  const field = data.emailNotifications
  return (
    <div className="flex items-center justify-between">
      <div className="space-y-0.5">
        <label className="text-sm font-medium">{field.label}</label>
        <p className="text-xs text-muted-foreground">{field.description}</p>
      </div>
      <Switch defaultChecked={field.defaultEnabled} />
    </div>
  )
}

Basic Usage

Enable notifications

SwitchA default switch

Installation

pnpm add @corew500/ui

Usage

import { Switch } from "@mordecai-design-system/ui"

<Switch />

Examples

With Label

<div className="flex items-center gap-2">
  <Switch id="airplane-mode" />
  <label htmlFor="airplane-mode" className="text-sm font-medium">
    Airplane Mode
  </label>
</div>

Sizes

<Switch size="sm" />
<Switch size="default" />

Disabled

<Switch disabled />
<Switch disabled defaultChecked />

Controlled

const [enabled, setEnabled] = useState(false)

<Switch checked={enabled} onCheckedChange={setEnabled} />

Props

Prop	Type	Default	Description
`className`	enum	—	CSS class applied to the element, or a function that returns a class based on the component’s state.
`defaultChecked`	enum	`false`	Whether the switch is initially active. To render a controlled switch, use the `checked` prop instead.
`style`	enum	—	Style applied to the element, or a function that returns a style object based on the component’s state.
`id`	string	—	The id of the switch element.
`render`	enum	—	Allows you to replace the component’s HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
`checked`	enum	—	Whether the switch is currently active. To render an uncontrolled switch, use the `defaultChecked` prop instead.
`disabled`	enum	`false`	Whether the component should ignore user interaction.
`inputRef`	enum	—	A ref to access the hidden `<input>` element.
`name`	string	—	Identifies the field when a form is submitted.
`onCheckedChange`	(checked: boolean, eventDetails: { reason: "none"; event: Event; cancel: () => void; allowPropagation: () => void; isCanceled: boolean; isPropagationAllowed: boolean; trigger: Element; }) => void	—	Event handler called when the switch is activated or deactivated.
`readOnly`	enum	`false`	Whether the user should be unable to activate or deactivate the switch.
`required`	enum	`false`	Whether the user must activate the switch before submitting a form.
`value`	string	—	The value submitted with the form when the switch is on. By default, switch submits the "on" value, matching native checkbox behavior.
`uncheckedValue`	string	—	The value submitted with the form when the switch is off. By default, unchecked switches do not submit any value, matching native checkbox behavior.
`nativeButton`	enum	`false`	Whether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `true` if the rendered element is a native button.
`size`	enum	—	—