Switch

Toggle switch for boolean options

Basic Usage

Enable notifications

Installation

pnpm add @corew500/ui

Usage

import { Switch } from "@corew500/ui/switch"

<Switch>Content</Switch>

Variants

switchVariants

Axis	Values	Default
`size`	smdefaultlg	default

thumbVariants

Axis	Values	Default
`size`	smdefaultlg	default

CMS Integration

CMSPayload CMS Integration

This component supports CMS-driven content via @corew500/cms-payload.

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.

API Reference

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	—	—

Accessibility

Keyboard Navigation

Keyboard accessible: Space or Enter to toggle
Focus visible ring for keyboard navigation

Screen Readers

- Uses `role="switch"` for proper semantics (handled by Base UI)
`aria-checked` state managed automatically

Additional

Disabled state indicated visually and to assistive technology
Extended touch target via pseudo-element for mobile accessibility

Localization

Translatable Content

- Labels should be provided externally via `FieldLabel`
For accessible name, use `aria-labelledby` pointing to the label's `id`, or `aria-label` when no visible label exists

Additional

Note: `htmlFor`/`id` does not work with Base UI Switch (id goes to hidden input, not the visible element)

Related Components

Field switchVariants