Input Button

Animated button that transforms into an input field with smooth layout transitions. Perfect for React applications requiring dynamic form interactions with Next.js integration and TypeScript support.

Motion

Lucide React

Loading component...

'use client'; import * as React from 'react';import {  AnimatePresence,  HTMLMotionProps,  motion,  Transition,} from 'motion/react';import { ArrowRight } from 'lucide-react';import { cn } from '@/lib/utils'; type InputButtonContextType = {  showInput: boolean;  setShowInput: React.Dispatch<React.SetStateAction<boolean>>;  transition: Transition;  id: string;};const InputButtonContext = React.createContext<  InputButtonContextType | undefined>(undefined); const useInputButton = (): InputButtonContextType => {  const context = React.useContext(InputButtonContext);  if (!context) {    throw new Error('useInputButton must be used within a InputButton');  }  return context;}; type InputButtonProviderProps = React.ComponentProps<'div'> &  Partial<InputButtonContextType>; function InputButtonProvider({  className,  transition = { type: 'spring', stiffness: 300, damping: 20 },  showInput,  setShowInput,  id,  children,  ...props}: InputButtonProviderProps) {  const localId = React.useId();  const [localShowInput, setLocalShowInput] = React.useState(false);   return (    <InputButtonContext.Provider      value={{        showInput: showInput ?? localShowInput,        setShowInput: setShowInput ?? setLocalShowInput,        transition,        id: id ?? localId,      }}    >      <div        data-slot="input-button-provider"        className={cn(          'relative w-fit flex items-center justify-center h-10',          (showInput || localShowInput) && 'w-full max-w-[400px]',          className,        )}        {...props}      >        {children}      </div>    </InputButtonContext.Provider>  );} type InputButtonProps = HTMLMotionProps<'div'>; function InputButton({ className, ...props }: InputButtonProps) {  return (    <motion.div      data-slot="input-button"      className={cn('flex size-full', className)}      {...props}    />  );} type InputButtonActionProps = HTMLMotionProps<'button'>; function InputButtonAction({ className, ...props }: InputButtonActionProps) {  const { transition, setShowInput, id } = useInputButton();   return (    <motion.button      data-slot="input-button-action"      className={cn(        'bg-background text-sm whitespace-nowrap disabled:pointer-events-none disabled:opacity-50 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive rounded-full border text-background-foreground cursor-pointer pl-4 pr-12 size-full font-medium',        className,      )}      layoutId={`input-button-action-${id}`}      transition={transition}      onClick={() => setShowInput((prev) => !prev)}      {...props}    />  );} type InputButtonSubmitProps = HTMLMotionProps<'button'> & {  icon?: React.ElementType;}; function InputButtonSubmit({  className,  children,  icon: Icon = ArrowRight,  ...props}: InputButtonSubmitProps) {  const { transition, showInput, setShowInput, id } = useInputButton();   return (    <motion.button      data-slot="input-button-submit"      layoutId={`input-button-submit-${id}`}      transition={transition}      className={cn(        "z-[1] [&_svg:not([class*='size-'])]:size-4 cursor-pointer disabled:pointer-events-none  disabled:opacity-50 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap bg-primary hover:bg-primary/90 transition-colors text-primary-foreground rounded-full text-sm flex items-center justify-center font-medium absolute inset-y-1 right-1",        showInput ? 'px-4' : 'aspect-square',        className,      )}      onClick={() => setShowInput((prev) => !prev)}      {...props}    >      {showInput ? (        <motion.span          key="show-button"          initial={{ opacity: 0, scale: 0 }}          animate={{ opacity: 1, scale: 1 }}          transition={{ duration: 0.2 }}        >          {children}        </motion.span>      ) : (        <motion.span          key="show-icon"          initial={{ opacity: 0, scale: 0 }}          animate={{ opacity: 1, scale: 1 }}          transition={{ duration: 0.2 }}        >          <Icon className="size-4" />        </motion.span>      )}    </motion.button>  );} type InputButtonInputProps = React.ComponentProps<'input'>; function InputButtonInput({ className, ...props }: InputButtonInputProps) {  const { transition, showInput, id } = useInputButton();   return (    <AnimatePresence>      {showInput && (        <div className="absolute inset-0 size-full flex items-center justify-center">          <motion.div            layoutId={`input-button-input-${id}`}            className="size-full flex items-center bg-background rounded-full relative"            transition={transition}          >            <input              data-slot="input-button-input"              className={cn(                'size-full selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground inset-0 pl-4 focus-visible:border-ring border focus-visible:ring-ring/50 focus-visible:ring-[3px] pr-32 py-2 text-sm bg-background rounded-full focus:outline-none absolute shrink-0 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive disabled:pointer-events-none disabled:cursor-not-allowed',                className,              )}              {...props}            />          </motion.div>        </div>      )}    </AnimatePresence>  );} export {  InputButton,  InputButtonProvider,  InputButtonAction,  InputButtonSubmit,  InputButtonInput,  useInputButton,  type InputButtonProps,  type InputButtonProviderProps,  type InputButtonActionProps,  type InputButtonSubmitProps,  type InputButtonInputProps,};

Installation

npx shadcn@latest add https://www.shadcn.io/registry/input-button.json

npx shadcn@latest add https://www.shadcn.io/registry/input-button.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/input-button.json

bunx shadcn@latest add https://www.shadcn.io/registry/input-button.json

Features

Smooth layout transitions using Motion's layoutId for seamless button-to-input morphing
Compound component pattern with provider, action, submit, and input components
Loading state handling with built-in pending states and success feedback
Accessible form integration supporting proper form submission and validation
TypeScript support with complete interface definitions for all sub-components
shadcn/ui integration using design tokens and consistent styling patterns

Examples

Loading States

Loading component...

'use client'; import * as React from 'react';import {  InputButton,  InputButtonAction,  InputButtonProvider,  InputButtonSubmit,  InputButtonInput,} from '@/components/ui/shadcn-io/input-button';import { Check, Loader2 } from 'lucide-react';import { motion } from 'motion/react'; const sleep = (ms: number) => new Promise((r) => setTimeout(r, ms)); export const InputButtonLoadingDemo = () => {  const [showInput, setShowInput] = React.useState(false);  const [pending, startTransition] = React.useTransition();  const [success, setSuccess] = React.useState(false);  const [value, setValue] = React.useState('');   const handleSubmit = React.useCallback(    (e: React.FormEvent<HTMLFormElement>) => {      e.preventDefault();       if (!showInput) {        setShowInput(true);        return;      }       startTransition(async () => {        await sleep(2000);        setSuccess(true);        await sleep(2000);        setSuccess(false);        setShowInput(false);        setValue('');      });    },    [showInput, setShowInput, setSuccess, setValue],  );   return (    <form      onSubmit={handleSubmit}      className="w-full flex items-center justify-center"    >      <InputButtonProvider showInput={showInput} setShowInput={setShowInput}>        <InputButton>          <InputButtonAction onClick={() => {}}>            Join the newsletter          </InputButtonAction>          <InputButtonSubmit            onClick={() => {}}            type="submit"            disabled={pending}            className={pending || success ? 'aspect-square px-0' : ''}          >            {success ? (              <motion.span                key="success"                initial={{ opacity: 0, scale: 0 }}                animate={{ opacity: 1, scale: 1 }}                transition={{ duration: 0.2 }}              >                <Check />              </motion.span>            ) : pending ? (              <motion.span                key="pending"                initial={{ opacity: 0, scale: 0 }}                animate={{ opacity: 1, scale: 1 }}                transition={{ duration: 0.2 }}              >                <Loader2 className="animate-spin" />              </motion.span>            ) : (              'Subscribe'            )}          </InputButtonSubmit>        </InputButton>        <InputButtonInput          type="email"          placeholder="[email protected]"          value={value}          onChange={(e) => setValue(e.target.value)}          disabled={pending}          autoFocus        />      </InputButtonProvider>    </form>  );};export default InputButtonLoadingDemo;

'use client'; import * as React from 'react';import {  AnimatePresence,  HTMLMotionProps,  motion,  Transition,} from 'motion/react';import { ArrowRight } from 'lucide-react';import { cn } from '@/lib/utils'; type InputButtonContextType = {  showInput: boolean;  setShowInput: React.Dispatch<React.SetStateAction<boolean>>;  transition: Transition;  id: string;};const InputButtonContext = React.createContext<  InputButtonContextType | undefined>(undefined); const useInputButton = (): InputButtonContextType => {  const context = React.useContext(InputButtonContext);  if (!context) {    throw new Error('useInputButton must be used within a InputButton');  }  return context;}; type InputButtonProviderProps = React.ComponentProps<'div'> &  Partial<InputButtonContextType>; function InputButtonProvider({  className,  transition = { type: 'spring', stiffness: 300, damping: 20 },  showInput,  setShowInput,  id,  children,  ...props}: InputButtonProviderProps) {  const localId = React.useId();  const [localShowInput, setLocalShowInput] = React.useState(false);   return (    <InputButtonContext.Provider      value={{        showInput: showInput ?? localShowInput,        setShowInput: setShowInput ?? setLocalShowInput,        transition,        id: id ?? localId,      }}    >      <div        data-slot="input-button-provider"        className={cn(          'relative w-fit flex items-center justify-center h-10',          (showInput || localShowInput) && 'w-full max-w-[400px]',          className,        )}        {...props}      >        {children}      </div>    </InputButtonContext.Provider>  );} type InputButtonProps = HTMLMotionProps<'div'>; function InputButton({ className, ...props }: InputButtonProps) {  return (    <motion.div      data-slot="input-button"      className={cn('flex size-full', className)}      {...props}    />  );} type InputButtonActionProps = HTMLMotionProps<'button'>; function InputButtonAction({ className, ...props }: InputButtonActionProps) {  const { transition, setShowInput, id } = useInputButton();   return (    <motion.button      data-slot="input-button-action"      className={cn(        'bg-background text-sm whitespace-nowrap disabled:pointer-events-none disabled:opacity-50 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive rounded-full border text-background-foreground cursor-pointer pl-4 pr-12 size-full font-medium',        className,      )}      layoutId={`input-button-action-${id}`}      transition={transition}      onClick={() => setShowInput((prev) => !prev)}      {...props}    />  );} type InputButtonSubmitProps = HTMLMotionProps<'button'> & {  icon?: React.ElementType;}; function InputButtonSubmit({  className,  children,  icon: Icon = ArrowRight,  ...props}: InputButtonSubmitProps) {  const { transition, showInput, setShowInput, id } = useInputButton();   return (    <motion.button      data-slot="input-button-submit"      layoutId={`input-button-submit-${id}`}      transition={transition}      className={cn(        "z-[1] [&_svg:not([class*='size-'])]:size-4 cursor-pointer disabled:pointer-events-none  disabled:opacity-50 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap bg-primary hover:bg-primary/90 transition-colors text-primary-foreground rounded-full text-sm flex items-center justify-center font-medium absolute inset-y-1 right-1",        showInput ? 'px-4' : 'aspect-square',        className,      )}      onClick={() => setShowInput((prev) => !prev)}      {...props}    >      {showInput ? (        <motion.span          key="show-button"          initial={{ opacity: 0, scale: 0 }}          animate={{ opacity: 1, scale: 1 }}          transition={{ duration: 0.2 }}        >          {children}        </motion.span>      ) : (        <motion.span          key="show-icon"          initial={{ opacity: 0, scale: 0 }}          animate={{ opacity: 1, scale: 1 }}          transition={{ duration: 0.2 }}        >          <Icon className="size-4" />        </motion.span>      )}    </motion.button>  );} type InputButtonInputProps = React.ComponentProps<'input'>; function InputButtonInput({ className, ...props }: InputButtonInputProps) {  const { transition, showInput, id } = useInputButton();   return (    <AnimatePresence>      {showInput && (        <div className="absolute inset-0 size-full flex items-center justify-center">          <motion.div            layoutId={`input-button-input-${id}`}            className="size-full flex items-center bg-background rounded-full relative"            transition={transition}          >            <input              data-slot="input-button-input"              className={cn(                'size-full selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground inset-0 pl-4 focus-visible:border-ring border focus-visible:ring-ring/50 focus-visible:ring-[3px] pr-32 py-2 text-sm bg-background rounded-full focus:outline-none absolute shrink-0 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive disabled:pointer-events-none disabled:cursor-not-allowed',                className,              )}              {...props}            />          </motion.div>        </div>      )}    </AnimatePresence>  );} export {  InputButton,  InputButtonProvider,  InputButtonAction,  InputButtonSubmit,  InputButtonInput,  useInputButton,  type InputButtonProps,  type InputButtonProviderProps,  type InputButtonActionProps,  type InputButtonSubmitProps,  type InputButtonInputProps,};

Demonstrates form submission with loading indicators and success states.

Use Cases

This free open source React component works well for:

Newsletter signups - Email collection with smooth interaction flow built with Next.js
Search interfaces - Expandable search boxes using TypeScript and Tailwind CSS
Quick actions - Compact forms that expand on demand for better UX
CTA buttons - Call-to-action elements that transform into input forms

API Reference

InputButtonProvider

Prop	Type	Default	Description
`showInput`	`boolean`	`false`	Controls input visibility state
`setShowInput`	`function`	-	State setter for input visibility
`transition`	`Transition`	`{ type: 'spring', stiffness: 300, damping: 20 }`	Motion transition configuration
`id`	`string`	`useId()`	Unique identifier for layout animations

InputButtonAction

Prop	Type	Default	Description
`onClick`	`function`	-	Click handler for button action
`children`	`ReactNode`	required	Button text content

InputButtonSubmit

Prop	Type	Default	Description
`icon`	`React.ElementType`	`ArrowRight`	Icon component for collapsed state
`children`	`ReactNode`	-	Submit button text content
`disabled`	`boolean`	`false`	Disables the submit button

InputButtonInput

Prop	Type	Default	Description
`type`	`string`	`"text"`	HTML input type attribute
`placeholder`	`string`	-	Input placeholder text
`value`	`string`	-	Controlled input value
`onChange`	`function`	-	Input change handler

Implementation Notes

Uses compound component pattern with context for state management
Layout animations powered by Motion's layoutId system
Automatic focus management when input appears
Supports both controlled and uncontrolled usage patterns
Compatible with shadcn/ui form components and validation
Optimized for keyboard navigation and screen readers

Reactinput-button

Reactinput-button

On this page