Primitives

Switch

Turns a setting on or off, and the change applies at once.

Appointment reminders

Usage

import { Label, Switch } from "@cadence-clinical/ui";

<Label>
  <Switch onCheckedChange={setReminders} />
  Appointment reminders
</Label>;

Switch is built on the Base UI Switch and accepts all of its props. It follows the shadcn Switch.

Use a switch for a setting that applies the moment it changes. For a choice that is saved with the rest of a form, use a Checkbox.

What Cadence changes

Its size follows the density, so there is no size prop. The target is as high as a control.
The thumb always sits on a track it is contrast-tested against, in every mode and at more contrast, with no dark: overrides.

Accessibility

On and off differ by where the thumb sits as well as by colour.
The thumb's movement is removed when the user asks for reduced motion.

Status changelog

Every change to Status, from the changesets that record it.

Table

A table of data. Cells wrap between words, a word is never broken, and a table that is too wide scrolls inside its own focusable box.

On this page

Usage What Cadence changes Accessibility