AnimatedInput

An advanced animating component that displays a floating label styled input.

Demo

View AnimatedInput

API

Component takes all input related props given along with custom props below. If type="password" given, component will show a visibility toggle by default:

Example:

import { AnimatedInput, Button } from 'react-horcrux';

export default YourForm function() {
  return(
    <form onSubmit={doSomething}>
      <AnimatedInput
        barColor="blue"
        inputLabel="name"
        name="first_name"
        onChange={saveTheName}
        type="text"
      />
      <AnimatedInput
        barColor="blue"
        inputLabel="password"
        name="password"
        onChange={saveThePassword}
        type="password"
      />

      <Button type="submit">do it</Button>
    </form>
  );
}