Forms & selection@neumorphism-ui/input-group

Input Group

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.

@neumorphism-ui/input-group

Registry JSON

Preview

Website

https://

Message

Installation

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

The CLI resolves npm dependencies, base tokens, utilities, and component source in order.

New to this Registry? Set up the namespace before continuing.

Usage

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

Import

import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupInput,
  InputGroupText,
} from "@/components/ui/input-group"
import { Label } from "@/components/ui/label"

Example

<div className="grid gap-2">
  <Label htmlFor="workspace">Workspace</Label>
  <InputGroup>
    <InputGroupAddon aria-hidden="true"><svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><circle cx="11" cy="11" r="7" /><path d="m20 20-4-4" /></svg></InputGroupAddon>
    <InputGroupInput id="workspace" defaultValue="soft-interface" />
    <InputGroupButton type="button">Search</InputGroupButton>
  </InputGroup>
</div>

API Reference

Component	Prop	Type	Default	Description
`InputGroup`	`children`required	`React.ReactNode`	`—`	Arranges controls, addons, text, and buttons in sequence.
`InputGroup`	`aria-label / aria-labelledby`	`string`	`—`	Provides an accessible name for the whole role=group when needed.
`InputGroupInput`	`native input props`	`React.ComponentProps<"input">`	`—`	Native attributes such as id, name, type, value, and onChange.
`InputGroupTextarea`	`native textarea props`	`React.ComponentProps<"textarea">`	`—`	Native attributes for the multiline control.
`InputGroupButton`	`type`	`"button" \| "submit" \| "reset"`	`"button"`	The button type for the group action.