Skip to content
All 6 kits from $99 · Everything Bundle $149

Filters

Data and metricsMIT
View in Storybook

Composable filter builder with text, select, and number filter types.

bun add @otfdashkit/ui

Preview

Filters

Code

import React from 'react'
import { Filters } from '@otfdashkit/ui'
import type { FilterDef, FilterValue } from '@otfdashkit/ui'

const filterDefs: FilterDef[] = [
  { key: 'status', label: 'Status', type: 'select', options: [{ label: 'Active', value: 'active' }, { label: 'Inactive', value: 'inactive' }] },
  { key: 'name', label: 'Name', type: 'text' },
  { key: 'amount', label: 'Amount', type: 'number' },
]

function FiltersDemo() {
  const [filters, setFilters] = React.useState<FilterValue[]>([{ key: 'status', operator: 'equals', value: 'active' }])
  return <Filters filters={filterDefs} value={filters} onChange={setFilters} />
}

export function Example() {
  return (
    <FiltersDemo />
  )
}

Free with the SDK. This block ships in @otfdashkit/ui under the MIT license.

Kit for this component

Marketplace Kit$99

Add search and filter controls to a list of results.

See the kit

Props

Props declared in the Filters source. Inherited HTML attributes are not listed.

PropTypeDefaultDescription
filtersrequiredFilterDef[]
onChangerequired(v: FilterValue[]) => void
valuerequiredFilterValue[]
classNamestring