Controlled Props

The primitives in this package allow you to create controlls for component props.

Stage	Category	Version	Last Updated	Demo
3	Utilities	1.0.0-next.3 (next)	Aug 13, 2026	Demo →

npm i @solid-primitives/controlled-props@next

Library of helpers for creating your own component prototyping tool. (a Storybook alternative if you will) The primitives in this package allow you to create controlls for component props.

`createControlledProp`

Primitive that provides controllable props signals like knobs/controls for simple component testing.

How to use it

You can either create a single prop:

// Second argument can be initialValue for boolean, number, string:
const [string, setString, stringField] = createControlledProp("stringValue", "test");

// Number with min/max/step:
const [count, setCount, countField] = createControlledProp("count", {
  initialValue: 5,
  min: 1,
  max: 10,
  step: 2,
});

// Range slider:
const [opacity, setOpacity, opacityField] = createControlledProp("opacity", {
  initialValue: 50,
  min: 0,
  max: 100,
  type: "range",
});

// Arrays or enums can be provided in an options object:
const [language, setLanguage, languageField] = createControlledProp(
  "language",
  { initialValue: "en", options: ["de", "en", "fr", "it"] as const }
  // If you want your array to be able to influence the setter/getter types, use `as const`.
);

enum Currency { AUD, GBP, EUR, USD, CHF, JPY, CNY }
const [currency, setCurrency, currencyField] = createControlledProp("currency", {
  initialValue: Currency.USD,
  options: Currency
});

return <>{languageField()}</>;

or multiple props in one call:

enum Test { One, Two, Three };
const languages = ['de', 'en', 'fr', 'it'] as const;
const [props, fields] = createControlledProps({
  boolean: true,
  number: 42,
  string: 'text',
  array: { initialValue: 'en', options: languages },
  enum: { initialValue: Test.Three, options: Test }
});

props == {
  boolean: Accessor<boolean>,
  setBoolean: Setter<boolean>,
  number: Accessor<number>,
  setNumber: Setter<number>,
  string: Accessor<string>,
  setString: Setter<string>,
  array: Accessor<string>,
  setArray: Setter<string>,
  enum: Accessor<Test>,
  setEnum: Setter<Test>
};

fields == JSX.Element[];

Control type inference

Initial value type	`type` option	Rendered control
`boolean`	—	`<input type="checkbox">`
`number`	—	`<input type="number">`
`number`	`"range"`	`<input type="range">` (slider)
`string`	—	`<input type="text">`
any + `options` array/enum	—	`<select>`

Exported field components

The individual field components are exported if you need them standalone:

import {
  BoolProp,
  NumberProp,
  RangeProp,
  StringProp,
  SelectProp,
} from "@solid-primitives/controlled-props";

RangeProp renders a slider with a live value readout and accepts min, max, and step props.

Changelog

See CHANGELOG.md