Skip to content
SLICES / TECHNICAL FOLIO Nº 001FULL-STACK ASSEMBLIES — OPEN SOURCE
slices.sh

Headless / Collections

Filter records

Build collection filters on your collection's schema, query and permissions.

39 public parts · 1examples

@slices.sh/collection/headlessView as Markdown ↗

Your design. Our behavior.

Explore the tree to see what each part controls. Gates reveal the relevant state; roots outline their scope.

Behavior / inputGateGenericRenderer · not headlessScope
COMPONENT ANATOMYHover · focus · tap
ONE POSSIBLE DESIGNStatic preview

Collection.Root · Scope

Collection.RootThe root, and the parts that choose what is drawn under it: one of several views, the data a view needs, and one of two screens by width.

Data tableRecord detailCreate a recordSelect and edit recordsKanban boardHierarchical records

Installation

Choose what your component needs. Run these commands in an initialized Next.js app.

0

Before you start

The steps below run in a Next.js app with shadcn set up (it has a components.json). In an existing Next.js app, such as one from create-next-app, set shadcn up first:

npx shadcn@latest init -t next -b base -p nova

Or start fresh: the slices CLI creates the app and sets it up.

npx slices.sh install
1

Install the service registry

Adds services/index.ts, which import "@/services" loads. A provider setup writes the same file, so skip this if your app has one.

npx add services
2

Install the headless library

npm

Add the React parts to your app, then compose them with your own elements.

npm install @slices.sh/collection@^0.1.6

Import from @slices.sh/collection/headless.

3

Install the service

Connect the parts to a provider. Skip this step if this service is already configured in your app.

Provider
npx add collection.memory

Adds service configuration and API routes to your app, with the provider dependencies. For a headless composition, add import "@/services" after "use client".

The slices CLI installs the service and provisions its required resources in one command.

Provider setup notes
  • Rows are lost when the server restarts, and live updates reach only watchers in the process that wrote. Move on with npx shadcn@latest add @slices/collection.mongodb (or -neon, -supabase): services/collection/*.config.ts and rules.ts are yours and stay.

Start small

Parts bring the behavior. Use their default elements, or supply your own with render.

example.tsx
"use client"import "@/services"import { Collection } from "@slices.sh/collection/headless"import type { CollectionSchema } from "@slices.sh/collection/services/types"export function Example({ schema }: { schema: CollectionSchema }) {  return (    <Collection.Root collection={schema.collection} schema={schema}>      <Collection.Search aria-label="Search records" />      <Collection.FilterBar>        <Collection.AddFilter>Add filter</Collection.AddFilter>        <Collection.FilterPill>          <Collection.PillField />          <Collection.PillValue />          <Collection.RemoveFilter>Remove</Collection.RemoveFilter>        </Collection.FilterPill>      </Collection.FilterBar>      <Collection.ClearFilters>Clear filters</Collection.ClearFilters>      <Collection.Row render={<div />}>        <Collection.Cell render={<span />}>          <Collection.Value />        </Collection.Cell>      </Collection.Row>    </Collection.Root>  )}

Supply a registered collection schema. Parts use its fields, permissions and provider capabilities.

API reference

Every public part used by this experience is listed below. Gates render children without adding an element. Element parts accept native element props and render; function children receive the state declared in their props. Scopes provide context rather than a visual element.

Collection.FilterBarcontent

The bar that holds the filters, the searchable field picker (a popover where there is room, a sheet on a phone) and the count of filters that are on.

Capability: filters

Required scope

Collection.FilterBar needs Root.

Props

2 documented props

Collection.FilterBar props
PropTypeDefault
children

Content rendered inside this part.

ReactNode | ((state: { count: number }) => ReactNode)—
render

Replace the default element with your own while retaining the part’s behavior and accessibility.

ReactElement—

Required props are marked. A dash means no explicit default is declared in this component.

Source: @slices.sh/collection/src/headless/filter-bar.tsx

Collection.AddFilteraction · <button>

The bar that holds the filters, the searchable field picker (a popover where there is room, a sheet on a phone) and the count of filters that are on.

Capability: filters

Required scope

Collection.AddFilter needs Root.

Props

2 documented props · Native <button> attributes supported

Collection.AddFilter props
PropTypeDefault
children

Content rendered inside this part.

ReactNode | ((state: { count: number; open: boolean }) => ReactNode)—
render

Replace the default element with your own while retaining the part’s behavior and accessibility.

ReactElement—

Required props are marked. A dash means no explicit default is declared in this component.

Source: @slices.sh/collection/src/headless/add-filter.tsx

Collection.FilterPillcontent · <div>

One pill per clause, with its field, operator, value summary and removal; clearing, the empty-state remedy, declared quick presets and the live result count. ResultCount is mounted before it has a number, and its count stays null when the provider did not count.

Capability: filters

Required scope

Collection.FilterPill needs Root.

Collection.Pill needs FilterPill.

Collection.Pill needs Root.

Props

2 documented props · Native <div> attributes supported

Collection.FilterPill props
PropTypeDefault
children

Content rendered inside this part.

ReactNode | ((state: { clause: FilterClause; editing: boolean }) => ReactNode)—
render

Replace the default element with your own while retaining the part’s behavior and accessibility.

ReactElement—

Required props are marked. A dash means no explicit default is declared in this component.

Source: @slices.sh/collection/src/headless/filter-pill.tsx

Collection.PillFieldcontent · <span>

One pill per clause, with its field, operator, value summary and removal; clearing, the empty-state remedy, declared quick presets and the live result count. ResultCount is mounted before it has a number, and its count stays null when the provider did not count.

Capability: filters

Required scope

Collection.PillField needs FilterPill.

Props

2 documented props · Native <span> attributes supported

Collection.PillField props
PropTypeDefault
children

Content rendered inside this part.

ReactNode—
render

Replace the default element with your own while retaining the part’s behavior and accessibility.

ReactElement—

Required props are marked. A dash means no explicit default is declared in this component.

Source: @slices.sh/collection/src/headless/pill-field.tsx

Collection.PillOperatoraction · <button>

One pill per clause, with its field, operator, value summary and removal; clearing, the empty-state remedy, declared quick presets and the live result count. ResultCount is mounted before it has a number, and its count stays null when the provider did not count.

Capability: filters

Required scope

Collection.PillOperator needs FilterPill.

Collection.PillOperator needs Root.

Props

2 documented props · Native <button> attributes supported

Collection.PillOperator props
PropTypeDefault
children

Content rendered inside this part.

ReactNode | ((state: { operator: FilterOperator; operators: readonly FilterOperator[] }) => ReactNode)—
render

Replace the default element with your own while retaining the part’s behavior and accessibility.

ReactElement—

Required props are marked. A dash means no explicit default is declared in this component.

Source: @slices.sh/collection/src/headless/pill-operator.tsx

Collection.PillValueaction · <button>

One pill per clause, with its field, operator, value summary and removal; clearing, the empty-state remedy, declared quick presets and the live result count. ResultCount is mounted before it has a number, and its count stays null when the provider did not count.

Capability: filters

Required scope

Collection.PillValue needs FilterPill.

Collection.PillValue needs Root.

Props

2 documented props · Native <button> attributes supported

Collection.PillValue props
PropTypeDefault
children

Content rendered inside this part.

ReactNode | ((state: { summary: string }) => ReactNode)—
render

Replace the default element with your own while retaining the part’s behavior and accessibility.

ReactElement—

Required props are marked. A dash means no explicit default is declared in this component.

Source: @slices.sh/collection/src/headless/pill-value.tsx

Collection.RemoveFilteraction · <button>

One pill per clause, with its field, operator, value summary and removal; clearing, the empty-state remedy, declared quick presets and the live result count. ResultCount is mounted before it has a number, and its count stays null when the provider did not count.

Capability: filters

Required scope

Collection.RemoveFilter needs FilterPill.

Collection.RemoveFilter needs Root.

Props

2 documented props · Native <button> attributes supported

Collection.RemoveFilter props
PropTypeDefault
children

Content rendered inside this part.

ReactNode—
render

Replace the default element with your own while retaining the part’s behavior and accessibility.

ReactElement—

Required props are marked. A dash means no explicit default is declared in this component.

Source: @slices.sh/collection/src/headless/remove-filter.tsx

Collection.FilterCountcontent · <span>

The bar that holds the filters, the searchable field picker (a popover where there is room, a sheet on a phone) and the count of filters that are on.

Capability: filters

Required scope

Collection.FilterCount needs Root.

Props

2 documented props · Native <span> attributes supported

Collection.FilterCount props
PropTypeDefault
children

Content rendered inside this part.

ReactNode | ((state: { count: number }) => ReactNode)—
render

Replace the default element with your own while retaining the part’s behavior and accessibility.

ReactElement—

Required props are marked. A dash means no explicit default is declared in this component.

Source: @slices.sh/collection/src/headless/filter-count.tsx

Collection.ClearFiltersaction · <button>

One pill per clause, with its field, operator, value summary and removal; clearing, the empty-state remedy, declared quick presets and the live result count. ResultCount is mounted before it has a number, and its count stays null when the provider did not count.

Capability: filters

Required scope

Collection.ClearFilters needs Root.

Props

2 documented props · Native <button> attributes supported

Collection.ClearFilters props
PropTypeDefault
children

Content rendered inside this part.

ReactNode | ((state: { count: number }) => ReactNode)—
render

Replace the default element with your own while retaining the part’s behavior and accessibility.

ReactElement—

Required props are marked. A dash means no explicit default is declared in this component.

Source: @slices.sh/collection/src/headless/clear-filters.tsx

Collection.RemoveLastFilteraction · <button>

One pill per clause, with its field, operator, value summary and removal; clearing, the empty-state remedy, declared quick presets and the live result count. ResultCount is mounted before it has a number, and its count stays null when the provider did not count.

Capability: filters

Required scope

Collection.RemoveLastFilter needs Root.

Props

2 documented props · Native <button> attributes supported

Collection.RemoveLastFilter props
PropTypeDefault
children

Content rendered inside this part.

ReactNode—
render

Replace the default element with your own while retaining the part’s behavior and accessibility.

ReactElement—

Required props are marked. A dash means no explicit default is declared in this component.

Source: @slices.sh/collection/src/headless/remove-last-filter.tsx

Collection.QuickFilteraction · <button>

One pill per clause, with its field, operator, value summary and removal; clearing, the empty-state remedy, declared quick presets and the live result count. ResultCount is mounted before it has a number, and its count stays null when the provider did not count.

Capability: filters

Required scope

Collection.QuickFilter needs Root.

Props

2 documented props · Native <button> attributes supported

Collection.QuickFilter props
PropTypeDefault
children

Content rendered inside this part.

ReactNode | ((state: { label: string; active: boolean }) => ReactNode)—
render

Replace the default element with your own while retaining the part’s behavior and accessibility.

ReactElement—

Required props are marked. A dash means no explicit default is declared in this component.

Source: @slices.sh/collection/src/headless/quick-filter.tsx

Collection.ResultCountcontent · <span>

How many rows the query matched, said out loud. Here from the first render, before there is a number to say. An `aria-live` region only announces what arrives after it is mounted, so one that appears together with its first count announces nothing — which is the whole of what this part is for. Empty until the count is known. `null` while it is unknown rather than nought: a page still in flight has no total, and "0 results" is a different claim from "not counted yet".

Capability: filters

Required scope

Collection.ResultCount needs Root.

Props

2 documented props · Native <span> attributes supported

Collection.ResultCount props
PropTypeDefault
children

Content rendered inside this part.

ReactNode | ((state: { count: number | null }) => ReactNode)—
render

Replace the default element with your own while retaining the part’s behavior and accessibility.

ReactElement—

Required props are marked. A dash means no explicit default is declared in this component.

Source: @slices.sh/collection/src/headless/result-count.tsx

Collection.FieldMenucontent · <div>

The bar that holds the filters, the searchable field picker (a popover where there is room, a sheet on a phone) and the count of filters that are on.

Capability: filters

Required scope

Collection.FieldMenu needs Root.

Props

2 documented props · Native <div> attributes supported

Collection.FieldMenu props
PropTypeDefault
children

Content rendered inside this part.

ReactNode—
render

Replace the default element with your own while retaining the part’s behavior and accessibility.

ReactElement—

Required props are marked. A dash means no explicit default is declared in this component.

Source: @slices.sh/collection/src/headless/field-menu.tsx

Collection.FieldSearchinput · <input>

The bar that holds the filters, the searchable field picker (a popover where there is room, a sheet on a phone) and the count of filters that are on.

Capability: filters

Required scope

Collection.FieldSearch needs Root.

Props

2 documented props · Native <input> attributes supported

Collection.FieldSearch props
PropTypeDefault
children

Content rendered inside this part.

ReactNode—
render

Replace the default element with your own while retaining the part’s behavior and accessibility.

ReactElement—

Required props are marked. A dash means no explicit default is declared in this component.

Source: @slices.sh/collection/src/headless/field-search.tsx

Collection.FieldListcontent · <div>

The bar that holds the filters, the searchable field picker (a popover where there is room, a sheet on a phone) and the count of filters that are on.

Capability: filters

Required scope

Collection.FieldList needs Root.

Props

2 documented props · Native <div> attributes supported

Collection.FieldList props
PropTypeDefault
children

Content rendered inside this part.

ReactNode—
render

Replace the default element with your own while retaining the part’s behavior and accessibility.

ReactElement—

Required props are marked. A dash means no explicit default is declared in this component.

Source: @slices.sh/collection/src/headless/field-list.tsx

Collection.FieldOptionaction · <button>

The bar that holds the filters, the searchable field picker (a popover where there is room, a sheet on a phone) and the count of filters that are on.

Capability: filters

Required scope

Collection.FieldOption needs Root.

Props

2 documented props · Native <button> attributes supported

Collection.FieldOption props
PropTypeDefault
children

Content rendered inside this part.

ReactNode | ((state: { field: SchemaField; type: string; pinned: boolean }) => ReactNode)—
render

Replace the default element with your own while retaining the part’s behavior and accessibility.

ReactElement—

Required props are marked. A dash means no explicit default is declared in this component.

Source: @slices.sh/collection/src/headless/field-option.tsx

Collection.EditorPopovercontent · <div>

The typed editor of the pill being edited: multi-select options with scoped counts, a boolean choice, text operators and value, numeric bounds with a slider and buckets, and a date editor with presets, typed dates and a calendar. Option counts are null where the provider has no facet counts.

Capability: filters (OptionItem counts: facets)

Required scope

Collection.EditorPopover needs Root.

Collection.EditorPopover needs FilterPill.

Props

2 documented props · Native <div> attributes supported

Collection.EditorPopover props
PropTypeDefault
children

Content rendered inside this part.

ReactNode—
render

Replace the default element with your own while retaining the part’s behavior and accessibility.

ReactElement—

Required props are marked. A dash means no explicit default is declared in this component.

Source: @slices.sh/collection/src/headless/editor-popover.tsx

Collection.FilterEditorcontent

The typed editor of the pill being edited: multi-select options with scoped counts, a boolean choice, text operators and value, numeric bounds with a slider and buckets, and a date editor with presets, typed dates and a calendar. Option counts are null where the provider has no facet counts.

Capability: filters (OptionItem counts: facets)

Required scope

Collection.FilterEditor needs FilterPill.

Collection.FilterEditor needs Root.

Props

3 documented props

Collection.FilterEditor props
PropTypeDefault
controlRequired
"multiselect" | "toggle" | "range" | "date" | "text"—
children

Content rendered inside this part.

ReactNode—
render

Replace the default element with your own while retaining the part’s behavior and accessibility.

ReactElement—

Required props are marked. A dash means no explicit default is declared in this component.

Source: @slices.sh/collection/src/headless/filter-editor.tsx

Collection.OptionSearchinput · <input>

The typed editor of the pill being edited: multi-select options with scoped counts, a boolean choice, text operators and value, numeric bounds with a slider and buckets, and a date editor with presets, typed dates and a calendar. Option counts are null where the provider has no facet counts.

Capability: filters (OptionItem counts: facets)

Required scope

Collection.OptionSearch needs FilterPill.

Props

2 documented props · Native <input> attributes supported

Collection.OptionSearch props
PropTypeDefault
children

Content rendered inside this part.

ReactNode—
render

Replace the default element with your own while retaining the part’s behavior and accessibility.

ReactElement—

Required props are marked. A dash means no explicit default is declared in this component.

Source: @slices.sh/collection/src/headless/option-search.tsx

Collection.SelectAllOptionsaction · <button>

The typed editor of the pill being edited: multi-select options with scoped counts, a boolean choice, text operators and value, numeric bounds with a slider and buckets, and a date editor with presets, typed dates and a calendar. Option counts are null where the provider has no facet counts.

Capability: filters (OptionItem counts: facets)

Required scope

Collection.SelectAllOptions needs FilterPill.

Collection.SelectAllOptions needs Root.

Props

2 documented props · Native <button> attributes supported

Collection.SelectAllOptions props
PropTypeDefault
children

Content rendered inside this part.

ReactNode—
render

Replace the default element with your own while retaining the part’s behavior and accessibility.

ReactElement—

Required props are marked. A dash means no explicit default is declared in this component.

Source: @slices.sh/collection/src/headless/select-all-options.tsx

Collection.ClearOptionsaction · <button>

The typed editor of the pill being edited: multi-select options with scoped counts, a boolean choice, text operators and value, numeric bounds with a slider and buckets, and a date editor with presets, typed dates and a calendar. Option counts are null where the provider has no facet counts.

Capability: filters (OptionItem counts: facets)

Required scope

Collection.ClearOptions needs FilterPill.

Collection.ClearOptions needs Root.

Props

2 documented props · Native <button> attributes supported

Collection.ClearOptions props
PropTypeDefault
children

Content rendered inside this part.

ReactNode—
render

Replace the default element with your own while retaining the part’s behavior and accessibility.

ReactElement—

Required props are marked. A dash means no explicit default is declared in this component.

Source: @slices.sh/collection/src/headless/clear-options.tsx

Collection.OptionItemaction · <button>

The typed editor of the pill being edited: multi-select options with scoped counts, a boolean choice, text operators and value, numeric bounds with a slider and buckets, and a date editor with presets, typed dates and a calendar. Option counts are null where the provider has no facet counts.

Capability: filters (OptionItem counts: facets)

Required scope

Collection.OptionItem needs FilterPill.

Collection.OptionItem needs Root.

Props

2 documented props · Native <button> attributes supported

Collection.OptionItem props
PropTypeDefault
children

Content rendered inside this part.

ReactNode | ((state: { value: string; label: string; count: number | null; selected: boolean }) => ReactNode)—
render

Replace the default element with your own while retaining the part’s behavior and accessibility.

ReactElement—

Required props are marked. A dash means no explicit default is declared in this component.

Source: @slices.sh/collection/src/headless/option-item.tsx

Collection.FilterSheetcontent · <div>

The bar that holds the filters, the searchable field picker (a popover where there is room, a sheet on a phone) and the count of filters that are on.

Capability: filters

Required scope

FilterSheet needs Collection.Root.

Props

2 documented props · Native <div> attributes supported

Collection.FilterSheet props
PropTypeDefault
children

Content rendered inside this part.

ReactNode—
render

Replace the default element with your own while retaining the part’s behavior and accessibility.

ReactElement—

Required props are marked. A dash means no explicit default is declared in this component.

Source: @slices.sh/collection/src/headless/filter-sheet.tsx

Collection.TextOperatorinput · <select>

The typed editor of the pill being edited: multi-select options with scoped counts, a boolean choice, text operators and value, numeric bounds with a slider and buckets, and a date editor with presets, typed dates and a calendar. Option counts are null where the provider has no facet counts.

Capability: filters (OptionItem counts: facets)

Required scope

Collection.TextOperator needs FilterPill.

Collection.TextOperator needs Root.

Props

2 documented props · Native <select> attributes supported

Collection.TextOperator props
PropTypeDefault
children

Content rendered inside this part.

ReactNode | ((state: { operator: FilterOperator; operators: readonly FilterOperator[] }) => ReactNode)—
render

Replace the default element with your own while retaining the part’s behavior and accessibility.

ReactElement—

Required props are marked. A dash means no explicit default is declared in this component.

Source: @slices.sh/collection/src/headless/text-operator.tsx

Collection.TextValueinput · <input>

The typed editor of the pill being edited: multi-select options with scoped counts, a boolean choice, text operators and value, numeric bounds with a slider and buckets, and a date editor with presets, typed dates and a calendar. Option counts are null where the provider has no facet counts.

Capability: filters (OptionItem counts: facets)

Required scope

Collection.TextValue needs FilterPill.

Collection.TextValue needs Root.

Props

2 documented props · Native <input> attributes supported

Collection.TextValue props
PropTypeDefault
children

Content rendered inside this part.

ReactNode—
render

Replace the default element with your own while retaining the part’s behavior and accessibility.

ReactElement—

Required props are marked. A dash means no explicit default is declared in this component.

Source: @slices.sh/collection/src/headless/text-value.tsx

Collection.BooleanChoiceaction · <button>

The typed editor of the pill being edited: multi-select options with scoped counts, a boolean choice, text operators and value, numeric bounds with a slider and buckets, and a date editor with presets, typed dates and a calendar. Option counts are null where the provider has no facet counts.

Capability: filters (OptionItem counts: facets)

Required scope

Collection.BooleanChoice needs FilterPill.

Collection.BooleanChoice needs Root.

Props

2 documented props · Native <button> attributes supported

Collection.BooleanChoice props
PropTypeDefault
children

Content rendered inside this part.

ReactNode | ((state: { value: boolean; selected: boolean }) => ReactNode)—
render

Replace the default element with your own while retaining the part’s behavior and accessibility.

ReactElement—

Required props are marked. A dash means no explicit default is declared in this component.

Source: @slices.sh/collection/src/headless/boolean-choice.tsx

Collection.RangeMininput · <input>

The typed editor of the pill being edited: multi-select options with scoped counts, a boolean choice, text operators and value, numeric bounds with a slider and buckets, and a date editor with presets, typed dates and a calendar. Option counts are null where the provider has no facet counts.

Capability: filters (OptionItem counts: facets)

Required scope

Collection.Range needs FilterPill.

Collection.Range needs Root.

Props

2 documented props · Native <input> attributes supported

Collection.RangeMin props
PropTypeDefault
children

Content rendered inside this part.

ReactNode | ((state: { unit?: string; min?: number; max?: number; step?: number }) => ReactNode)—
render

Replace the default element with your own while retaining the part’s behavior and accessibility.

ReactElement—

Required props are marked. A dash means no explicit default is declared in this component.

Source: @slices.sh/collection/src/headless/range-min.tsx

Collection.RangeMaxinput · <input>

The typed editor of the pill being edited: multi-select options with scoped counts, a boolean choice, text operators and value, numeric bounds with a slider and buckets, and a date editor with presets, typed dates and a calendar. Option counts are null where the provider has no facet counts.

Capability: filters (OptionItem counts: facets)

Required scope

Collection.Range needs FilterPill.

Collection.Range needs Root.

Props

2 documented props · Native <input> attributes supported

Collection.RangeMax props
PropTypeDefault
children

Content rendered inside this part.

ReactNode | ((state: { unit?: string; min?: number; max?: number; step?: number }) => ReactNode)—
render

Replace the default element with your own while retaining the part’s behavior and accessibility.

ReactElement—

Required props are marked. A dash means no explicit default is declared in this component.

Source: @slices.sh/collection/src/headless/range-max.tsx

Collection.RangeUnitcontent · <span>

The typed editor of the pill being edited: multi-select options with scoped counts, a boolean choice, text operators and value, numeric bounds with a slider and buckets, and a date editor with presets, typed dates and a calendar. Option counts are null where the provider has no facet counts.

Capability: filters (OptionItem counts: facets)

Required scope

RangeUnit needs FilterPill.

RangeUnit needs Collection.Root.

Props

2 documented props · Native <span> attributes supported

Collection.RangeUnit props
PropTypeDefault
children

Content rendered inside this part.

ReactNode | ((state: { unit: string }) => ReactNode)—
render

Replace the default element with your own while retaining the part’s behavior and accessibility.

ReactElement—

Required props are marked. A dash means no explicit default is declared in this component.

Source: @slices.sh/collection/src/headless/range-unit.tsx

Collection.RangeSlidercontent · <div>

The typed editor of the pill being edited: multi-select options with scoped counts, a boolean choice, text operators and value, numeric bounds with a slider and buckets, and a date editor with presets, typed dates and a calendar. Option counts are null where the provider has no facet counts.

Capability: filters (OptionItem counts: facets)

Required scope

Collection.RangeSlider needs FilterPill.

Collection.RangeSlider needs Root.

Props

2 documented props · Native <div> attributes supported

Collection.RangeSlider props
PropTypeDefault
children

Content rendered inside this part.

ReactNode—
render

Replace the default element with your own while retaining the part’s behavior and accessibility.

ReactElement—

Required props are marked. A dash means no explicit default is declared in this component.

Source: @slices.sh/collection/src/headless/range-slider.tsx

Collection.RangeBucketaction · <button>

The typed editor of the pill being edited: multi-select options with scoped counts, a boolean choice, text operators and value, numeric bounds with a slider and buckets, and a date editor with presets, typed dates and a calendar. Option counts are null where the provider has no facet counts.

Capability: filters (OptionItem counts: facets)

Required scope

Collection.RangeBucket needs FilterPill.

Collection.RangeBucket needs Root.

Props

2 documented props · Native <button> attributes supported

Collection.RangeBucket props
PropTypeDefault
children

Content rendered inside this part.

ReactNode | ((state: { label: string; active: boolean }) => ReactNode)—
render

Replace the default element with your own while retaining the part’s behavior and accessibility.

ReactElement—

Required props are marked. A dash means no explicit default is declared in this component.

Source: @slices.sh/collection/src/headless/range-bucket.tsx

Collection.DatePresetaction · <button>

The typed editor of the pill being edited: multi-select options with scoped counts, a boolean choice, text operators and value, numeric bounds with a slider and buckets, and a date editor with presets, typed dates and a calendar. Option counts are null where the provider has no facet counts.

Capability: filters (OptionItem counts: facets)

Required scope

Collection.DatePreset needs FilterPill.

Collection.DatePreset needs Root.

Props

2 documented props · Native <button> attributes supported

Collection.DatePreset props
PropTypeDefault
children

Content rendered inside this part.

ReactNode | ((state: { name: string; label: string; hint: string; active: boolean }) => ReactNode)—
render

Replace the default element with your own while retaining the part’s behavior and accessibility.

ReactElement—

Required props are marked. A dash means no explicit default is declared in this component.

Source: @slices.sh/collection/src/headless/date-preset.tsx

Collection.DateCustomaction · <button>

The way to a range no preset names: pressed while the range is one, it takes you to the start date.

Capability: filters (OptionItem counts: facets)

Required scope

Collection.DateCustom needs FilterPill.

Collection.DateCustom needs Root.

Props

2 documented props · Native <button> attributes supported

Collection.DateCustom props
PropTypeDefault
children

Content rendered inside this part.

ReactNode | ((state: { active: boolean }) => ReactNode)—
render

Replace the default element with your own while retaining the part’s behavior and accessibility.

ReactElement—

Required props are marked. A dash means no explicit default is declared in this component.

Source: @slices.sh/collection/src/headless/date-custom.tsx

Collection.DateFrominput · <input>

The typed editor of the pill being edited: multi-select options with scoped counts, a boolean choice, text operators and value, numeric bounds with a slider and buckets, and a date editor with presets, typed dates and a calendar. Option counts are null where the provider has no facet counts.

Capability: filters (OptionItem counts: facets)

Props

2 documented props · Native <input> attributes supported

Collection.DateFrom props
PropTypeDefault
children

Content rendered inside this part.

ReactNode | ((state: DateBoundState) => ReactNode)—
render

Replace the default element with your own while retaining the part’s behavior and accessibility.

ReactElement—

Required props are marked. A dash means no explicit default is declared in this component.

Source: @slices.sh/collection/src/headless/date-from.tsx

Collection.DateToinput · <input>

The typed editor of the pill being edited: multi-select options with scoped counts, a boolean choice, text operators and value, numeric bounds with a slider and buckets, and a date editor with presets, typed dates and a calendar. Option counts are null where the provider has no facet counts.

Capability: filters (OptionItem counts: facets)

Props

2 documented props · Native <input> attributes supported

Collection.DateTo props
PropTypeDefault
children

Content rendered inside this part.

ReactNode | ((state: DateBoundState) => ReactNode)—
render

Replace the default element with your own while retaining the part’s behavior and accessibility.

ReactElement—

Required props are marked. A dash means no explicit default is declared in this component.

Source: @slices.sh/collection/src/headless/date-to.tsx

Collection.DateCalendarcontent · <div>

The typed editor of the pill being edited: multi-select options with scoped counts, a boolean choice, text operators and value, numeric bounds with a slider and buckets, and a date editor with presets, typed dates and a calendar. Option counts are null where the provider has no facet counts.

Capability: filters (OptionItem counts: facets)

Required scope

Collection.DateCalendar needs FilterPill.

Collection.DateCalendar needs Root.

Props

2 documented props · Native <div> attributes supported

Collection.DateCalendar props
PropTypeDefault
children

Content rendered inside this part.

ReactNode—
render

Replace the default element with your own while retaining the part’s behavior and accessibility.

ReactElement—

Required props are marked. A dash means no explicit default is declared in this component.

Source: @slices.sh/collection/src/headless/date-calendar.tsx

Collection.DateTextcontent · <span>

The days the clause covers, in words, kept up to date as the range is picked or typed.

Capability: filters (OptionItem counts: facets)

Required scope

Collection.DateText needs FilterPill.

Props

2 documented props · Native <span> attributes supported

Collection.DateText props
PropTypeDefault
children

Content rendered inside this part.

ReactNode | ((state: { summary: string }) => ReactNode)—
render

Replace the default element with your own while retaining the part’s behavior and accessibility.

ReactElement—

Required props are marked. A dash means no explicit default is declared in this component.

Source: @slices.sh/collection/src/headless/date-text.tsx

Collection.Filterinput · <select>

A native select per filterable enum field, and its options.

Capability: filters

Required scope

Collection.Filter must be inside <Collection.Root>.

Props

3 documented props · Native <select> attributes supported

Collection.Filter props
PropTypeDefault
field
string—
children

Content rendered inside this part.

ReactNode | ((state: { field: SchemaField }) => ReactNode)—
render

Replace the default element with your own while retaining the part’s behavior and accessibility.

ReactElement—

Required props are marked. A dash means no explicit default is declared in this component.

Source: @slices.sh/collection/src/headless/enum-filter.tsx

Collection.Optioncontent · <option>

A native select per filterable enum field, and its options.

Capability: filters

Required scope

Collection.Option must be inside <Collection.Filter> or <Collection.Create.Select>.

Props

2 documented props · Native <option> attributes supported

Collection.Option props
PropTypeDefault
children

Content rendered inside this part.

ReactNode | ((state: { option: string }) => ReactNode)—
render

Replace the default element with your own while retaining the part’s behavior and accessibility.

ReactElement—

Required props are marked. A dash means no explicit default is declared in this component.

Source: @slices.sh/collection/src/headless/option.tsx

Collection.Rootscope

The root, and the parts that choose what is drawn under it: one of several views, the data a view needs, and one of two screens by width.

Props

25 documented props

Collection.Root props
PropTypeDefault
treeParent
string—
view
"table" | "list" | "grid" | "board" | "tree" | "detail"—
views
readonly CollectionViewValue[]—
cardSize
"small" | "medium" | "large"—
savedViews
readonly SavedView[]—
onSaveView
(view: SavedView) => void | Promise<void>—
groupBy
string | null—
onGroupByChange
(field: string | null) => void—
enabled

Left out or true: required, and a missing service throws. "optional": renders its children with no rows, and every part inside renders nothing. false: off. A capability name ("live") requires the service and that capability.

Enabled—
config

The collection config, "default" when left out. collection names one inside it.

string—
groupSumFields
readonly string[]—
cardSizing
booleanfalse
lanes
booleanfalse
collectionRequired
string—
schemaRequired
CollectionSchema—
density
"compact" | "comfortable" | "spacious"—
onDensityChange
(density: DensityValue) => void—
palette
booleanfalse
pageSize
number10
infinite
booleanfalse
live
booleanfalse
urlState

Whether the search, the sort and the filter travel in the address bar.

booleantrue
search

false when nothing on screen searches: no search applies, from the address or a saved view.

booleantrue
filters

false when nothing on screen filters: no filter applies, from the address or a saved view.

booleantrue
children

Content rendered inside this part.

ReactNode—

Required props are marked. A dash means no explicit default is declared in this component.

Source: @slices.sh/collection/src/headless/root.tsx

When something is missing

No service configuration
Install the collection setup below and import "@/services". Required service roots report missing setup; gates do not replace that configuration.
Missing capability or parent scope
Follow each part’s context requirements and the example composition. Capability-aware controls hide when the provider cannot perform their action.
Read the setup guide →