Neumorphism UI

Input Group

Use InputGroup when an input needs an attached icon, unit, or action in one shared surface.

Preview

Search, website, and message groups

Compare a search field with an icon and button, a website prefix, and a multiline message field with a send button.

https://

Installation

New to this Registry? Complete the base setup before continuing.

npx shadcn@latest add @neumorphism-ui/input-group

Install the shared base once, then add components and their dependencies with the CLI.

Search, website, and message groups

npx shadcn@latest add @neumorphism-ui/input-group @neumorphism-ui/label
Registry JSON

Usage

Place InputGroupInput or InputGroupTextarea beside the needed addons and buttons. Label the actual control and set attached action buttons to type button unless they submit the form.

"use client";

import { useId } from "react";
import { InputGroup, InputGroupAddon, InputGroupInput } from "@/components/ui/input-group";
import { Label } from "@/components/ui/label";

export default function Example() {
  const id = useId();
  return (
    <div className="grid gap-2">
      <Label htmlFor={id}>Amount in US dollars</Label>
      <InputGroup>
        <InputGroupAddon aria-hidden="true">$</InputGroupAddon>
        <InputGroupInput id={id} name="amount" inputMode="decimal" placeholder="0.00" />
      </InputGroup>
    </div>
  );
}

API Reference

Combines InputGroupInput or InputGroupTextarea with leading or trailing addons, supporting text, and buttons. The root focus-within state gives the entire group one focus treatment.

ComponentPropTypeDefaultDescription
InputGroupchildrenrequiredReact.ReactNode—Arranges controls, addons, text, and buttons in sequence.
InputGrouparia-label / aria-labelledbystring—Provides an accessible name for the whole role=group when needed.
InputGroupInputnative input propsReact.ComponentProps<"input">—Native attributes such as id, name, type, value, and onChange.
InputGroupTextareanative textarea propsReact.ComponentProps<"textarea">—Native attributes for the multiline control.
InputGroupButtontype"button" | "submit" | "reset""button"The button type for the group action.

Accessibility

  • 01

    The root role=group does not name the input, so connect the control itself to Label.

  • 02

    Hide purely decorative addons with aria-hidden=true, but leave meaningful units and prefixes available to assistive technology.

  • 03

    Provide an aria-label for an icon-only InputGroupButton.