Picker

A generic input + popover container component for building pickers such as a date picker, powered by native popover and CSS anchor positioning

Installation

$npx litefy@latest add picker
$pnpm dlx litefy@latest add picker
$yarn dlx litefy@latest add picker
$bun --bun litefy@latest add picker

Usage

Click the input to toggle the popover panel; open / value each support controlled and uncontrolled modes.

Any content can be rendered inside the popover panel.

"use client";import { useState } from "react";import { ChevronDown } from "lucide-react";import { Picker } from "@/ui";export default function Demo() {  const [value, setValue] = useState("");  return (    <Picker      value={value}      onValueChange={setValue}      placeholder="Click to open"      trailing={<ChevronDown />}    >      <div className="w-64 p-3 text-sm text-muted-foreground">        Any content can be rendered inside the popover panel.      </div>    </Picker>  );}

API Reference

High-level Components

Prop	Type	Default	Description
`value`	`string`	-	Controlled input value
`defaultValue`	`string`	`""`	Default input value (uncontrolled)
`onValueChange`	`(value: string) => void`	-	Fired when the input value changes
`open`	`boolean`	-	Controlled popover open state
`defaultOpen`	`boolean`	`false`	Initial open state (uncontrolled)
`onOpenChange`	`(open: boolean) => void`	-	Fired when the popover should open or close (click, outside press, Escape)
`trailing`	`React.ReactNode`	-	Icon rendered at the input's trailing edge
`children`	`React.ReactNode`	-	Popover panel content
`panelRef`	`React.Ref<HTMLDivElement>`	-	Receives the panel element, for `usePanelFocus`
`className`	`ClassNameValue`	-	Custom classes, applied to the root wrapper
`style`	`React.CSSProperties`	-	Inline styles, applied to the root wrapper
`classNames`	`PickerClassNames`	-	Per-part class name overrides: `input`, `trailing`, `popover`
`styles`	`PickerStyles`	-	Per-part style overrides: `input`, `trailing`, `popover`
`...props`	`React.ComponentProps<"input">`	-	Remaining native input props, such as `placeholder` and `disabled`

In controlled mode the parent must update value from onValueChange on every keystroke, or typing is blocked.

Consumer onKeyDown / onClick compose with the built-in toggle and Escape-close; preventDefault skips the built-ins.

For panel keyboard, wire highlighted-list panels with useCombobox (the input keeps focus while the panel is open), and panels of real focusable controls with usePanelFocus and panelRef; on close, focus returns to the input if it would otherwise be lost.

Popover positioning requires CSS anchor positioning support.

Composable Components

PickerRoot

Wrapper around the input; carries the anchor name consumed by the panel.

Prop	Type	Default	Description
`className`	`ClassNameValue`	-	Custom class names
`...props`	`React.ComponentProps<"div">`	-	Native div props

PickerInput

The trigger input.

Prop	Type	Default	Description
`className`	`ClassNameValue`	-	Custom class names
`...props`	`React.ComponentProps<"input">`	-	Native input props

PickerContent

The popover panel — a native popover="manual" element; call showPopover() / hidePopover() and position it via style={{ positionAnchor: ... }} (there is no positionAnchor prop).

Prop	Type	Default	Description
`className`	`ClassNameValue`	-	Custom class names
`...props`	`React.ComponentProps<"div">`	-	Native div props

Picker

On this page