Components

Switch

Turns a single option on or off, taking effect immediately.

Auto-refresh worklist

import { Switch } from '@/registry/qure/ui/switch'export default function SwitchDemo() {  return (    <label className="flex items-center gap-2 text-sm">      <Switch defaultChecked /> Auto-refresh worklist    </label>  )}

Installation

npx shadcn@latest add https://qure-ui.qure.ai/r/switch.json

Usage

import { Switch } from '@/components/ui/switch'

<Label><Switch defaultChecked /> Auto-refresh worklist</Label>

A switch takes effect the moment it is flipped. A checkbox is a selection you confirm later with a button. If your form has a Save button, the control is probably a checkbox — and if flipping the switch cannot actually change anything until something else happens, the switch is lying about when it applies.

A switch is also wrong for a choice between two named things. "Sagittal / Coronal" is a pair of options, not an on and an off; that is a radio group or a toggle group, where both choices are visible and labelled.

With a label

Auto-refresh worklist

import { Switch } from '@/registry/qure/ui/switch'export default function SwitchDemo() {  return (    <label className="flex items-center gap-2 text-sm">      <Switch defaultChecked /> Auto-refresh worklist    </label>  )}

Wrapping the switch in a Label is the shortest correct form; htmlFor with the switch's id works too, because Base UI puts that id on the hidden input rather than on the rendered span (unless you set nativeButton). Either way the text becomes part of the hit target, which a 40×24 track needs.

States

Off On Off, disabled On, disabled

import { Label } from '@/registry/qure/ui/label'import { Switch } from '@/registry/qure/ui/switch'export default function SwitchState() {  return (    <div className="grid gap-3">      <Label><Switch /> Off</Label>      <Label><Switch defaultChecked /> On</Label>      <Label><Switch disabled /> Off, disabled</Label>      <Label><Switch defaultChecked disabled /> On, disabled</Label>    </div>  )}

Off, on, and both disabled. Disabled keeps the switch in the DOM and readable rather than hiding the option — "your administrator has fixed this" is information, and a setting that vanishes looks like a bug. Say why it is disabled somewhere near it; the greying alone does not.

A settings panel

Viewer preferences

Auto-refresh worklistEvery 30 seconds

Load priors automaticallyAdds a few seconds to opening a study

Show qXR overlays on openOff by default for reporting sessions

import { Card, CardContent, CardHeader, CardTitle } from '@/registry/qure/ui/card'import { Switch } from '@/registry/qure/ui/switch'const settings = [  { id: 'refresh', label: 'Auto-refresh worklist', hint: 'Every 30 seconds', on: true },  { id: 'priors', label: 'Load priors automatically', hint: 'Adds a few seconds to opening a study', on: true },  { id: 'overlays', label: 'Show qXR overlays on open', hint: 'Off by default for reporting sessions', on: false },]export default function SwitchSettings() {  return (    <Card className="w-full max-w-md">      <CardHeader>        <CardTitle>Viewer preferences</CardTitle>      </CardHeader>      <CardContent className="grid gap-4">        {settings.map(setting => (          <div key={setting.id} className="flex items-start justify-between gap-6">            <label htmlFor={setting.id} className="grid gap-0.5">              <span className="text-sm font-medium">{setting.label}</span>              <span className="text-sm text-muted-foreground">{setting.hint}</span>            </label>            <Switch id={setting.id} defaultChecked={setting.on} />          </div>        ))}      </CardContent>    </Card>  )}

Label on the left with htmlFor, control on the right, one line of consequence under each label — wrapping would put the switch inside the text block. This is where switches earn their keep: several independent preferences, each applying as soon as it is touched, with no Save button anywhere in sight.

Controlled

qXR overlays

Overlays drawn on the current series.

'use client'import * as React from 'react'import { Label } from '@/registry/qure/ui/label'import { Switch } from '@/registry/qure/ui/switch'export default function SwitchControlled() {  const [overlays, setOverlays] = React.useState(true)  return (    <div className="grid w-full max-w-xs gap-3">      <Label>        <Switch checked={overlays} onCheckedChange={setOverlays} /> qXR overlays      </Label>      <p className="text-sm text-muted-foreground" aria-live="polite">        {overlays ? 'Overlays drawn on the current series.' : 'Showing the unannotated series.'}      </p>    </div>  )}

Pass checked with onCheckedChange when the state lives elsewhere — a viewer preference shared between panes, or one persisted to the server. Reflect the result near the control, and if the write can fail, put the switch back and say so rather than leaving it showing a state the server never accepted.

The design system calls this component Toggle. It is Switch here because in Base UI and shadcn, Toggle means a pressed-state button and Switch is the on/off track — keeping their names keeps the primitives predictable.

API Reference

Everything Base UI's Switch accepts. The ones you will reach for:

Prop

Type

Stepper

Where somebody is in a flow with a known number of stages.

Table

Rows and columns, built out of the elements that are already accessible.