Action Input

The Action Input component is a compact and interactive action input, ideal for responsive navigation. It offers a toggleable design with smooth animations, making it a versatile choice for modern web applications.

Usage

Follow the steps below to add the Action Input Component to your project.

Add the import statement for the component

import ActionInput from "@/components/elixir-ui/action-input";

Import the component in your project and use it

<div className="w-full max-w-80">
  <ActionInput
    type="email"
    placeholder="Email"
    className="border-primary-text-color/15 text-light text-primary-text-color/70 w-full rounded-full border bg-zinc-900/1 px-5 py-5 pr-5 shadow-none focus-visible:ring-0 focus-visible:ring-offset-0"
    rightIconRotate={true}
    rightIcon={
      <FaArrowRight className="mr-1 h-7 w-7 rounded-full bg-zinc-900 p-2 text-zinc-100 dark:bg-zinc-100 dark:text-zinc-900" />
    }
  />
</div>

Props

Prop	Type	Default	Description
placeholder	string	-	The placeholder of the input
leftIcon	ReactNode	-	The left icon of the input
leftIconRotate	boolean	false	The rotation of the left icon
rightIcon	ReactNode	-	The right icon of the input
rightIconRotate	boolean	true	The rotation of the right icon
className	string	-	Additional CSS classes