# j-Textbox

> j-Textbox: NEW innerlabel {Boolean} optioneel, mogelijk interlabel (default: waar)

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

__Configuratie__:

- `type {String}` (optional) kan `email`, `phone`, `password`, `date`, `number`, `search`, `lower`, `upper` of leeg zijn (default)
- `required {Boolean}` (optional) maakt het mogelijk om "verplicht" te zijn (default: `false`)
- `icon {String}` (optional) icon voor etiket bijvoorbeeld `home`, `cog`, enz.
- `icon2 {String}` (optional) icoon in de rechterkant bijvoorbeeld `home`, `cog`, enz.
- `label {String}` (optional) label (de standaard is HTML-inhoud)
- `autofocus {Boolean}` (optional) richt de input op (default: `false`)
- `align {String}` (optional) `left` (default), `right` of `center`
- `autofill {Boolean}` (optional) maakt de autofillfunctie van de browser mogelijk (default: `false`)
- `placeholder {String}` (optional) voegt een `placeholder` tekst toe aan de input
- `maxlength {Number}` (optional) bepaalt een maximale lengte van de banden
- `minlength {Number}` (optional) stelt een minimumduur van de banden vast
- `validation {String}` (optional) een voorwaarde voor `evaluation` bijvoorbeeld `value.match(/[a-z]+/) !== null`
- `format {String}` (optional) output formatting bijvoorbeeld voor data (default: `yyyy-MM-dd`)
- `increment {Boolean}` (optional) zorgt voor controles voor het verhogen van cijfers (default: `false`)
- `keypress {Boolean}` (optional) kan in realtime bindende waarden uitschakelen (default: `true`)
- `delay {Number}` (optional) kan de vertraging verhogen/verlagen voor real-time binding (default: `300` ms)
- `disabled {Boolean}` (optional) dekt deze component uit
- `error {String}` (optional) voegt een `string` tekst toe onder de invoer
- `iconclick {String}` (optional) moet een link naar een functie bevatten
- `autocomplete {String}` (optional) moet een link naar een functie bevatten, wordt uitgevoerd op het evenement `focus`
- `spaces {Boolean}` (optional) maakt ruimte mogelijk anders verwijdert het ze (default: `true`)
- `readonly {Boolean}` optie, standaard `false`
- __NEW__ `innerlabel {Boolean}` optioneel, de interne etikettering mogelijk maakt (default: `true`)

__Interessant is:__

- `type:date` gebruikt de `calendar` component

Gebruik het met `<ui-component name="textbox">`Wanneer de component nog niet is geladen, jComponent Download het op eerste gebruik van het adres in `DEF.fallback` (De Componentator Schrijver: Peter Širka. bron: de Componentator Componenten repository, MIT licentie.

```html example.html
<div style="width:400px">
	<ui-component name="textbox" path="form.name" config="required:true;placeholder:Your name;icon2:pencil;error:Please enter your name">Name</ui-component>
	<br />
	<ui-component name="textbox" path="form.email" config="required:true;type:email;autofill:email;icon:envelope;error:E-mail must be in format email@domain.com">E-mail</ui-component>
	<br />
	<ui-component name="textbox" path="form.password" config="type:password">Password</ui-component>
	<br />
	<ui-component name="textbox" path="form.note">Note</ui-component>
	<br />
	<ui-component name="textbox" path="form.phone" config="type:phone">Phone</ui-component>
	<br />
	<ui-component name="textbox" path="form.age" config="type:number;increment:true">Age</ui-component>
	<br />
	<ui-component name="textbox" path="form.search" config="type:search">Search</ui-component>
	<hr />
	<h2>Inner label</h2>
	<ui-component name="textbox" path="form.name" config="required:true;innerlabel:true;placeholder:Your name;icon2:pencil;error:Please enter your name">Name</ui-component>
</div>

<script>
	var form = {};
	form.email = '@';
	form.age = 30;
</script>
```