title: 输入
description: A versatile and visually dynamic input field with radial hover effects, styled for modern web applications.
---

```vue
<template>
  <div class="flex h-56 w-full flex-col items-center justify-center gap-2">
    <label
      for="inputDemo"
      class="ml-4 w-full max-w-sm text-sm font-medium text-gray-700 dark:text-gray-200"
      >Hover over below input</label
    >
    <IInput
      id="inputDemo"
      placeholder="Hover over me"
      container-class="w-full max-w-sm"
    ></IInput>
  </div>
</template>

```

## 通过 CLI 安装

```vue
<InstallationCli component-id="input" />
```

## 手动安装

复制并粘贴以下代码：

```vue
<!-- Uses base code from shadcn-vue Input component and extends it's functionality-->
<template>
  <div
    ref="inputContainerRef"
    :class="cn('group/input rounded-lg p-[2px] transition duration-300', props.containerClass)"
    :style="{
      background: containerBg,
    }"
    @mouseenter="() => (visible = true)"
    @mouseleave="() => (visible = false)"
    @mousemove="handleMouseMove"
  >
    <input
      v-bind="$attrs"
      v-model="modelValue"
      :class="
        cn(
          `flex h-10 w-full border-none bg-gray-50 dark:bg-zinc-800 text-black dark:text-white shadow-input rounded-md px-3 py-2 text-sm  file:border-0 file:bg-transparent 
          file:text-sm file:font-medium placeholder:text-neutral-400 dark:placeholder-text-neutral-600 
          focus-visible:outline-none focus-visible:ring-[2px]  focus-visible:ring-neutral-400 dark:focus-visible:ring-neutral-600
           disabled:cursor-not-allowed disabled:opacity-50
           dark:shadow-[0px_0px_1px_1px_var(--neutral-700)]
           group-hover/input:shadow-none transition duration-400`,
          props.class,
        )
      "
    />
  </div>
</template>

<script setup lang="ts">
import type { HTMLAttributes } from "vue";
import { cn } from "@/lib/utils";
import { useVModel } from "@vueuse/core";
import { ref, computed } from "vue";

defineOptions({
  inheritAttrs: false,
});

const props = defineProps<{
  defaultValue?: string | number;
  modelValue?: string | number;
  class?: HTMLAttributes["class"];
  containerClass?: HTMLAttributes["class"];
}>();

const emits = defineEmits<{
  (e: "update:modelValue", payload: string | number): void;
}>();

const modelValue = useVModel(props, "modelValue", emits, {
  passive: true,
  defaultValue: props.defaultValue,
});

const inputContainerRef = ref<HTMLDivElement | null>(null);
const mouse = ref<{ x: number; y: number }>({ x: 0, y: 0 });
const radius = 100;
const visible = ref(false);

const containerBg = computed(() => {
  return `
        radial-gradient(
          ${visible.value ? radius + "px" : "0px"} circle at ${mouse.value.x}px ${mouse.value.y}px,
          var(--blue-500),
          transparent 80%
        )
      `;
});

function handleMouseMove({ clientX, clientY }: MouseEvent) {
  if (!inputContainerRef.value) return;

  const { left, top } = inputContainerRef.value.getBoundingClientRect();
  mouse.value = { x: clientX - left, y: clientY - top };
}
</script>

<style scoped>
input {
  box-shadow:
    0px 2px 3px -1px rgba(0, 0, 0, 0.1),
    0px 1px 0px 0px rgba(25, 28, 33, 0.02),
    0px 0px 0px 1px rgba(25, 28, 33, 0.08);
}
</style>

```

## API

| Prop 名称        | 类型                | 默认值 | 描述                                                        |
| ---------------- | ------------------- | ------ | ----------------------------------------------------------- |
| `defaultValue`   | `string  \| number` | `""`   | 默认值 value of the input field.                            |
| `class`          | `string`            | `""`   | Additional CSS classes for custom styling.                  |
| `containerClass` | `string`            | `""`   | Additional CSS classes for custom styling of the container. |

## 功能特性

- **Radial Hover Effect**: Displays a dynamic radial gradient background that follows mouse movements when hovering over the input container.
- **Two-Way Binding**: Supports `v-model` for seamless integration with Vue's two-way data binding.
- **Dark Mode Compatibility**: Automatically adapts to dark mode styles using Tailwind's `dark:` utilities.
- **Customizable Styles**: Easily extend or override styles using the `class` prop.
- **Accessible Focus Ring**: Includes focus-visible styles for enhanced accessibility and usability.
- **Responsive Design**: Works well across different screen sizes and devices.

## Styles

This component inherits base styles from ShadCN Vue’s Input component and applies additional functionality, including hover effects and shadow styling.

## 感谢

- Built on ShadCN Vue's Input component foundation, with extended functionality for modern UI/UX needs.
- Ported from [Aceternity UI's Signup Form Input Component](https://ui.aceternity.com/components/signup-form)