# j-Pin

> A simple PIN maker.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: en
Content-SHA256: cb23b44922ae8d1a8142c8426ee44741b46e7df72828fcfe49fa309f7d365d59
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

A simple PIN maker.


__Configuration__:

- `count {Number}` a count of PIN inputs (default: `6`)
- `required {Boolean}` enables "required" (default: `false`)
- `disabled {Boolean}` can disabled this control
- `hide` {Boolean} disables displaying of numbers (default: `false`)
- `mask {Boolean}` disables the mask (default: `true`)
- __NEW__ `exec {String}` a path to `function(pin)`
- __NEW__ `allowpaste {Boolean}` enables pin pasting (default: `true`)

__Good to know__:

- input with no value creates a space
- it expects `String`

__Methods__:

- `component.focus()` focuses the first input

Use it with `<ui-component name="pin">`. When the component is not loaded yet, jComponent downloads it on first use from the address in `DEF.fallback` (the Componentator CDN by default). Author: Peter Širka. Source: the Componentator components repository, MIT license.

```html example.html
<div style="padding:50px">
	<div style="width:200px">
		<div style="margin-bottom:5px">PIN 1</div>
		<ui-component name="pin" path="pinA" config="count:4"></ui-component>
	</div>
	<br />
	<div style="width:250px">
		<div style="margin-bottom:5px">PIN 2 (hide:true)</div>
		<ui-component name="pin" path="pinB" config="count:5;hide:true"></ui-component>
	</div>
	<br />
	<div style="width:300px">
		<div style="margin-bottom:5px">PIN 3 (visible)</div>
		<ui-component name="pin" path="pinC" config="count:6;mask:false"></ui-component>
	</div>
</div>
```