Switch

Toggle switch with labels and form chrome.

Introduction

Use switches for binary settings that take effect immediately, such as enabling notifications or dark mode. Prefer Checkbox when the choice is part of a form submission or when users may select multiple options. For choosing among labeled segments in a shared track, use Toggle Group.

endLabel / startLabel and description are built into the component. A native checkbox input with role="switch" drives the control under the hood.

Import

import { Switch } from "@bridge-ui/vue/Components/Switch";

import { Switch } from "@bridge-ui/react/Components/Switch";

Basic usage

Provide endLabel / startLabel and optional description. In React, use checked and onChange for controlled state; in Vue, use v-model. For uncontrolled usage with an initial state, use defaultChecked in React or default-checked in Vue.

Colors

Use the color prop to change the track and thumb color. Available colors: primary, secondary, success, info, warning, error, and dark.

Sizes

Control the switch size with the size prop. Available sizes: 2xs, xs, sm, md (default), lg, xl, and 2xl.

Rounded

Use the rounded prop to control border radius. Available values: none, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, and full (defaults vary by component).

Validation

Use required to mark the field as required, error with errorMessage for invalid state, and disabled to prevent interaction.

Related components

Checkbox, Label, Radio, Toggle Group

Accessibility

• Space toggles the switch when the native input is focused
• Tab and Shift+Tab move between controls in the page
• A visually hidden native <input type="checkbox" role="switch"> holds state; track and thumb have aria-hidden
• endLabel is associated with the input through matching id and htmlFor
• error sets aria-invalid on the input and data-invalid on the FormControl root
• disabled sets aria-disabled on the FormControl root

Anatomy

<div data-invalid>
  <div>
    <!-- row -->
    <label>
      <input type="checkbox" role="switch" class="sr-only" id="..." />
      <span aria-hidden="true" />
      <!-- track -->
      <span aria-hidden="true" />
      <!-- thumb -->
    </label>
    <label for="...">End label</label>
  </div>
  <p>Description</p>
  <p aria-hidden>Error message</p>
</div>

API