Skip to content
Pinky UI

forms

Segmented Input Composer

One logical value is entered through coordinated segments with traversal and paste distribution.

  • forms
  • segmented
  • date
  • paste
  • keyboard
Related pattern

Segmented value entry; Elastic Segmented Control remains a choice selector, not a multi-part input.

Live preview

Release date
One value · three coordinated parts

Quick usage

usage
import { SegmentedInputComposer } from "@pinky-ui/systems";

<SegmentedInputComposer label="Release date" segments={parts} onSegmentsChange={setParts} />

Presets

Default

Restrained production behaviour.

Default behaviour

Quiet

Reduced intensity for dense product screens.

disabled={true}

Install

Add @pinky-ui/systems as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell
npm install @pinky-ui/systems

Prefer to run the whole repository locally instead?

repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Props

PropTypeDefaultDescription
segmentsstring[]—Coordinated value parts that retain one logical field identity.
classNamestring—Styles the outer interaction surface.

Accessibility

  • Each segment has a visible label and Arrow keys move across the logical value.
  • Paste distributes numeric content across segments while the grouped legend explains the relationship.

Performance

  • Only the small set of native inputs is mounted; paste parsing is local and bounded.

Reduced motion

Motion resolves immediately while semantics, focus and state remain unchanged.

When to use

  • Dates, times, versions and dimensions that have meaningful fixed segments

When not to use

  • Free text or one value that should remain a single native input

Skill

Purpose

Use Segmented Input Composer when one logical value has meaningful fixed parts, such as a date, time, version or dimension.

Interaction

Keep the segments grouped under one legend. Move with Arrow keys, advance after a complete segment and distribute sensible pasted content across the parts.

Usage

tsx
<SegmentedInputComposer label="Release date" segments={parts} onSegmentsChange={setParts} />

Accessibility

Give each native input a visible label and preserve the logical group relationship. Paste and keyboard movement must work without requiring pointer selection.

Reduced motion

Advance focus directly and update all segments immediately. The grouped labels and current parts carry the meaning without transition effects.

Open this skill on its own page