Skip to main content

Switch

Switch — Prism component.

Signature
Density
Viewport
Theme follows the navbar ☀/☾ toggle
Live demo
Open ↗

When to use

Switch — Prism component.

Accessibility

Exposes role="switch" with aria-checked; toggled with Space. Pair the icon variant with a real label.

Import

const { Switch } = window.PrismDesignSystem_39d121;

Props

PropTypeRequiredDescription
isSelectedboolean
defaultSelectedboolean
isDisabledboolean
onChange(isSelected: boolean, e: React.ChangeEvent) => void
iconOnReact.ReactNodeIcon shown on the thumb when ON (e.g. a moon for dark mode).
iconOffReact.ReactNodeIcon shown on the thumb when OFF (e.g. a sun for light mode).
childrenReact.ReactNode
classNamestring