/

Network address Recipes

On this page

Use mask expression to create inputs for network addresses such as IPv6, IPv4, and MAC.

IPv6

This example demonstrates how to create an IPv6 address input via pattern mask expression with fixed colon separators. A postprocessor converts all characters to lowercase. 
    
      
    

      
      
    

  
    
      [object Object]
    

      
      
    

  
    
      import {Maskito, MaskitoOptions} from '@maskito/core';
import maskitoOptions from './mask';

const element = document.querySelector('input,textarea')!;
const maskedInput = new Maskito(element, maskitoOptions);

// Call this function when the element is detached from DOM
maskedInput.destroy();
    

      
      
    

  
    
      import {Component} from '@angular/core';
import {MaskitoDirective} from '@maskito/angular';
import type {MaskitoOptions} from '@maskito/core';

import mask from './mask';

@Component({
  selector: 'my-app',
  imports: [MaskitoDirective],
  template: '<input [maskito]="options" />',
})
export class App {
  readonly options: MaskitoOptions = mask;
}
    

      
      
    

  
    
      import * as React from 'react';
import {useMaskito} from '@maskito/react';

import options from './mask';

export default function App() {
  const maskedInputRef = useMaskito({options});

  return <input ref={maskedInputRef} />;
}
    

      
      
    

  
    
      import {createApp} from 'vue';
import {maskito} from '@maskito/vue';

import options from './mask';

const app = createApp({
  template: '<input v-maskito="options" />',
  directives: {maskito},
  data: () => ({ options }),
});

IPv4

This example demonstrates how to create an IPv4 address input via dynamic mask expression. It creates up to 4 octets separated by dots. Each octet allows up to 3 digits. A postprocessor clamps each octet value to a maximum of 255. 
    
      
    

      
      
    

  
    
      [object Object]
    

      
      
    

  
    
      import {Maskito, MaskitoOptions} from '@maskito/core';
import maskitoOptions from './mask';

const element = document.querySelector('input,textarea')!;
const maskedInput = new Maskito(element, maskitoOptions);

// Call this function when the element is detached from DOM
maskedInput.destroy();
    

      
      
    

  
    
      import {Component} from '@angular/core';
import {MaskitoDirective} from '@maskito/angular';
import type {MaskitoOptions} from '@maskito/core';

import mask from './mask';

@Component({
  selector: 'my-app',
  imports: [MaskitoDirective],
  template: '<input [maskito]="options" />',
})
export class App {
  readonly options: MaskitoOptions = mask;
}
    

      
      
    

  
    
      import * as React from 'react';
import {useMaskito} from '@maskito/react';

import options from './mask';

export default function App() {
  const maskedInputRef = useMaskito({options});

  return <input ref={maskedInputRef} />;
}
    

      
      
    

  
    
      import {createApp} from 'vue';
import {maskito} from '@maskito/vue';

import options from './mask';

const app = createApp({
  template: '<input v-maskito="options" />',
  directives: {maskito},
  data: () => ({ options }),
});

MAC

This example demonstrates how to create a MAC address input via pattern mask expression with fixed colon separators. A postprocessor converts all characters to uppercase. 
    
      
    

      
      
    

  
    
      [object Object]
    

      
      
    

  
    
      import {Maskito, MaskitoOptions} from '@maskito/core';
import maskitoOptions from './mask';

const element = document.querySelector('input,textarea')!;
const maskedInput = new Maskito(element, maskitoOptions);

// Call this function when the element is detached from DOM
maskedInput.destroy();
    

      
      
    

  
    
      import {Component} from '@angular/core';
import {MaskitoDirective} from '@maskito/angular';
import type {MaskitoOptions} from '@maskito/core';

import mask from './mask';

@Component({
  selector: 'my-app',
  imports: [MaskitoDirective],
  template: '<input [maskito]="options" />',
})
export class App {
  readonly options: MaskitoOptions = mask;
}
    

      
      
    

  
    
      import * as React from 'react';
import {useMaskito} from '@maskito/react';

import options from './mask';

export default function App() {
  const maskedInputRef = useMaskito({options});

  return <input ref={maskedInputRef} />;
}
    

      
      
    

  
    
      import {createApp} from 'vue';
import {maskito} from '@maskito/vue';

import options from './mask';

const app = createApp({
  template: '<input v-maskito="options" />',
  directives: {maskito},
  data: () => ({ options }),
});