jio-password

Props

Prop name	Description	Type	Values	Default
id	An ID must be provided	string	-
enableShowToggle	Whether the input should be have an show toggle `@values` true, false	boolean	-
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 front. If not set, the icon will not be displayed. `@values` Text for label.	union	-
showIcon	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	-
hideIcon	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	-
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 password component

<template>
  <jio-password
    id="example-text-input-wachtwoord"
    labelText="Wachtwoord"
    startIcon="dji-slotje"
    showIcon="oog"
    hideIcon="oog-variant"
    :enableShowToggle="true"
    v-model="form.wachtwoord"
    :isInvalid="form.wachtwoord.length >= 3 && form.wachtwoord.length < 6"
    :isValid="form.wachtwoord.length > 6"
    invalidText="Vul een wachtwoord in met minstens 1 karakter"
    placeholder="Vul hier je wachtwoord in"
    autocomplete="password"
    required
  />
</template>

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

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

jio-password ​

Props ​

General ​

jio-password

Props

General