Skip to main content

​
Filter

Filter component router supporting three types: checkbox (multi-select), ratio (range slider), and date (date picker). Each type has its own variant implementation with specific props.

​
Import

import { Filter } from '@adoptaunabuelo/react-components';

​
Filter Types

The Filter component supports three types: checkbox, ratio, and date. Props vary based on type.

​
Checkbox Filter

Multi-select or single-select filter with search functionality.

​
Props

​
type
'single' | 'multiple'
required
Filter type for checkbox variant
​
id
string
required
Unique identifier for the filter
​
placeholder
string
required
Placeholder text for the filter button
​
options
Array<CheckboxOption>
required
Array of checkbox options
​
selectedOptions
Array<CheckboxOption>
Currently selected options
​
onChange
(result: Array<CheckboxOption>) => void
Callback when selection changes
​
shape
'circle' | 'square'
Shape of the checkbox boxes
​
disabled
boolean
Disables the filter
​
position
'bottom-right' | 'bottom-left'
Position of dropdown menu
​
style
React.CSSProperties
Custom styles for the container

​
CheckboxOption

​
id
string
required
Unique identifier
​
label
string
required
Display label
​
sublabel
string
Secondary label text

​
Usage

<Filter
  type="multiple"
  id="category-filter"
  placeholder="Categories"
  options={[
    { id: "1", label: "Option 1" },
    { id: "2", label: "Option 2" }
  ]}
  onChange={(selected) => applyFilters(selected)}
/>

​
Date Filter

Date range picker filter.

​
Props

​
type
'date'
required
Filter type for date variant
​
id
string
required
Unique identifier for the filter
​
placeholder
string
required
Placeholder text for the filter button
​
selectedOptions
{ startDate: moment.Moment | null; endDate: moment.Moment | null }
Currently selected date range
​
onChange
(result: { startDate: moment.Moment | null; endDate: moment.Moment | null }) => void
Callback when date range changes
​
disabled
boolean
Disables the filter
​
position
'bottom-right' | 'bottom-left'
Position of dropdown menu
​
style
React.CSSProperties
Custom styles for the container

​
Usage

<Filter
  type="date"
  id="date-filter"
  placeholder="Select dates"
  selectedOptions={{ startDate: moment(), endDate: moment().add(7, 'days') }}
  onChange={(range) => setDateRange(range)}
/>

​
Ratio Filter

Range slider filter for numeric values.

​
Props

​
type
'ratio'
required
Filter type for ratio variant
​
id
string
required
Unique identifier for the filter
​
placeholder
string
required
Placeholder text for the filter button
​
min
number
required
Minimum value for the range
​
max
number
required
Maximum value for the range
​
unit
string
Unit label (e.g., “km”, ”$”)
​
selectedOptions
number
Currently selected value
​
onChange
(result: number | undefined) => void
Callback when value changes
​
disabled
boolean
Disables the filter
​
position
'bottom-right' | 'bottom-left'
Position of dropdown menu
​
style
React.CSSProperties
Custom styles for the container

​
Usage

<Filter
  type="ratio"
  id="distance-filter"
  placeholder="Distance"
  min={0}
  max={100}
  unit="km"
  selectedOptions={50}
  onChange={(value) => setDistance(value)}
/>

​
Common Features

  • All filter types show as rounded pill buttons
  • Selected filters display with primary border and show current value
  • Click X icon to clear filter
  • Opens modal on mobile, dropdown on desktop
  • Includes “Borrar” (Clear) and “Aplicar” (Apply) buttons
  • Auto-closes when clicking outside
  • Checkbox filter includes search functionality

Build docs developers (and LLMs) love

Get started for freeTalk to us