Skip to content
Borneo Design System

Switch

Stable

Turn something on or off, with the change taking effect straight away. A switch is a commitment: there is no Save button behind it, so the result must be visible immediately.

Added in v1.1.0 · import from "@borneo/react"

Interactive previewPermalink to this section

The thumb travels with a slight overshoot — the one place the system uses a spring curve, because a physical toggle is the metaphor.

Require a verification code at every sign-in.

State
Size
Enabled
switch-preview.tsx
<SwitchField
  id="two-factor"
  label="Two-factor authentication"
  description="Require a verification code at every sign-in."
  size="md"
  checked
  onCheckedChange={setTwoFactor}
/>

AnatomyPermalink to this section

Two-factor authenticationRequire a verification code at every sign-in.

StatesPermalink to this section

Off

On

Focus visible

Disabled off

Disabled on

Small

Immediate feedbackPermalink to this section

Because there is no Save step, the result of the toggle has to be confirmed. Toggle this one and watch the status line.

Require a verification code at every sign-in.

Related components