Űrlap rendszer

Komplex űrlapok és form validáció a BÜCHL Design System-ben

Egyszerű űrlap

Példa

Kód

      <template>
  <form @submit.prevent="handleSubmit" class="space-y-6">
    <UFormField label="Név" name="name" required>
      <UInput 
        v-model="form.name" 
        placeholder="Teljes név"
      />
    </UFormField>

    <UFormField label="Email" name="email" required>
      <UInput 
        v-model="form.email" 
        type="email"
        placeholder="email@example.com"
        icon="i-heroicons-envelope"
      />
    </UFormField>

    <UFormField label="Üzenet" name="message">
      <UTextarea 
        v-model="form.message" 
        placeholder="Írja le üzenetét..."
        :rows="4"
      />
    </UFormField>

    <div class="flex gap-3">
      <UButton type="submit" color="primary" class="rounded-none">
        Küldés
      </UButton>
      <UButton type="button" variant="outline" class="rounded-none">
        Mégsem
      </UButton>
    </div>
  </form>
</template>

<script setup lang="ts">
const form = reactive({
  name: '',
  email: '',
  message: ''
})

const handleSubmit = () => {
  console.log('Form submitted:', form)
}
<script>

Űrlap adatok

{
  "name": "",
  "email": "",
  "message": ""
}

Többlépéses űrlap

Személyes adatokSzolgáltatásÖsszegzés