Component usage

In this section we will learn how each component can be used within the form and see an example.

Note that every component can be used without a v-model attribute. Validations will run correctly and the default submit event should work correctly as if you were using a plain form component. If you want to do more advanced stuff with the data (for example fetching data with axios on the submit event) you should probably use a v-model.

LForm

The LForm component is the wrapper that makes everything happen. It basically receives a @submit signal and runs validations for the internal components:

<script setup lang="ts">
import { LForm } from 'loveform';

const submit = () => {
  // handle submission
};
</script>

<template>
  <LForm @submit="submit">
    ...
    <button type="submit">Submit</button>
  </LForm>
</template>

Every component from Loveform will probably be used inside an LForm component.

LInput

The most basic form component (and also the one that most commonly gets validated), the LInput component acts as any input component would, except it receives a validations array which contains validation functions to check if the content of the input is valid or not.

<script setup lang="ts">
import { LForm, LInput } from 'loveform';

const validations = [
  (text: string) => !!text.trim() || 'This field cannot be empty',
  // here go the rest of the validations for the input
];

const submit = () => {
  // handle submission
  // will only be called if validations pass
};
</script>

<template>
  <LForm @submit="submit">
    <LInput :validations="validations" />
  </LForm>
</template>

LTextarea

A component very similar to the LInput component, the LTextarea component acts as any textarea component would, except it receives a validations array which contains validation functions to check if the content of the textarea is valid or not.

<script setup lang="ts">
import { LForm, LTextarea } from 'loveform';

const validations = [
  (text: string) => !!text.trim() || 'This text area cannot be empty',
  // here go the rest of the validations for the textarea
];

const submit = () => {
  // handle submission
  // will only be called if validations pass
};
</script>

<template>
  <LForm @submit="submit">
    <LTextarea :validations="validations" />
  </LForm>
</template>

LCheckbox

A checkbox component, it adds virtually nothing to the native <input type="checkbox"> component, except it hooks up to the Loveform system. This component should probably be used with the LCheckboxGroup to validate something about a group of checkboxes.

LCheckboxGroup

A group of checkbox components, it receives a validations array which contains validation functions to check if the LCheckbox components inside the LCheckboxGroup are valid or not.

<script setup lang="ts">
import { LForm, LCheckbox, LCheckboxGroup } from 'loveform';

const validations = [
  (items: boolean[]) => items.reduce((x, y) => x || y, false) || 'At least one checkbox should be selected',
  // here go the rest of the validations for the checkbox group
];

const submit = () => {
  // handle submission
  // will only be called if validations pass
};
</script>

<template>
  <LForm @submit="submit">
    <LCheckboxGroup :validate="validate">
      <LCheckbox /> First Value
      <LCheckbox /> Second Value
      <LCheckbox /> Third Value
    </LCheckboxGroup>
  </LForm>
</template>