Switch

Overview

A switch toggles a single setting on or off, taking effect immediately. Pair it with a Label describing what it controls.

$ npx morpha-ui add switch

Examples

With label

Airplane mode

Disabled

Disabled setting

Installation

Morpha UI components are distributed via the Morpha CLI (coming in a later step): npx morpha-ui add switch. In the meantime, since this is the base shadcn component, you can also add it directly:

npx shadcn@latest add switch

API Reference

Prop

Type

Accessibility

The underlying Radix primitive exposes role="switch" and the checked state.
Associate a <Label htmlFor> with the switch id so its purpose is announced.
Keyboard: focus with Tab, toggle with Space or Enter.