Input

Overview

The AnimatedInput component provides a rich collection of animated input fields with various effects and styles. Each variant offers unique animations for both the input field and its label, creating engaging user interactions.

Preview

Preview

Type something...

Code

import { AnimatedInput } from './components/ui';
import { useState } from 'react';

function InputDemo() {
  const [value, setValue] = useState('');
  
  return (
    <AnimatedInput
      placeholder="Type something..."
      variant="clean"
      value={value}
      onChange={setValue}
    />
  );
}

Installation

npm

npx @mindfiredigital/ignix-ui add input

yarn

yarn @mindfiredigital/ignix-ui add input

pnpm

pnpm @mindfiredigital/ignix-ui add input

Usage

Import the component:

import { AnimatedInput } from './components/ui';

Basic Usage

function BasicInput() {
  const [value, setValue] = useState('');
  
  return (
    <AnimatedInput
      placeholder="Enter your name"
      variant="clean"
      value={value}
      onChange={(newValue) => setValue(newValue)}
    />
  );
}

Variants

Preview

Type something...

Code

import AnimatedInput from '@ignix-ui/input';

<AnimatedInput
  placeholder="Type something..."
  variant="clean"
  value={value}
  onChange={setValue}
/>