FilterCheckbox

Reusable checkbox component for filter options with optional icon, count display, and disabled state. Used by SearchSidebar for content types, subjects, technology (with icons), and persons.

Props

Prop	Type	Required	Default	Description
`option`	`{ value: string; label: string; count: number; iconSrc?: string }`	Yes	-	Filter option data; iconSrc shows icon before label (e.g. technology icons)
`isChecked`	`boolean`	Yes	-	Whether the checkbox is checked
`isDisabled`	`boolean`	Yes	-	Whether the checkbox is disabled (typically when count is 0)
`onChange`	`(value: string, checked: boolean) => void`	Yes	-	Callback when checkbox state changes
`ariaLabel`	`string`	Yes	-	Accessibility label for the checkbox

Usage

1import FilterCheckbox from '@/components/molecules/FilterCheckbox';
2
3<FilterCheckbox
4  option={{ value: 'blogpost', label: 'Blogs', count: 15 }}
5  isChecked={selectedTypes.includes('blogpost')}
6  isDisabled={false}
7  onChange={(value, checked) => handleChange(value, checked)}
8  ariaLabel="Filter by Blogs"
9/>
10
11// With icon (e.g. technology filter)
12<FilterCheckbox
13  option={{ value: 'react', label: 'react', count: 8, iconSrc: '/technologies/react.svg' }}
14  isChecked={selectedTechnology.includes('react')}
15  isDisabled={false}
16  onChange={handleTechnologyChange}
17  ariaLabel="Filter by react"
18/>

import FilterCheckbox from '@/components/molecules/FilterCheckbox';

<FilterCheckbox
  option={{ value: 'blogpost', label: 'Blogs', count: 15 }}
  isChecked={selectedTypes.includes('blogpost')}
  isDisabled={false}
  onChange={(value, checked) => handleChange(value, checked)}
  ariaLabel="Filter by Blogs"
/>

// With icon (e.g. technology filter)
<FilterCheckbox
  option={{ value: 'react', label: 'react', count: 8, iconSrc: '/technologies/react.svg' }}
  isChecked={selectedTechnology.includes('react')}
  isDisabled={false}
  onChange={handleTechnologyChange}
  ariaLabel="Filter by react"
/>

Features

Optional icon: When option.iconSrc present, renders Image before label (16x16)
Disabled state: Greyed out when disabled (opacity, cursor)
Count display: Shows result count badge
Accessibility: ARIA labels and disabled attributes
Hover effects: Text color changes when enabled

Notes

Used by SearchSidebar; technology options include iconSrc from getTechnologyIconSrc()
Prevents onChange when disabled