Komponenten-Showcase

DaisyInput

Ein einfaches Nutzungsbeispiel aus vue-daisyui-components – ohne zusätzliche Anwendungslogik.

Props-Referenz

Definitionen aus defineProps der installierten Komponente. Eine aktivierte Checkbox kennzeichnet ein erforderliches Prop. Typnamen verweisen auf die Typen der Bibliothek.

DaisyInput – Props-Referenz
Beschreibung	Erforderlich	Name	Typ
		`className`	`string`
		`disabled`	`boolean`
		`invalid`	`boolean`
		`modelValue`	`string`
		`name`	`string`
		`placeholder`	`string`
		`readonly`	`boolean`
		`required`	`boolean`
		`type`	`string`

Live-Vorschau

E-MailDeaktiviertes Input

Für dein Projekt

DaisyInput – Vollständiger Vue-Code

<script setup lang="ts">
import { ref } from 'vue'
import DaisyInput from 'vue-daisyui-components/components/DaisyInput.vue'

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

<template>
  <div class="max-w-sm space-y-4">
    <label class="flex flex-col gap-2">
      <span>E-Mail</span>
      <DaisyInput v-model="email" name="email" type="email" autocomplete="email" placeholder="du@beispiel.de" class-name="w-full" />
    </label>
    <label class="flex flex-col gap-2">
      <span>Deaktiviertes Input</span>
      <DaisyInput model-value="Nicht bearbeitbar" disabled class-name="w-full" />
    </label>
  </div>
</template>