React Input Button

React input button that transforms into input field with smooth transitions. Framer Motion animations and compound patterns with TypeScript and shadcn/ui.

React

Framer Motion

Lucide React

Building expandable form interactions?

Join our Discord community for help from other developers.

Input forms are everywhere—newsletter signups, search bars, contact forms. But most are just static fields sitting there waiting. No interaction. No surprise. No delight. Meanwhile, users expect smooth micro-interactions that guide them through the flow. This React component gives you buttons that morph into inputs with perfect timing, spring physics, and accessibility baked in.

Button transforms into input field

Click to see the smooth layout transition from button to input with automatic focus:

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 }}        >          {React.createElement(Icon as React.ComponentType<any>, { 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,};

Built for React applications with TypeScript and Next.js. Uses compound component pattern for flexible composition. The layout transition uses Framer Motion's layoutId system for seamless morphing between states. Works with any form library—React Hook Form, Formik, or native validation. Perfect accessibility with proper focus management and keyboard navigation.

Why most input forms feel clunky

Developers just throw an input field on the page and call it done. Or they add a basic fade-in that feels disconnected from user intent. The problem? Users need clear affordances about what's interactive and what happens next. A button says "click me." An input field says "type here." This component bridges that gap.

The morphing animation isn't just pretty—it guides user attention. The spring physics feel natural, not robotic. The compound component pattern gives you full control over layout and styling while handling the complex state coordination behind the scenes.

Plus, the TypeScript definitions catch integration mistakes before runtime. Automatic focus management means users can immediately start typing. ARIA attributes ensure screen readers understand the state changes.

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 }}        >          {React.createElement(Icon as React.ComponentType<any>, { 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 perfectly 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
Contact forms - Progressive disclosure for complex form interactions
Survey inputs - Step-by-step question flows with guided transitions

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

Common gotchas

Layout shift prevention: The component uses layoutId for smooth transitions, but parent containers with changing widths can cause jumpy animations. Wrap in a container with fixed or min-width for best results.

Focus timing issues: The input receives focus automatically when it appears, but if you're conditionally rendering the entire component, focus might not work. Ensure the component stays mounted and only the input visibility changes.

Form validation conflicts: If using React Hook Form or similar, register the input field properly and handle the showInput state separately from form validation state. Don't tie validation errors directly to the visibility toggle.

Mobile keyboard behavior: On mobile, the keyboard appearing can shift the layout. Consider using viewport height units (vh) carefully or add handling for keyboard presence on touch devices.

Double submission prevention: The action button and submit button can both trigger form submission. Use the compound pattern correctly—action shows input, submit handles the actual form submission.

Animation performance: The layout animation creates reflow on every frame. On lower-end devices with many input buttons, consider reducing animation duration or using transform-based animations instead.

Explore other interactive button components for React applications:

React Input Button

Button transforms into input field

Why most input forms feel clunky

Installation

Features

Examples

Loading States

Use Cases

API Reference

InputButtonProvider

InputButtonAction

InputButtonSubmit

InputButtonInput

Common gotchas

You might also like

Copy Button

Icon Button

Flip Button

GitHub Stars Button

Questions developers actually ask

On this page

React Input Button