Implementation:TobikoData Sqlmesh Toggle

Knowledge Sources	TobikoData_Sqlmesh
Domains	Web_UI, Components, Forms
Last Updated	2026-02-07 20:00 GMT

Overview

A styled toggle switch component with size variants, optional label, and semantic theming.

Description

Toggle is a React component built on Headless UI's Switch that provides an animated on/off control with a sliding indicator. The component implements three size variants (sm, md, lg) with corresponding dimensions: small (14px height, 24px width), medium (20px height, 40px width), and large (28px height, 56px width). The toggle uses secondary color theming with the track background changing from bg-secondary-20 when off to bg-secondary-500 when on, while the sliding indicator remains white. The component includes smooth transition animations (200ms duration with ease-in-out timing) for both the background color and the indicator position. It supports accessibility features including screen reader text (sr-only), focus rings with customizable opacity, and proper disabled state handling that forces the toggle to off and applies opacity styling. An optional label can be displayed next to the toggle with light font weight and neutral colors.

Usage

Use this component for binary on/off settings in forms and configuration interfaces. The three size options allow matching the toggle to different UI contexts - small for dense layouts, medium for standard forms, and large for prominent settings. Always provide the a11yTitle prop for screen reader users.

Code Reference

Source Location

• Repository: TobikoData_Sqlmesh
• File: web/client/src/library/components/toggle/Toggle.tsx

Signature

export default function Toggle({
  label,
  enabled,
  setEnabled,
  a11yTitle,
  size = EnumSize.md,
  disabled = false,
  className,
}: {
  enabled: boolean
  setEnabled: (enabled: boolean) => void
  size?: Size
  label?: string
  a11yTitle?: string
  disabled?: boolean
  className?: string
}): JSX.Element

Import

import Toggle from '@components/toggle/Toggle'

I/O Contract

Inputs

Name	Type	Required	Description
enabled	boolean	Yes	Current toggle state (true = on, false = off)
setEnabled	(enabled: boolean) => void	Yes	Callback function to update toggle state
size	Size	No	Size variant: sm, md, or lg (defaults to md)
label	string	No	Optional label text displayed next to the toggle
a11yTitle	string	No	Screen reader text describing the toggle purpose
disabled	boolean	No	Whether the toggle is disabled (defaults to false)
className	string	No	Additional CSS classes to apply

Outputs

Name	Type	Description
JSX.Element	React component	Animated toggle switch with optional label

Usage Examples

import { useState } from 'react'
import Toggle from '@components/toggle/Toggle'
import { EnumSize } from '~/types/enum'

// Basic toggle
function SettingsPanel() {
  const [darkMode, setDarkMode] = useState(false)

  return (
    <Toggle
      enabled={darkMode}
      setEnabled={setDarkMode}
      label="Dark Mode"
      a11yTitle="Toggle dark mode"
      size={EnumSize.md}
    />
  )
}

// Large toggle without label
function FeatureSwitch() {
  const [advanced, setAdvanced] = useState(false)

  return (
    <div>
      <h3>Advanced Mode</h3>
      <Toggle
        enabled={advanced}
        setEnabled={setAdvanced}
        a11yTitle="Enable advanced mode"
        size={EnumSize.lg}
      />
    </div>
  )
}

// Disabled toggle
function LockedSetting() {
  const [value, setValue] = useState(true)

  return (
    <Toggle
      enabled={value}
      setEnabled={setValue}
      label="Premium Feature (Locked)"
      a11yTitle="Premium feature toggle"
      disabled={true}
      size={EnumSize.sm}
    />
  )
}

Related Pages

• Environment:TobikoData_Sqlmesh_Web_UI_Stack