TimeRange

API reference and demos for TimeRange.

Source

Import

import { TimeRange } from "@flanksource/clicky-ui/components";

Demos

Default · Open in Storybook

Playground · Open in Storybook

The props table documents the component-specific surface. Standard DOM attributes inherited from React, such as className, event handlers, and accessibility attributes, may also be accepted when the component’s prop type extends a native element.

Props

Prop	Type	Default	Description
align	enum	right	Aligns the popup to the trigger's left or right edge.
chipRows	TimeRangeChipRow[]	—	Explicit chip rows; overrides the built-in preset group layout.
className	string	—	Classes applied to the root wrapper.
compact	boolean	false	Icon-only trigger for narrow bars: the current range moves into the accessible name and the tooltip instead of visible text.
disabled	boolean	false	Disables opening and applying changes.
emptyLabel	string	—	Trigger text when neither boundary is set.
from	string	—	Current start value. Relative values such as `now-1h` are supported.
fromPlaceholder	string	—	Placeholder for the start input.
kind	enum	time	Controls whether the inputs accept date-only or date-time values.
label	string	Time range	Label shown in the trigger before the selected range summary.
onApply*	(…) => void	—	Called when the user applies a typed value or preset.
panelClassName	string	—	Classes applied to the popup panel.
presets	(TimeRangePresetGroup | TimeRangePreset)[]	—	Presets or preset groups to show in the popup.
timeEnabled	boolean	false	Enables time fields for date-time ranges.
timeZone	string	—	Selected timezone shown in the popup.
timeZones	string[]	—	Available timezone options.
to	string	—	Current end value. Relative values such as `now` are supported.
toPlaceholder	string	—	Placeholder for the end input.
triggerClassName	string	—	Classes applied to the trigger button.