Checkbox

Professional checkbox components for forms and settings with smooth animations and multiple states.

Checkbox Variants

Standard Checkbox

Basic checkbox with label

Checkbox with Description

Checkbox with additional helper text

Checkbox States

Different checkbox states

Checkbox Sizes

Different size variants

Real Estate Use Cases

Property Features

Implementation Guide

HTML Structure

<!-- Standard Checkbox -->
<label class="lyd-checkbox-group">
    <input type="checkbox" class="lyd-checkbox-input">
    <span class="lyd-checkbox">
        <svg class="lyd-checkbox-checkmark" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3">
            <path d="M20 6L9 17l-5-5" stroke-linecap="round" stroke-linejoin="round" />
        </svg>
    </span>
    <span class="lyd-checkbox-label">Checkbox Label</span>
</label>

<!-- Checkbox with Description -->
<label class="lyd-checkbox-group">
    <input type="checkbox" class="lyd-checkbox-input">
    <span class="lyd-checkbox">
        <svg class="lyd-checkbox-checkmark">...</svg>
    </span>
    <div>
        <div class="lyd-checkbox-label">Main Label</div>
        <div class="lyd-checkbox-description">Helper text</div>
    </div>
</label>

JavaScript for Indeterminate State

// Set indeterminate state
const checkbox = document.getElementById('indeterminate');
checkbox.indeterminate = true;

// Handle checkbox group (parent-children relationship)
function updateParentCheckbox(parentId, childrenSelector) {
    const parent = document.getElementById(parentId);
    const children = document.querySelectorAll(childrenSelector);
    
    const checkedCount = Array.from(children).filter(c => c.checked).length;
    
    if (checkedCount === 0) {
        parent.checked = false;
        parent.indeterminate = false;
    } else if (checkedCount === children.length) {
        parent.checked = true;
        parent.indeterminate = false;
    } else {
        parent.checked = false;
        parent.indeterminate = true;
    }
}

React/Next.js Component

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

interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
  label?: string;
  description?: string;
  size?: 'small' | 'medium' | 'large';
  error?: boolean;
}

export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(({
  label,
  description,
  size = 'medium',
  error = false,
  className = '',
  ...props
}, ref) => {
  return (
    <label className={`lyd-checkbox-group ${size} ${error ? 'error' : ''} ${className}`}>
      <input
        ref={ref}
        type="checkbox"
        className="lyd-checkbox-input"
        {...props}
      />
      <span className="lyd-checkbox">
        <svg className="lyd-checkbox-checkmark" viewBox="0 0 24 24">
          <path d="M20 6L9 17l-5-5" />
        </svg>
        {props.indeterminate && <span className="lyd-checkbox-indeterminate" />}
      </span>
      {(label || description) && (
        <div>
          {label && <div className="lyd-checkbox-label">{label}</div>}
          {description && <div className="lyd-checkbox-description">{description}</div>}
        </div>
      )}
    </label>
  );
});

API Reference

Class Description
.lyd-checkbox-group Container for checkbox and label
.lyd-checkbox-input Hidden native checkbox input
.lyd-checkbox Custom checkbox visual
.lyd-checkbox-checkmark Checkmark icon
.lyd-checkbox-label Checkbox label text
.lyd-checkbox-description Helper text below label
.small Small size variant
.large Large size variant
.error Error state styling
.switch Switch-style checkbox

Accessibility & Best Practices

Keyboard Navigation

  • Space to toggle checkbox
  • Tab to navigate between checkboxes
  • Enter in forms to submit

Screen Reader Support

  • Use semantic label elements
  • Provide clear, descriptive labels
  • Announce state changes
  • Group related checkboxes with fieldset

Best Practices

  • Always provide a label
  • Make click target include label
  • Use clear, actionable text
  • Group related options
  • Provide visual feedback on interaction