Filter Dropdown

A flexible dropdown filter component with support for multi-select and single-select modes.

"use client";

import * as React from "react";
import { FilterDropdown } from "@/registry/sase/filter-dropdown";

const difficultyOptions = [
  { value: "BEGINNER", label: "Beginner", color: "bg-cyan-500" },
  { value: "INTERMEDIATE", label: "Intermediate", color: "bg-violet-500" },
  { value: "ADVANCED", label: "Advanced", color: "bg-fuchsia-500" },
  { value: "EXPERT", label: "Expert", color: "bg-pink-500" },
];

const pointsOptions = [
  { value: "POINTS_DESC", label: "High to Low", color: "bg-amber-500" },
  { value: "POINTS_ASC", label: "Low to High", color: "bg-amber-400" },
];

const durationOptions = [
  { value: "DURATION_DESC", label: "Long to Short", color: "bg-blue-500" },
  { value: "DURATION_ASC", label: "Short to Long", color: "bg-blue-400" },
];

export function FilterDropdownDemo() {
  const [selectedDifficulties, setSelectedDifficulties] = React.useState<
    string[]
  >([]);
  const [pointsSort, setPointsSort] = React.useState("");
  const [durationSort, setDurationSort] = React.useState("");

  return (
    <div className="flex w-full flex-col items-center justify-center gap-2 sm:flex-row">
      <div className="w-full sm:w-[180px]">
        <FilterDropdown
          label="Difficulty"
          options={difficultyOptions}
          selectedValues={selectedDifficulties}
          onSelectionChange={setSelectedDifficulties}
          mode="multi"
        />
      </div>
      <div className="w-full sm:w-[160px]">
        <FilterDropdown
          label="Points"
          options={pointsOptions}
          selectedValue={pointsSort}
          onValueChange={setPointsSort}
          mode="single"
        />
      </div>
      <div className="w-full sm:w-[160px]">
        <FilterDropdown
          label="Duration"
          options={durationOptions}
          selectedValue={durationSort}
          onValueChange={setDurationSort}
          mode="single"
        />
      </div>
    </div>
  );
}

Installation


pnpm dlx shadcn@latest add https://sase-ui.vercel.app/r/filter-dropdown.json

Usage

import { FilterDropdown } from "@/components/ui/filter-dropdown";

const [selectedValues, setSelectedValues] = React.useState<string[]>([])
 
const options = [
  { value: "option1", label: "Option 1", color: "bg-blue-500" },
  { value: "option2", label: "Option 2", color: "bg-green-500" },
]
 
<FilterDropdown
  label="Filter"
  options={options}
  selectedValues={selectedValues}
  onSelectionChange={setSelectedValues}
  mode="multi"
/>

Examples

Multi-Select

"use client";

import * as React from "react";
import { FilterDropdown } from "@/registry/sase/filter-dropdown";

const statusOptions = [
  { value: "not-started", label: "Not Started", color: "bg-gray-500" },
  { value: "in-progress", label: "In Progress", color: "bg-amber-500" },
  { value: "in-review", label: "In Review", color: "bg-purple-500" },
  { value: "done", label: "Done", color: "bg-emerald-500" },
];

export function FilterDropdownStatus() {
  const [selectedStatus, setSelectedStatus] = React.useState<string[]>([]);

  return (
    <div className="flex w-full justify-center">
      <div className="w-full sm:w-[180px]">
        <FilterDropdown
          label="Status"
          options={statusOptions}
          selectedValues={selectedStatus}
          onSelectionChange={setSelectedStatus}
          mode="multi"
        />
      </div>
    </div>
  );
}

Single-Select

"use client";

import * as React from "react";
import { FilterDropdown } from "@/registry/sase/filter-dropdown";

const priorityOptions = [
  { value: "low", label: "Low", color: "bg-slate-400" },
  { value: "medium", label: "Medium", color: "bg-blue-500" },
  { value: "high", label: "High", color: "bg-orange-500" },
  { value: "urgent", label: "Urgent", color: "bg-red-500" },
];

export function FilterDropdownSingle() {
  const [priority, setPriority] = React.useState("medium");

  return (
    <div className="flex w-full justify-center">
      <div className="w-full sm:w-[160px]">
        <FilterDropdown
          label="Priority"
          options={priorityOptions}
          selectedValue={priority}
          onValueChange={setPriority}
          mode="single"
        />
      </div>
    </div>
  );
}

API Reference

FilterDropdown

Prop	Type	Default	Description
`label`	`string`	-	The label displayed on the trigger button
`options`	`FilterOption[]`	-	Array of filter options with `value`, `label`, and optional `color`
`mode`	`"multi" \| "single"`	`"multi"`	Whether to use checkboxes (multi-select) or radio (single-select)
`selectedValues`	`string[]`	`[]`	Array of selected values (for multi-select mode)
`selectedValue`	`string`	-	Single selected value (for single-select mode)
`onSelectionChange`	`(values: string[]) => void`	-	Callback when selection changes in multi-select mode
`onValueChange`	`(value: string) => void`	-	Callback when selection changes in single-select mode
`showColorDots`	`boolean`	`true`	Whether to show color indicators
`align`	`"start" \| "center" \| "end"`	`"start"`	Dropdown content alignment
`className`	`string`	-	Custom class name for the trigger button

FilterOption

Property	Type	Description
`value`	`string`	The unique value for the option
`label`	`string`	The display text for the option
`color`	`string`	Optional Tailwind color class for the color dot (e.g., `"bg-blue-500"`)

Field Footer Link

On This Page

Installation Usage Examples Multi-Select Single-Select API Reference FilterDropdown FilterOption