Input Group
Text entry with an icon or other adornment.
Upstream documentationExamples
https://
Installation
Run the Ninaero registry command to install the component and its dependencies, including shared theme styles.
Install Input Group
pnpm dlx shadcn@latest add 'https://ninaero.pages.dev/r/input-group.json'Usage
A complete example using the installed component and hook paths.
Input Group usage
"use client";import { useId } from "react";import { InputGroup, InputGroupAddon, InputGroupInput } from "@/components/ui/input-group";import { Label } from "@/components/ui/label";function InputGroupPreview() { const id = useId(); return ( <div className="w-full max-w-64 space-y-2"> <Label htmlFor={id}>Website</Label> <InputGroup> <InputGroupInput id={id} placeholder="example.com" /> <InputGroupAddon>https://</InputGroupAddon> </InputGroup> </div> );}export default function Demo() { return <InputGroupPreview />;}API Reference
Ninaero exports and local defaults are listed below. See the upstream reference for inherited primitive props and additional composition examples.
InputGroup
InputGroup props
React.ComponentProps<"div">InputGroupAddon
InputGroupAddon props
React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>- align
- "inline-start"
InputGroupButton
InputGroupButton props
Omit<React.ComponentProps<typeof Button>, "size" | "type"> & VariantProps<typeof inputGroupButtonVariants> & { type?: "button" | "submit" | "reset"; }- type
- "button"
- variant
- "ghost"
- size
- "xs"
InputGroupText
InputGroupText props
React.ComponentProps<"span">InputGroupInput
InputGroupInput props
React.ComponentProps<"input">InputGroupTextarea
InputGroupTextarea props
React.ComponentProps<"textarea">