Minimal Searchable Checkbox List

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Minimal Searchable Checkbox List</title>
</head>
<body>

  <div class="checkbox-group">
    <input 
      type="text" 
      class="search-input" 
      placeholder="Search options..." 
      oninput="filterList(this.value)"
    >

    <div class="checkbox-list" id="checkboxList">
      <label class="checkbox-item"><input type="checkbox" name="options" value="analytics"> Analytics & Reporting</label>
      <label class="checkbox-item"><input type="checkbox" name="options" value="auth"> Authentication</label>
      <label class="checkbox-item"><input type="checkbox" name="options" value="billing"> Billing & Invoicing</label>
      <label class="checkbox-item"><input type="checkbox" name="options" value="cms"> Content Management</label>
      <label class="checkbox-item"><input type="checkbox" name="options" value="database"> Database Integration</label>
      <label class="checkbox-item"><input type="checkbox" name="options" value="notifications"> Email Notifications</label>
      <label class="checkbox-item"><input type="checkbox" name="options" value="storage"> File Storage</label>
      <label class="checkbox-item"><input type="checkbox" name="options" value="localization"> Localization & i18n</label>
      <label class="checkbox-item"><input type="checkbox" name="options" value="search"> Search Optimization</label>
      <label class="checkbox-item"><input type="checkbox" name="options" value="webhooks"> Webhooks & APIs</label>
    </div>
  </div>

</body>
</html>

CSS

body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      padding: 40px 20px;
      display: flex;
      justify-content: center;
      background-color: #fafafa;
      color: #333;
    }

    .checkbox-group {
      width: 100%;
      max-width: 320px;
    }

    .search-input {
      width: 100%;
      padding: 8px 12px;
      box-sizing: border-box;
      border: 1px solid #ccc;
      border-radius: 6px;
      margin-bottom: 8px;
      font-size: 14px;
      outline: none;
    }

    .search-input:focus {
      border-color: #0066cc;
    }

    .checkbox-list {
      max-height: 200px;
      overflow-y: auto;
      border: 1px solid #ccc;
      border-radius: 6px;
      padding: 6px;
      background: #fff;
    }

    .checkbox-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 6px 8px;
      border-radius: 4px;
      cursor: pointer;
      user-select: none;
      font-size: 14px;
    }

    .checkbox-item:hover {
      background-color: #f3f4f6;
    }

    .checkbox-item input {
      cursor: pointer;
    }

JavaScript

function filterList(query) {
      const term = query.toLowerCase();
      document.querySelectorAll('#checkboxList .checkbox-item').forEach(item => {
        item.style.display = item.textContent.toLowerCase().includes(term) ? 'flex' : 'none';
      });
    }