Are the ai2 Switch checkboxes free?

Yes. The whole styled layer is free and MIT licensed, like the component core.

Can I change the size?

Yes. Every variation takes a size prop of sm, md, lg or xl, aligned to the base Button height scale.

Switch checkboxes

Five on and off controls from the checkbox layer that look like switches: a classic toggle, an On and Off pill, a sliding fill, an outlined track and a compact switch. They use role switch, which inherits from checkbox in ARIA, so the announcement matches what the control looks like. Each is self-contained, sized, token-driven, keeps the small-control touch target, and works controlled or uncontrolled.

CheckboxSwitch

Installation

The styled layer is free and installs like any other ai2 component.

Run the following command

npx shadcn@latest add @ai2/checkbox-switch

Dependencies, the @ai2/tokens theme and the component file are installed together.

Install dependencies

npm install motion

Copy the source

components/ui/checkbox-switch.tsx

"use client"

import * as React from "react"
import { motion, useReducedMotion } from "motion/react"

import { cn } from "@/lib/utils"

/* Switch-looking checkbox family: 5 switches. ROLE CHOICE: we use role="switch".
   The reason: in ARIA a switch already derives from checkbox (the same on/off
   semantics, the same keyboard contract), but a screen reader announces "on/off"
   instead of "checkbox, checked". Since the control looks like a switch, having
   the announcement be a switch too aligns appearance with semantics; saying
   "checkbox" would give the user the wrong mental model. There is no third state
   (mixed) here, so the switch's restriction costs nothing. data-slot still stays
   "styled-checkbox" - this family is a member of the checkbox layer.
   Because the track can stay under 24px the invisible touch-area extension
   (after:-inset-1.5) is mandatory in every variant. Color comes ONLY from tokens,
   via alpha color-mix. framer-motion switches instantly under reduced-motion. */

export type StyledSize = "sm" | "md" | "lg" | "xl"

const trackSize: Record<StyledSize, string> = {
  sm: "h-4 w-7",
  md: "h-5 w-9",
  lg: "h-6 w-11",
  xl: "h-7 w-[3.25rem]",
}

const pillTrackSize: Record<StyledSize, string> = {
  sm: "h-4 w-12",
  md: "h-5 w-14",
  lg: "h-6 w-16",
  xl: "h-7 w-20",
}

const thumbSize: Record<StyledSize, string> = {
  sm: "size-3",
  md: "size-4",
  lg: "size-5",
  xl: "size-6",
}

/* Basparmagin kat ettigi yol (px): ray genisligi - 4px ic bosluk - basparmak. */
const travel: Record<StyledSize, number> = { sm: 12, md: 16, lg: 20, xl: 24 }
const pillTravel: Record<StyledSize, number> = { sm: 32, md: 36, lg: 40, xl: 52 }

const textSize: Record<StyledSize, string> = {
  sm: "text-xs",
  md: "text-sm",
  lg: "text-sm",
  xl: "text-base",
}

const capSize: Record<StyledSize, string> = {
  sm: "text-[0.5rem]",
  md: "text-[0.5rem]",
  lg: "text-[0.625rem]",
  xl: "text-xs",
}

const trackBase =
  "relative inline-flex shrink-0 cursor-pointer items-center rounded-full p-0.5 outline-none transition-colors after:absolute after:-inset-1.5 focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-danger aria-invalid:ring-danger/20 dark:aria-invalid:ring-danger/40 [&_svg]:shrink-0 [&_i]:leading-none"

const thumbBase = "pointer-events-none block rounded-full shadow-sm"

const rowBase = "inline-flex items-center gap-2.5"

/* Transition type: instant under reduced-motion, spring otherwise. */
type SpringLike = { duration: number } | { type: "spring"; stiffness: number; damping: number }

type CheckboxProps = Omit<React.ComponentProps<"button">, "onChange"> & {
  size?: StyledSize
  label?: string
  checked?: boolean
  defaultChecked?: boolean
  onCheckedChange?: (checked: boolean) => void
}

function useCheckbox(props: {
  checked?: boolean
  defaultChecked?: boolean
  onCheckedChange?: (checked: boolean) => void
}) {
  const { checked, defaultChecked, onCheckedChange } = props
  const reduce = useReducedMotion()
  const [internal, setInternal] = React.useState(defaultChecked ?? false)
  const on = checked ?? internal
  const toggle = () => {
    if (checked === undefined) setInternal((v) => !v)
    onCheckedChange?.(!on)
  }
  const spring: SpringLike = reduce
    ? { duration: 0 }
    : { type: "spring" as const, stiffness: 500, damping: 34 }
  return { on, toggle, spring }
}

/* Toggle: the classic switch; the track turns primary when on. */
export function ToggleCheckbox({
  className,
  size = "md",
  label = "Airplane mode",
  checked,
  defaultChecked,
  onCheckedChange,
  ...props
}: CheckboxProps) {
  const { on, toggle, spring } = useCheckbox({ checked, defaultChecked, onCheckedChange })
  const labelId = React.useId()
  return (
    <span className={rowBase}>
      <button
        type="button"
        role="switch"
        aria-checked={on}
        aria-labelledby={labelId}
        data-slot="styled-checkbox"
        onClick={toggle}
        className={cn(trackBase, trackSize[size], on ? "bg-primary" : "bg-input", className)}
        {...props}
      >
        <motion.span
          initial={false}
          animate={{ x: on ? travel[size] : 0 }}
          transition={spring}
          className={cn(thumbBase, thumbSize[size], "bg-background")}
        />
      </button>
      <span
        id={labelId}
        onClick={toggle}
        className={cn(textSize[size], "cursor-pointer select-none font-medium text-foreground")}
      >
        {label}
      </span>
    </span>
  )
}

/* Pill: rayin icinde ON/OFF yazisi tasiyan genis hap anahtar. */
export function PillCheckbox({
  className,
  size = "md",
  label = "Auto sync",
  checked,
  defaultChecked,
  onCheckedChange,
  ...props
}: CheckboxProps) {
  const { on, toggle, spring } = useCheckbox({ checked, defaultChecked, onCheckedChange })
  const labelId = React.useId()
  return (
    <span className={rowBase}>
      <button
        type="button"
        role="switch"
        aria-checked={on}
        aria-labelledby={labelId}
        data-slot="styled-checkbox"
        onClick={toggle}
        className={cn(pillTrackSize[size], trackBase, on ? "bg-success" : "bg-input", className)}
        {...props}
      >
        <span
          aria-hidden="true"
          className={cn(
            capSize[size],
            "absolute inset-y-0 flex items-center font-semibold uppercase tracking-wide transition-colors",
            on ? "left-2 text-success-foreground" : "right-2 text-muted-foreground"
          )}
        >
          {on ? "On" : "Off"}
        </span>
        <motion.span
          initial={false}
          animate={{ x: on ? pillTravel[size] : 0 }}
          transition={spring}
          className={cn(thumbBase, thumbSize[size], "relative bg-background")}
        />
      </button>
      <span
        id={labelId}
        onClick={toggle}
        className={cn(textSize[size], "cursor-pointer select-none font-medium text-foreground")}
      >
        {label}
      </span>
    </span>
  )
}

/* Slide: dolgu soldan kayarak gelir, basparmak onunde ilerler. */
export function SlideCheckbox({
  className,
  size = "md",
  label = "Dark theme",
  checked,
  defaultChecked,
  onCheckedChange,
  ...props
}: CheckboxProps) {
  const { on, toggle, spring } = useCheckbox({ checked, defaultChecked, onCheckedChange })
  const labelId = React.useId()
  return (
    <span className={rowBase}>
      <button
        type="button"
        role="switch"
        aria-checked={on}
        aria-labelledby={labelId}
        data-slot="styled-checkbox"
        onClick={toggle}
        className={cn(trackBase, trackSize[size], "overflow-hidden bg-input", className)}
        {...props}
      >
        <motion.span
          aria-hidden="true"
          initial={false}
          animate={{ scaleX: on ? 1 : 0 }}
          transition={spring}
          className="absolute inset-0 origin-left rounded-full bg-primary"
        />
        <motion.span
          initial={false}
          animate={{ x: on ? travel[size] : 0 }}
          transition={spring}
          className={cn(thumbBase, thumbSize[size], "relative bg-background")}
        />
      </button>
      <span
        id={labelId}
        onClick={toggle}
        className={cn(textSize[size], "cursor-pointer select-none font-medium text-foreground")}
      >
        {label}
      </span>
    </span>
  )
}

/* Track: the track stays transparent and bordered, only the thumb carries colour. */
export function TrackCheckbox({
  className,
  size = "md",
  label = "Outlined switch",
  checked,
  defaultChecked,
  onCheckedChange,
  ...props
}: CheckboxProps) {
  const { on, toggle, spring } = useCheckbox({ checked, defaultChecked, onCheckedChange })
  const labelId = React.useId()
  return (
    <span className={rowBase}>
      <button
        type="button"
        role="switch"
        aria-checked={on}
        aria-labelledby={labelId}
        data-slot="styled-checkbox"
        onClick={toggle}
        className={cn(
          trackBase,
          trackSize[size],
          "border bg-transparent",
          on
            ? "border-primary bg-[color-mix(in_oklab,var(--color-primary)_12%,transparent)]"
            : "border-field-border",
          className
        )}
        {...props}
      >
        <motion.span
          initial={false}
          animate={{ x: on ? travel[size] - 2 : 0 }}
          transition={spring}
          className={cn(thumbBase, thumbSize[size], on ? "bg-primary" : "bg-muted-foreground")}
        />
      </button>
      <span
        id={labelId}
        onClick={toggle}
        className={cn(textSize[size], "cursor-pointer select-none font-medium text-foreground")}
      >
        {label}
      </span>
    </span>
  )
}

/* CompactSwitch: a short track with a small thumb, for dense lists. */
export function CompactSwitchCheckbox({
  className,
  size = "md",
  label = "Compact row",
  checked,
  defaultChecked,
  onCheckedChange,
  ...props
}: CheckboxProps) {
  const { on, toggle, spring } = useCheckbox({ checked, defaultChecked, onCheckedChange })
  const labelId = React.useId()
  return (
    <span className={cn(rowBase, "gap-2")}>
      <button
        type="button"
        role="switch"
        aria-checked={on}
        aria-labelledby={labelId}
        data-slot="styled-checkbox"
        onClick={toggle}
        className={cn(
          trackBase,
          trackSize[size],
          "rounded-sm p-px",
          on ? "bg-primary" : "bg-input",
          className
        )}
        {...props}
      >
        <motion.span
          initial={false}
          animate={{ x: on ? travel[size] + 2 : 0 }}
          transition={spring}
          className={cn(thumbBase, thumbSize[size], "rounded-[3px] bg-background")}
        />
      </button>
      <span
        id={labelId}
        onClick={toggle}
        className={cn(textSize[size], "cursor-pointer select-none text-foreground")}
      >
        {label}
      </span>
    </span>
  )
}

Manual installs skip the @ai2/tokens theme, so add the token CSS from the theming guide or the tone colors will be missing.

Variations

5 takes on the same idea. Each is its own export, and every one accepts a size prop (sm, md, lg, xl) aligned to the base Button scale.

Toggle

A classic switch whose track turns primary when it is on.

Airplane mode

Airplane modesm

Airplane modemd

Airplane modelg

Airplane modexl

Pill

A wide pill that spells On and Off inside the track.

Auto sync

Auto syncsm

Auto syncmd

Auto synclg

Auto syncxl

Slide

The fill slides in from the left, ahead of the thumb.

Dark theme

Dark themesm

Dark thememd

Dark themelg

Dark themexl

Track

An outlined track where only the thumb carries the colour.

Outlined switch

Outlined switchsm

Outlined switchmd

Outlined switchlg

Outlined switchxl

Compact

A squared-off, tightened switch for dense rows.

Compact row

Compact rowsm

Compact rowmd

Compact rowlg

Compact rowxl

ai2 Switch checkboxes: 5 styled variations on the token system

The ai2 Switch checkboxes are a set of 5 decorative button variations from the styled layer of the @ai2 design system, built around checkboxes shaped like on and off switches. They are free and MIT licensed, and every color comes from a semantic token, so they theme with the rest of ai2 in light and dark.

Motion runs on framer-motion: framer-motion springs the thumb across the track and slides the fill. The styled layer is opt-in, so the dependency only lands if you use it; the base components stay lean. Under reduced motion, the thumb and the fill jump to their position with no animation.

What is in the ai2 Switch checkboxes?

5 exports in one file: Toggle, Pill, Slide, Track and Compact. Each renders a native button and takes a size prop (sm, md, lg, xl) aligned to the base Button. They are separate from the base Button on purpose: the base keeps its clean variant, tone and size axes, while the styled layer carries the effects.

You own the file. Copy the one category file and you have all 5 variations, with no runtime dependency on ai2 itself.

Why use it

On-system by construction: Every color resolves to an ai2 semantic token, so the buttons follow your theme in light and dark with no extra work.
Effect without the sprawl: The decorations live in a dedicated styled file, so the base Button keeps its clean, predictable API.
Accessible and honest: Each renders a real button element, keeps a visible focus ring, and respects prefers-reduced-motion.

Features

Token-driven color: No hardcoded hex or oklch; the look recolors with your theme tokens.
framer-motion: framer-motion springs the thumb across the track and slides the fill.
Reduced-motion aware: Under prefers-reduced-motion, the thumb and the fill jump to their position with no animation.
Size aligned to the base: Every variation takes sm, md, lg and xl matching the base Button height scale, so styled and base buttons line up in a row.

Production tips

Use it for emphasis, not everywhere: Styled buttons draw the eye. Reserve them for the one action you want people to take on a screen, and use the base Button for the rest.
Keep labels as verbs: The decoration adds weight, so a clear action label keeps the button scannable.
Pick one variation per surface: The variations share a family; using two different ones in the same view competes for attention.

Works with the rest of ai2

The Switch checkboxes sit alongside the base Button and the rest of the @ai2 registry. They share the same token file, so a styled action next to a base button or a badge stays visually consistent in both modes.