Skip to content
Pinky UI

forms

Multi-Value Builder

A coordinated field builder composes property, operator and value into readable conditions.

  • forms
  • conditions
  • builder
  • structured-input
  • filters
Related pattern

Structured condition authoring; Filter Rail owns grouped filters and Token Field owns flat values.

Live preview

Build a view
Where

Quick usage

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

<MultiValueBuilder conditions={conditions} onConditionsChange={setConditions} />

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
conditionsMultiValueCondition[]—Ordered property/operator/value rows that form a structured set.
classNamestring—Styles the outer interaction surface.

Accessibility

  • Every property, operator and value has a native label; remove and add actions are explicit buttons.
  • The visible Where/And relationship is repeated in the row text, not communicated by colour alone.

Performance

  • Only authored rows exist in the DOM and updates are scoped to the condition array.

Reduced motion

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

When to use

  • Saved views, query rules and compact product criteria

When not to use

  • A simple token list or a full query language editor

Skill

Purpose

Use Multi-Value Builder when a user composes structured conditions such as property, operator and value rather than entering a flat list of tokens.

Interaction

Keep each condition in one readable row. Add a condition to extend the set; use native selects and a text field for the parts; allow each extra row to be removed without losing the remaining conditions.

Usage

tsx
<MultiValueBuilder conditions={conditions} onConditionsChange={setConditions} />

Accessibility

Give every property, operator and value a label, and repeat the Where/And relationship in text. Add and remove actions must be keyboard reachable.

Reduced motion

Insert and remove rows without animated reflow. Keep the row order and condition language explicit.

Open this skill on its own page