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.

Input

First install and activate one skin. Core deliberately contains no visual token defaults.

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

Registry command

npx shadcn@latest add https://control-ui.dev/r/input.json

See registry manifest

Knobs

Typed custom properties the recipe paints with. Set one on the root — style, a utility class, or a skin — and every slot inherits it.

--cui-field-* · 8 knobsHow the cascade resolves

--cui-field-radius<length-percentage>var(--radius-control)

--cui-field-background*oklch(from var(--card) l c h / 0.72)

--cui-field-foreground<color>var(--foreground)

--cui-field-border-color<color>var(--border)

--cui-field-border-width<length>1px

--cui-field-shadow*var(--shadow-sm)

--cui-field-backdrop-filter*blur(0px)

--cui-field-focus-border-color<color>var(--border)

Installed dependencies

Support files installed with this primitive — shared ones arrive once with your first Control UI component. Public dependencies stay linked to their own pages.

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

Raw code

This primitive's source and the support files it installs with

src/registry/sources/control-ui/ui/input.tsx

"use client";

import { Input as InputPrimitive } from "@base-ui/react/input";

import type { ComponentProps, CSSProperties } from "react";

import type { ControlSize } from "@/components/control-ui/control-variants";

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

import type { FieldKnobStyle } from "@/components/control-ui/knob-contracts/field-knobs";

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

export type InputProps = Omit<Omit<ComponentProps<"input">, "size">, "style"> & { style?: CSSProperties & FieldKnobStyle } & {

size?: ControlSize;

};

export function Input({ size = "md", className, ...props }: InputProps) {

return (

<InputPrimitive

data-control-ui="input"

data-slot="root"

data-control-family="field"

data-control="true"

data-size={size}

className={cn("w-full min-w-0", controlSize({ size }), className)}

{...props}

/>

);

}