IP Address Input

Installation

INFO

If other components are needed, please refer to Full Components Installation

To install the IP Address Input individually, run the following command:

shell

npm install @havue/ip-input --save

shell

yarn add @havue/ip-input

shell

pnpm install @havue/ip-input

Import

<script>
import { HvIpInput } from 'havue'
// or 
import { HvIpInput } from '@havue/components'
// or
import HvIpInput from '@havue/ip-input'
</script>

Example

.

.

.

disabled:

.

.

.

Click to view code

<template>
  <div class="ip-input-demo">
    <HvIpInput v-model="ip"></HvIpInput>
    <p>disabled:</p>
    <HvIpInput :model-value="ip" disabled></HvIpInput>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { HvIpInput } from '@havue/components'

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

<style lang="scss"></style>

Props

Property	Description	Type	Default
model-value / v-model	Bound value	string	"..."
disabled	Disable	boolean	false

Events

Event	Description	Payload
update:model-value	Fired when value changes	(value: string)

CSS variables

Variable	Description	Default
--hv-ip-input-width	Width of each segment input	30px

Supports pasting a full IP and keyboard navigation (arrow keys and dot) between segments.