FilterSortRow

Sort select paired with a ghost reset button for filter panels.

Usage

svelte

<script lang="ts">
  import { FilterSortRow } from "@milandekruijf/ui/svelte";

  let sort = $state("newest");
</script>

<FilterSortRow
  sortTitle="Sort by"
  bind:sortValue={sort}
  sortOptions={[
    { value: "newest", label: "Newest first" },
    { value: "oldest", label: "Oldest first" },
  ]}
  showReset={sort !== "newest"}
  resetLabel="Reset filters"
  onReset={() => (sort = "newest")}
/>

Examples

Sort with reset

Sort by

Adapter-static notes
Prerendered sitemap

<script lang="ts">
  import { css } from "@milandekruijf/pandacss/css";
  import { FilterSortRow } from "@milandekruijf/ui/svelte";

  const items = ["Adapter-static notes", "Prerendered sitemap"];

  let sort = $state("newest");
  const visible = $derived(sort === "newest" ? items : [...items].reverse());
</script>

<div class={css({ display: "flex", flexDirection: "column", gap: 4, minW: 0 })}>
  <FilterSortRow
    sortTitle="Sort by"
    bind:sortValue={sort}
    sortOptions={[
      { value: "newest", label: "Newest first" },
      { value: "oldest", label: "Oldest first" },
    ]}
    showReset={sort !== "newest"}
    resetLabel="Reset filters"
    onReset={() => (sort = "newest")}
  />
  <ul class={css({ m: 0, p: 0, listStyle: "none" })}>
    {#each visible as item (item)}
      <li class={css({ color: "slate.12", py: 1 })}>{item}</li>
    {/each}
  </ul>
</div>

Props

Prop	Type	Default	Description
sortTitle	`string`	—	Heading above the select, e.g. “Sort by”.
sortValue	`string`	—	Bindable sort value (`bind:sortValue`).
sortOptions	`SelectOption[]`	—	Options passed straight to `Select`, each `{ value, label }`.
showReset	`boolean`	—	Whether the ghost reset button is visible.
resetLabel	`string`	—	Reset button label.
onReset	`() => void`	—	Clears every filter back to its default.
class?	`string`	—	Extra classes merged on the row.

Typically composed inside `FilterPanel`, below the chip groups.