# Quick example
In the example below you'll find two-way binding on the Form Component, validation error evaluation, integration with Autosize, Choices.js and Flatpickr, and the Group component.
<template>
<div id="app">
<Form class="p-8 max-w-md" v-model="user" :errors="errors">
<Input name="name" label="Your name" />
<Textarea name="biography.en" label="Write your story (English)" autosize />
<Textarea name="biography.nl" label="Write your story (Dutch)" autosize />
<Input name="date_of_birth" label="Date of birth" date />
<Select name="favorite_framework" :options="frameworks" label="Pick your favorite framework" choices />
<Select name="interests" :options="interests" label="Choose your interests" multiple choices />
<Group label="Prefered IDE theme" name="theme" inline>
<Radio name="theme" value="dark" label="Dark theme" />
<Radio name="theme" value="light" label="Light theme" />
</Group>
<Group>
<Checkbox name="newsletter" label="Do you want to receive my newsletter?" />
</Group>
<Submit />
</Form>
</div>
</template>
<script>
export default {
data() {
return {
user: {
name: "Form Components Pro",
biography: {
en: "",
nl: "",
},
date_of_birth: "",
favorite_framework: "tailwind",
interests: ["tailwind", "inertiajs", "laravel"],
theme: "dark",
newsletter: true,
},
frameworks: {
tailwind: "Tailwind CSS",
bootstrap: "Bootstrap",
},
interests: [
{ value: "tailwind", label: "Tailwind CSS" },
{ value: "bootstrap", label: "Bootstrap" },
{ value: "inertiajs", label: "Inertia.js" },
{ value: "livewire", label: "Livewire" },
{ value: "laravel", label: "Laravel" },
],
errors: {
biography: {
en: "Tell me!",
},
date_of_birth: "Hey, this is required!",
},
};
},
};
</script>