Linked Controls

The reference implementation of React form controls using value links. Can be used as is or as a starting boilerplate for your custom controls with inlined validation errors.

Link can be bound to the any form control consuming value and onChange props, so linked controls from this package may be used but are not really required.

``javascript

`

However, it's beneficial to create a custom form control wrappers encapsulating your markup patterns for a form layout and validation in order to take a full advantage of the value link.

Installation

npm install linked-controls --save-dev

React hooks

##### useThrottle( fun, timeout, changes = [] )

Produce throttled version of the fun function, which will be executed after the given delay in msecs.
All external variabled used by fun must be listed in changes array to prevent race conditions.

The hook is used by the .

List of controls

$3

##### , <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> </p><p class="my-3">Wrappers for standard </code><input><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> and </code><textarea><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> tags which can be directly bound to the string links.</p><p class="my-3">These wrappers will add </code>invalid<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> class to enclosed HTML element if an error is present in the link.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">jsx<br /><Input type="text" $value={ $link } /><br /><TextArea $value={ $link } /><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">##### </code><NumberInput/><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">A cross-browser implementation of <em>numeric input</em> tag. It has following differences compared to </code><Input><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">:</p><p class="my-3">- Keyboard input which obviously leads to invalid values (e.g. letters) are rejected.<br />- Value is being always converted to valid number.<br />- There are </code>integer<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> and </code>positive<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> boolean props controlling input rejection. They can be combined.</p><p class="my-3"></code><NumberInput><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> validates its value and adds </code>invalid<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> class to enclosed input element if it's not a number.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">jsx<br /><NumberInput $value={ $link } /><br /><NumberInput $value={ $link } integer={ true }/><br /><NumberInput $value={ $link } positive={ true }/><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">##### </code><DelayedInput/><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">Text input field updating the </code>$value<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> after the given timeout when user stopped typing (1 second by default).</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">jsx<br /><DelayedInput $value={$link} timeout={500} /><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">##### </code><Input type="checkbox" /><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">Wrapper for the standard </code><input><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. Directly binds boolean value with </code>checkedLink<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> property.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">jsx<br /><Input type="text" $checked={ booleanLink } /><br /><Input type="text" $checked={ $array.contains( 'option' ) } /><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">##### </code><Checkbox/><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">Internally, it's </code><div><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> element which toggles </code>selected<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> class on click.<br />Thus, it can be easily styled.</p><p class="my-3">By default, it has </code>checkbox<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> CSS class which can be overridden by passing </code>className<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> prop.</p><p class="my-3">It passes through anything else including </code>children<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.<br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">jsx<br /><Checkbox $checked={ $boolean } /><br /><Checkbox $checked={ $array.contains( 'option' ) } /><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">##### </code><Select/><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">Wrapper for standard </code><select/><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. Regular </code><option/><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> tags must be used. All props are passed through.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">jsx<br /><Select $value={ linkToSelectedValue }><br /> <option value="a">A</option><br /> <option value="b">B</option><br /></Select><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">##### </code><Input type="radio"/><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /> <br />Wrapper for the standard </code><input><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. Directly binds boolean value with </code>$checked<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> property.</p><p class="my-3">Can be directly bound to the link of any type with </code>$value<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> or </code>$checked<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> property.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">jsx<br /><label><br /> A:<br /> <Input type="radio" $value={ $flag } value="a" /><br /></label><br /><label><br /> B:<br /> <Input type="radio" $checked={ $flag.equals( "b" ) } /><br /></label><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">##### </code><Radio/><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">Internally, it's </code><div><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> element which always sets </code>selected<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> class on click. Thus,<br />it can be easily styled. </p><p class="my-3">By default, it has </code>radio<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> CSS class, which can be overridden by passing </code>className<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> prop.<br />It passes through anything else, including </code>children<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.</p><p class="my-3">It <em>must</em> be used in conjunction with </code>$link.equals( 'value' )<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> method.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">jsx<br /><label><br /> A:<br /> <Radio $checked={ $flag.equals( 'a' ) } /><br /></label><br /><label><br /> B:<br /> <Radio $checked={ $flag.equals( 'b' ) } /><br /></label><br /></code>``<br /></p></div><div class="flex justify-center absolute inset-x-0 bottom-0 bg-gradient-to-t from-background via-background to-transparent pb-4 pt-16"><button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down mr-1 h-4 w-4"><path d="m6 9 6 6 6-6"></path></svg>Show more</button></div></div></div><template id="P:3"></template><template id="P:4"></template></div></div></div><script>self.__next_f.push([1,"2b:[\"$\",\"path\",\"cbrjhi\",{\"d\":\"M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z\"}]\n2c:[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"className\":\"inline-flex items-center justify-center rounded-md border px-2 py-0.5 font-medium w-fit whitespace-nowrap shrink-0 [\u0026\u003esvg]:size-3 gap-1 [\u0026\u003esvg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden border-transparent bg-secondary text-secondary-foreground [a\u0026]:hover:bg-secondary/90 ml-auto text-xs\",\"children\":10}]\n"])</script><script>self.__next_f.push([1,"2d:[\"$\",\"div\",null,{\"data-slot\":\"card-content\",\"className\":\"px-6\",\"children\":[\"$\",\"div\",null,{\"className\":\"grid gap-1 sm:grid-cols-2 lg:grid-cols-3\",\"children\":[[\"$\",\"$L5\",\"@types/react\",{\"href\":\"/package/%40types%2Freact\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@types/react\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"*\"}]]}],[\"$\",\"$L5\",\"classnames\",{\"href\":\"/package/classnames\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"classnames\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^2.2.0\"}]]}],[\"$\",\"$L5\",\"proptypes\",{\"href\":\"/package/proptypes\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"proptypes\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"*\"}]]}],[\"$\",\"$L5\",\"react\",{\"href\":\"/package/react\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"react\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"*\"}]]}],[\"$\",\"$L5\",\"rollup\",{\"href\":\"/package/rollup\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"rollup\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^0.58.0\"}]]}],\"$L2f\",\"$L30\",\"$L31\",\"$L32\",\"$L33\"]}]}]\n"])</script><script>self.__next_f.push([1,"2f:[\"$\",\"$L5\",\"rollup-plugin-node-resolve\",{\"href\":\"/package/rollup-plugin-node-resolve\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"rollup-plugin-node-resolve\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^3.3.0\"}]]}]\n30:[\"$\",\"$L5\",\"rollup-plugin-uglify\",{\"href\":\"/package/rollup-plugin-uglify\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"rollup-plugin-uglify\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^3.0.0\"}]]}]\n31:[\"$\",\"$L5\",\"tslib\",{\"href\":\"/package/tslib\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"tslib\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^1.9.3\"}]]}]\n32:[\"$\",\"$L5\",\"typescript\",{\"href\":\"/package/typescript\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"typescript\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"*\"}]]}]\n33:[\"$\",\"$L5\",\"valuelink\",{\"href\":\"/package/valuelink\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-"])</script><script>self.__next_f.push([1,"6-6\"}],\"$undefined\"]}],\"valuelink\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"*\"}]]}]\n"])</script><div hidden id="S:3"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-dependencies" hidden="" id="radix-_R_aav5ubrb_-content-dependencies" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:3","P:3")</script><div hidden id="S:4"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-versions" hidden="" id="radix-_R_aav5ubrb_-content-versions" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS("S:4","P:4")</script><script>$RC("B:1","S:1")</script></body></html>