Installation

pnpm dlx kliping@latest add input

Usage

<script setup lang="ts">
import { Input } from '@/components/ui/input'
</script>

<template>
  <Input />
</template>

Examples

Bawaan

Berkas

Picture

Nonaktif

Dengan Label

Email

Dengan Tombol

Requirements

Semua dipasang otomatis oleh kliping add; tabel ini untuk Anda yang memasang manual atau memeriksa project.

Requirement	Value
Project	Vue 3.5+, Tailwind CSS v4, alias @ — disiapkan kliping init
npm packages	@vueuse/core@^14.4.0
Files	components/ui/input/input.vue components/ui/input/index.ts

API Reference

Prop	Type	Default	Description
defaultValue?	string | number	—	The initial value when uncontrolled.
modelValue?	string | number	—	The controlled value. Bind with v-model.

Event	Payload	Description
@update:modelValue	[payload: string | number]	Emitted when the value changes.

Data attribute	Value
[data-slot]	"input"

CSS Variables

Token tema yang dibaca komponen ini — ubah nilainya di CSS global (:root dan .dark, lihat Theming) untuk mengubah tampilannya tanpa menyentuh komponennya: --border, --destructive, --foreground, --input, --muted-foreground, --primary, --primary-foreground, --radius, --ring.

Credits

Berasal dari shadcn-vue (MIT, Copyright (c) 2023 unovue). Rantai lengkapnya di Credits.