> Source: https://laravilt.com/docs/frontend/forms/introduction

# Form Components

Standalone Vue 3 form input components.

## Installation

```bash
npm install @laravilt/support
```

## Available Components

| Component | Description | Import |
|-----------|-------------|--------|
| Input | Text input | `@laravilt/support` |
| Textarea | Multi-line input | `@laravilt/support` |
| Select | Dropdown select | `@laravilt/support` |
| Checkbox | Checkbox input | `@laravilt/support` |
| Switch | Toggle switch | `@laravilt/support` |
| Radio | Radio buttons | `@laravilt/support` |
| Label | Form label | `@laravilt/support` |

## Quick Example

```vue
<script setup lang="ts">
import { ref } from 'vue'
import { Input, Label, Button } from '@laravilt/support'

const email = ref('')
</script>

<template>
    <form @submit.prevent="submit">
        <div class="grid gap-4">
            <div class="grid gap-2">
                <Label for="email">Email</Label>
                <Input
                    id="email"
                    v-model="email"
                    type="email"
                    placeholder="Enter email"
                />
            </div>
            <Button type="submit">Submit</Button>
        </div>
    </form>
</template>
```

## Form Layout

```vue
<template>
    <form class="space-y-4">
        <div class="grid gap-2">
            <Label>Name</Label>
            <Input v-model="name" />
        </div>

        <div class="grid grid-cols-2 gap-4">
            <div class="grid gap-2">
                <Label>First Name</Label>
                <Input v-model="firstName" />
            </div>
            <div class="grid gap-2">
                <Label>Last Name</Label>
                <Input v-model="lastName" />
            </div>
        </div>

        <div class="flex items-center gap-2">
            <Checkbox id="terms" v-model="terms" />
            <Label for="terms">Accept terms</Label>
        </div>

        <Button type="submit">Submit</Button>
    </form>
</template>
```

## Related

- [Input](https://github.com/laravilt/laravilt/blob/HEAD/docs/frontend/forms/input) - Text input
- [Select](https://github.com/laravilt/laravilt/blob/HEAD/docs/frontend/forms/select) - Select dropdown
- [Checkbox](https://github.com/laravilt/laravilt/blob/HEAD/docs/frontend/forms/checkbox) - Checkbox input
- [Switch](https://github.com/laravilt/laravilt/blob/HEAD/docs/frontend/forms/switch) - Toggle switch