Primitives

Input group

Joined input wrapper for addons, icons, and focus-within rings.

Addon + field

⌘K

asChild — the group renders as a button

Composition

The preferred shape for composing the installed primitive from its exported parts.

Parts

Exported compound parts from the installed source.

InputGroup

├── InputGroupAddon

└── InputGroupInput

The refined source installs this primitive from src/registry/sources/refined/ui/input-group.tsx. Install it on its own with the command above, or inspect the source below.

Registry command

npx shadcn@latest add http://127.0.0.1:3000/r/refined/input-group.json

See registry manifest

Installed dependencies

Installed with this primitive because the slot depends on them; they are support files, not standalone sidebar items.

Control variantssrc/registry/sources/refined/control-variants.tsSupport

Raw code

Primary installed primitive source

Input group slot

src/registry/sources/refined/ui/input-group.tsx

import type { ComponentProps } from "react";

import { cloneElement, isValidElement } from "react";

import type { InputGroupAddonProps, InputGroupProps } from "@/components/refined-ui/contracts";

import { controlSize } from "@/components/refined-ui/control-variants";

import { cn } from "@/components/refined-ui/lib/cn";

import { skinSlot } from "@/components/refined-ui/skin";

// Refined skin slot: InputGroup = addon+field as one control, shares --radius-control/controlSize w/ Input/Button/Select.

// Focus ring lifts on focus-within so group reads as single field.

// asChild renders consumer element (e.g. button) AS the group, no Radix Slot — keeps skin free of host primitives.

const inputGroupSlotAttrs = { "data-ui": "agent", "data-slot": "input-group" } as const;

export function InputGroup({ size = "md", className, asChild = false, children, ...props }: InputGroupProps) {

const classes = cn(

    "flex min-w-0 w-full items-center overflow-hidden rounded-[var(--radius-control)] border bg-card/72 text-foreground shadow-sm outline-none transition focus-within:ring-2 focus-within:ring-foreground/20",

controlSize({ size }),

skinSlot("input-group", { size }),

className,

);

if (asChild && isValidElement<{ className?: string }>(children)) {

const child = children;

const groupAttrs = { ...inputGroupSlotAttrs, "data-size": size };

return cloneElement(child, {

...groupAttrs,

...props,

className: cn(classes, child.props.className),

});

}

return (

<div data-ui="agent" data-slot="input-group" data-size={size} className={classes} {...props}>

{children}

</div>

);

}

export function InputGroupAddon({ className, ...props }: InputGroupAddonProps) {

return (

<span

data-ui="agent"

data-slot="input-group-addon"

      className={cn("inline-flex shrink-0 items-center text-muted-foreground", skinSlot("input-group-addon", {}), className)}

{...props}

/>

);

}

export function InputGroupInput({ className, ...props }: ComponentProps<"input">) {

return (

<input

data-ui="agent"

data-slot="input-group-input"

className={cn(

        "h-full min-w-0 flex-1 bg-transparent text-foreground outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",

skinSlot("input-group-input", {}),

className,

)}

{...props}

/>

);

}

Refined UI

Input group

Composition

Parts

Installed dependencies

Raw code