Filter

'use client';

import { Filter } from '@/ui/forms/Filter';
import { Icon } from '@clubmed/trident-icons';

export function FilterDemo() {
  return (
    <Filter checked={false}>
      <div className="flex items-center gap-x-8">
        <Icon name="Filters" />
        Category Filter
      </div>
    </Filter>
  );
}

Installation

npmpnpmyarnbun
npx shadcn@latest add https://develop.trident-ui.pro.clubmed/r/filter.json
Copy

Usage

Copy'use client';
 
import { useState } from 'react';
import { Filter } from '@/docs/lib/ui/forms/filter';
 
export function Component() {
  const [checked, setChecked] = useState(false);
 
  return (
    <Filter
      name="category"
      checked={checked}
      onChange={(event) => setChecked(event.target.checked)}
    >
      Category Filter
    </Filter>
  );
}

API Reference

Filter

Filter also supports standard HTML input attributes (checked, defaultChecked, name, value, disabled, etc.).

Notes

• Checkbox-based: Filter is built on a native checkbox input, providing proper semantics and keyboard accessibility out of the box
• Check icon: When checked, displays a check icon (CheckDefault) to indicate the selected state
• Dropdown indicator: Set hasDropdown={true} to show an arrow icon, useful when the filter opens a dropdown menu
• Native events: onChange uses the native checkbox event signature
• Composability: Can be used directly inside Checkboxes for grouped selection behavior
• Disabled state: When disabled, prevents clicks and keyboard interactions
• Data attributes: Includes data-name="Filter" for styling and data-testid for testing
• Keyboard support: Fully keyboard accessible with configurable tabIndex