Skip to content
Pinky UI

forms

Elastic Segmented Control

A compact value selector with one elastic active surface; use Fluid Tabs for tab-panel navigation.

  • forms
  • segmented
  • radio
  • tabs
Related pattern

Independent value-selection semantics; Fluid Tabs owns navigation between panels.

Live preview

Quick usage

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

<ElasticSegmentedControl label="Billing" items={plans} />

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
mode"radio" | "tabs""radio"Use radio for mutually exclusive values; use tabs only when switching labelled panels.
classNamestring—Styles the outer interaction surface.

Accessibility

  • Keyboard and touch paths match the pointer interaction.
  • Stable labels and values remain available without motion.

Performance

  • One shared indicator moves without layout shift.

Reduced motion

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

When to use

  • Two to five compact product choices

When not to use

  • Primary navigation or multi-select

Skill

Purpose

ElasticSegmentedControl handles compact mutually exclusive product choices such as Monthly/Yearly or Grid/List. Use radio mode for values and tab mode only when controlling panels.

Keep two to five short options and one obvious selected state. Avoid long labels, multi-select choices or duplicating primary navigation. The indicator may stretch softly but must arrive with the selection.

Arrow, Home and End keys move both focus and value; touch uses normal buttons. Reduced motion updates instantly. Keep radio/tab semantics matched to the actual relationship and never use color as the only selected signal.

Open this skill on its own page