Lucent UI
← FilterMultiSelectFilterDateRangeStepper →
✦ LLM-ready

FilterDateRange

molecule

Date range filter button that opens a calendar popover. Shows the selected range on the trigger label. Outline variant auto-switches to secondary when a range is selected.

"Add a FilterDateRange from lucent-ui for a date filter in a toolbar. It opens a calendar popover and shows the selected range on the button."

Usage

React / JSX
import { FilterDateRange } from 'lucent-ui'

<FilterDateRange label="FilterDateRange" variant="secondary" size="md" />

Installation

pnpm add lucent-ui

API Reference

FilterDateRange props — * required

PropTypeDefaultDescription
labelstring—Label shown on the trigger when no range is selected.
valueDateRange—Controlled range with { start: Date; end: Date }.
defaultValueDateRange—Initial range for uncontrolled usage.
onChange(range: DateRange) => void—Called with the selected range.
variant"secondary" | "outline""secondary"Trigger style. Outline auto-switches to secondary when a range is selected.
size"sm" | "md" | "lg""md"Trigger and calendar size.
minDate—Minimum selectable date.
maxDate—Maximum selectable date.
disabledbooleanfalseDisables the trigger.
styleReact.CSSProperties—Inline styles for the wrapper.