jio-input

Props

Prop name	Description	Type	Values	Default
id	An ID must be provided	string	-
isInvalid	Whether the input should be rendered as invalid `@values` true, false	boolean	-
invalidText	If an input is set to 'invalid', what text to display `@values` Text for invalid entry (optional) `@see` isInvalid	string	-
isValid	Whether the input should be rendered as valid `@values` true, false	boolean	-
placeholder	The placeholder text to be rendered	string	-
labelText	An optional text for the label. If not set, the label will not be displayed. `@values` Text for label.	union	-
startIcon	An optional icon for the input, this icon will be shown at the front. If not set, the icon will not be displayed. `@values` Text for label.	union	-
endIcon	An optional icon for the input, this icon will be shown at the end. If not set, the icon will not be displayed. `@values` Text for label.	union	-
type	The type of the input	string	-
maxLength	The maximum length of the input value	number	-	1024
required	Whether the input is a required element for validation `@values` true, false	boolean	-
autocomplete	The autocompletion setting for the input	string	-

View on Gitlab

General

This is the standard input component

<template>
  <i>Voorbeeld met beide icons + foutmelding wanneer je iets invult</i>
  <br />
  <jio-input
    id="example-text-input-naam"
    type="text"
    labelText="Naam"
    startIcon="user-24px"
    endIcon="oog"
    v-model="form.name"
    :isInvalid="form.name.length > 0"
    invalidText="Vul een naam in met minstens 1 karakter"
    placeholder="Vul hier je naam in"
    autocomplete="name"
    required
  />
  <br />
  <i
    >Voorbeeld met alleen een icon op het einde + goedmelding wanneer je iets
    invult</i
  >
  <br />
  <jio-input
    id="example-text-input-achternaam"
    type="text"
    labelText="Achternaam"
    endIcon="oog"
    v-model="form.achternaam"
    :isValid="form.achternaam.length > 0"
    invalidText="Vul een achternaam in met minstens 1 karakter"
    placeholder="Vul hier je achternaam in"
    autocomplete="name"
    required
  />
  <br />
  <i
    >Voorbeeld met geen icon op het einde + goedmelding wanneer je 6 karakters
    invult en een foutmelding bij 2 karakters</i
  >
  <br />
  <jio-input
    id="example-text-input-woonplaats"
    type="text"
    labelText="Woonplaats"
    v-model="form.woonplaats"
    :isInvalid="form.woonplaats.length >= 3 && form.woonplaats.length < 6"
    :isValid="form.woonplaats.length > 6"
    invalidText="Vul een woonplaats in met minstens 1 karakter"
    placeholder="Vul hier je woonplaats in"
    autocomplete="name"
    required
  />
</template>

<script setup lang="ts">
import { reactive } from "vue";

const form = reactive({
  name: "",
  achternaam: "",
  woonplaats: "",
});
</script>

jio-input ​

Props ​

General ​

jio-input

Props

General