Snb-react-input-type NPM

React Text Input Plus

Input for text type inputs (ie: text, email, password, search, tel, month, week, date, time, etc)

A simple component for adding accessible inputs with animated labels.

Demo

Code

<DualInput
    type="text"
    name="addTask"
    role="textbox"
    label="Add Task"
    altType="search"
    altName="searchTerm"
    altRole="search"
    altLabel="Search Tasks"
    leftIcon={<BsPencil />}
    leftAltIcon={<BsSearch />}
    rightIcon={<RiAddLine />}
    onChange={e => console.log(e.target.value)}
  />
  <Input
    type="text"
    name="username"
    role="textbox"
    label="Name"
    icon={<FaUser />}
    onChange={e => console.log(e.target.value)}
  />
  <Input
    type="email"
    name="email"
    label="Email"
    icon={<MdEmail />}
    onChange={e => console.log(e.target.value)}
  />
  <Input
    type="password"
    name="password"
    label="Password"
    icon={<RiLockPasswordFill />}
    onChange={e => console.log(e.target.value)}
  />