Switch

Toggle switches for binary choices with smooth animations and clear visual feedback.

Switch Variants

Basic Switch

Switch with Label

Receive weekly property updates

Switch Sizes

Small
Default
Large

Switch States

Off State
On State
Disabled Off
Disabled On

Real Estate Use Cases

Property Settings

Display on homepage carousel
Enable 360° property viewing
Allow offers below asking price

User Preferences

Implementation Guide

HTML Structure

<!-- Basic Switch -->
<label class="lyd-switch">
    <input type="checkbox">
    <span class="lyd-switch-slider"></span>
</label>

<!-- Switch with Label -->
<div class="lyd-switch-group">
    <label class="lyd-switch">
        <input type="checkbox" id="switch-id">
        <span class="lyd-switch-slider"></span>
    </label>
    <label for="switch-id" class="lyd-switch-label">Label Text</label>
</div>

<!-- Switch with Description -->
<div class="lyd-switch-group">
    <label class="lyd-switch">
        <input type="checkbox">
        <span class="lyd-switch-slider"></span>
    </label>
    <div>
        <label class="lyd-switch-label">Main Label</label>
        <div class="lyd-switch-description">Helper text</div>
    </div>
</div>

React/Next.js Component

// components/Switch.tsx
import { InputHTMLAttributes, forwardRef } from 'react';

interface SwitchProps extends Omit, 'type' | 'size'> {
  label?: string;
  description?: string;
  size?: 'small' | 'medium' | 'large';
}

export const Switch = forwardRef(({
  label,
  description,
  size = 'medium',
  className = '',
  id,
  ...props
}, ref) => {
  const switchId = id || `switch-${Math.random().toString(36).substr(2, 9)}`;
  
  return (
    <div className="lyd-switch-group">
      <label className={`lyd-switch ${size} ${className}`}>
        <input
          ref={ref}
          type="checkbox"
          id={switchId}
          {...props}
        />
        <span className="lyd-switch-slider" />
      </label>
      {(label || description) && (
        <div>
          {label && (
            <label htmlFor={switchId} className="lyd-switch-label">
              {label}
            </label>
          )}
          {description && (
            <div className="lyd-switch-description">
              {description}
            </div>
          )}
        </div>
      )}
    </div>
  );
});

// Usage
<Switch 
  label="Enable Notifications"
  description="Receive alerts for new properties"
  checked={isEnabled}
  onChange={(e) => setIsEnabled(e.target.checked)}
/>

API Reference

Class Description
.lyd-switch Container for switch component
.lyd-switch-slider Visual switch element
.lyd-switch-group Container for switch with label
.lyd-switch-label Label text for switch
.lyd-switch-description Helper text below label
.small Small size variant
.large Large size variant
.with-icons Switch with on/off icons

Accessibility & Best Practices

Accessibility Features

  • Use native checkbox input for accessibility
  • Associate labels with switches using for/id
  • Keyboard navigable (Tab, Space)
  • ARIA states handled by native checkbox
  • Visible focus states

Best Practices

  • Use for binary on/off choices only
  • Provide clear labels
  • Default to "off" for optional features
  • Group related switches
  • Consider using checkboxes for multiple selections
  • Save state immediately or provide save button