jio-textarea

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 (default) `@see` invalidText	boolean	-	false
invalidText	If an input is set to 'invalid', what text to display `@values` Text for invalid entry (optional) `@see` isInvalid	string	-	"Vul alstublieft het veld in."
isValid	Whether the input should be rendered as valid `@values` true, false (default)	boolean	-
placeholder	The optional placeholder text to be rendered	string	-
type	The optional type of the input	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	-
maxLength	The optional maximum length of the input value	number	-	1024
maxHeight	The optional maximum height of the input value	number	-
defaultHeight	The optional default height of the input value	number	-	42
required	Whether the input is a required element for validation `@values` true, false	boolean	-
autocomplete	The autocompletion setting for the input	string	-
cols	The setting for the number of columns `@values` Width in columns the textarea `@see` Html textarea definition for attribute cols	number	-
rows	The setting for the number of rows `@values` Height in rows for the textarea `@see` Html textarea definition for attribute rows	number	-
ariaLabelledby	Optional for ariaLabelledby `@values` Text for ariaLabelledby	string	-

View on Gitlab

General

Please navigate to the documentation for jio-form instead.

<template>
  <p>'Gewone' textarea</p>
  <jio-textarea
    id="jta0"
    :is-invalid="false"
    placeholder="Vul hier uw gegevens in"
    cols="10"
    rows="4"
  >
  </jio-textarea>
  <br />
  <p>Textarea met label</p>
  <jio-textarea
    id="jta1"
    :is-invalid="false"
    label-text="Vul hier al uw gegevens in"
    placeholder="Hierzo dus"
    cols="9"
    rows="3"
  >
  </jio-textarea>
  <br />
  <p>Textarea met default foutmelding</p>
  <jio-textarea
    id="jta2a"
    :is-invalid="true"
    label-text="Vul hier iets in"
    placeholder="Maar wel goed"
    cols="2"
    rows="2"
  >
  </jio-textarea>
  <br />
  <p>Textarea met eigen foutmelding</p>
  <jio-textarea
    id="jta2b"
    :is-invalid="true"
    invalid-text="Helemaal fout"
    label-text="Vul in"
    placeholder="Maar wel goed"
    cols="2"
    rows="2"
  >
  </jio-textarea>
  <br />
  <p>Textarea verplicht in te vullen</p>
  <jio-textarea
    id="jta3"
    label-text="Vul hier verplicht iets in"
    placeholder="Wel doen"
    required
    cols="2"
    rows="2"
    :is-valid="true"
  >
  </jio-textarea>
  <br />
  <p>Textarea max-length en aria-labelledby gezet</p>
  <div id="otherid0">Aria labeled by verwijst naar deze div</div>
  <jio-textarea
    max-length="10"
    aria-labelledby="otherid0"
    id="jta3"
    placeholder="Aria: oorspronkelijk een gezongen expressieve melodie die gewoonlijk, maar niet altijd, door één zanger wordt uitgevoerd."
    required
    cols="2"
    rows="2"
  >
  </jio-textarea>
  <br />
  <p>Textarea max-height en default-height gezet</p>
  <div id="otherid0">Textarea met heights ingesteld</div>
  <jio-textarea
    max-height="13rem"
    default-height="10rem"
    id="jta3"
    placeholder="Deze textarea heeft een default- en max-height"
    required
    cols="2"
    rows="2"
    startIcon="user-24px"
    endIcon="oog"
  >
  </jio-textarea>
</template>

jio-textarea ​

Props ​

General ​

jio-textarea

Props

General