Primitives
Input
Text field primitive sized and styled to match other controls.
Composition
The preferred shape for composing the installed primitive from its exported parts.
Root
Single-slot surface with no nested parts.
InputThe refined source installs this primitive from src/registry/sources/refined/ui/input.tsx. Install it on its own with the command above, or inspect the source below.
npx shadcn@latest add http://127.0.0.1:3000/r/refined/input.jsonInstalled dependencies
Installed with this primitive because the slot depends on them; they are support files, not standalone sidebar items.
Control variants
src/registry/sources/refined/control-variants.tsSupportRaw code
Primary installed primitive source
Base UI Input slot
src/registry/sources/refined/ui/input.tsx
"use client";import { Input as InputPrimitive } from "@base-ui/react/input";import type { InputProps } 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, 100% Base UI Input: auto-wires to Field via `FieldControl render={<Input/>}`.// Publishes data-[invalid]/-valid/-filled/-focused — data-[invalid] ring below driven by that, zero JS.// Shares --radius-control + controlSize w/ Button/Select/Menu; addon+field wrapper is separate slot (ui/input-group).const fieldClasses = "rounded-[var(--radius-control)] border bg-card/72 text-foreground shadow-sm outline-none transition placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-foreground/20 disabled:cursor-not-allowed disabled:opacity-50 data-[invalid]:ring-2 data-[invalid]:ring-destructive";export function Input({ size = "md", className, ...props }: InputProps) { return ( <InputPrimitive data-ui="agent" data-slot="input" data-size={size} className={cn("w-full min-w-0", fieldClasses, controlSize({ size }), skinSlot("input", { size }), className)} {...props} /> );}