Vector Pad

A 2D offset pad with a draggable handle and X/Y numeric inputs.

X Y

<script setup lang="ts">
import type { VectorValue } from '@/components/ui/vector-pad'
import { ref } from 'vue'
import { VectorPad } from '@/components/ui/vector-pad'

const offset = ref<VectorValue>({ x: 0.35, y: 0.2 })
const compact = ref<VectorValue>({ x: -0.5, y: -0.6 })
</script>

<template>
  <div class="flex w-full max-w-sm flex-col gap-4">
    <VectorPad v-model="offset" />
    <VectorPad v-model="compact" size="compact" :default-value="{ x: 0, y: 0 }" />
  </div>
</template>

Installation


pnpm dlx hui-kit@latest add vector-pad

Usage

<script setup lang="ts">
import { ref } from 'vue'
import { VectorPad, type VectorValue } from '@/components/ui/vector-pad'

const offset = ref<VectorValue>({ x: 0.35, y: 0.2 })
</script>

<template>
  <VectorPad v-model="offset" class="max-w-xs" />
</template>

The value is a normalized { x, y } offset in -1..1 on both axes; +y points up (screen top). Axis guide lines and the handle follow the value, dragging snaps to the pointer, and double-clicking the pad resets it to defaultValue (the origin unless overridden).

Sizes

Use size="compact" for a shorter pad that fits dense control panels; the default square fills the container width.

X Y

<script setup lang="ts">
import type { VectorValue } from '@/components/ui/vector-pad'
import { ref } from 'vue'
import { VectorPad } from '@/components/ui/vector-pad'

const value = ref<VectorValue>({ x: 0, y: -0.45 })
</script>

<template>
  <VectorPad v-model="value" size="compact" class="max-w-xs" />
</template>

Typography Installation

On This Page

Installation Usage Sizes