jio-form

Slots

Name	Description	Bindings
default

View on Gitlab

General

This page describes various form components. The components are generally based on Bootstrap components.

Code examples

A form containing an input field with a label and validation feedback.

<template>
  <div class="jio-core">
    <jio-form>
      <jio-form-group>
        <jio-form-label forId="example-email-input" required>
          E-mailadres (bijvoorbeeld john.doe@jio.nl)
        </jio-form-label>
        <jio-input
          id="example-email-input"
          type="email"
          v-model="email.value"
          :isInvalid="email.feedback.length > 0"
          placeholder="Vul hier je e-mailadres in"
          autocomplete="email"
          aria-autocomplete="both"
          required
          aria-describedby="example-email-feedback"
          @change="isEmailAddressValid"
        />
        <jio-form-feedback
          v-if="email.feedback.length > 0"
          id="example-email-feedback"
        >
          {{ email.feedback }}
        </jio-form-feedback>
      </jio-form-group>
    </jio-form>
  </div>
</template>

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

const email = reactive({
  value: "",
  feedback: "",
  wasValidated: false,
});

function isEmailAddressValid(): void {
  let feedback = "";

  if (email.value.length == 0) {
    feedback += "Er moet een e-mailadres worden ingevuld. ";
  }

  if (!email.value.includes("@")) {
    feedback += "Het e-mailadres moet een @ symbool bevatten. ";
  }

  email.feedback = feedback;
  email.wasValidated = true;
}
</script>

jio-form ​

Slots ​

General ​

Code examples ​

jio-form

Slots

General

Code examples