Experience System
Components

Segment Input

Registry

Numeric segment input with spinbutton semantics — used as the building block for date and time pickers.

The Segment Input recipe is a small numeric input with spinbutton semantics: arrow stepping, auto-advance, and max-length masking. It's the building block the date and time picker recipes compose on top of.

Installation

Run the shadcn CLI with your package manager. It vendors the recipe into components/ui/segment-input.tsx and installs the runtime dependencies (@by/experience-system) automatically:

pnpm dlx shadcn@latest add @by-es/segment-input

In this monorepo, depend on the workspace package (for example via workspace:* or your catalog) so imports resolve to packages/experience-system. Configure the Registry in your app before adding recipes.

Search

Search input with a clear button using InputGroup from @by/experience-system.

Select

A styled single-choice listbox opened from a field-style trigger.

On this page

Installation