Loveform

# 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>

← Styling →