// input

Input

A glass field. The backdrop stays legible behind your text.

// install

npx shadcn add @vsrc/input

Props

Only the vsrc surface is documented here. Everything else passes through to the underlying element.

// Input

prop	type	default	notes
glass	"subtle" \| "regular" \| "heavy" \| LiquidGlassOptions \| false	—	Optics override for the field. A preset name replaces the tuned values, an object merges over them, `false` disables refraction entirely.

Optics

INPUT_OPTICS: scale −40, chroma 3, border 0.18, mapBlur 6, blur 2 — gentler than button; a text field's content is denser than a label, so the interior must stay stiller.

Accessibility

A native input — pair it with a visible label or aria-label.
Text sits in the calm interior; the edge band does the bending, so legibility never fights the effect.
Visible focus-visible ring.

Source

The exact file the CLI copies into your project — you own it after install.

// registry/vsrc/ui/input.tsx

"use client";

import * as React from "react";
import { useLiquidGlass, mergeGlass, type GlassPreset, type LiquidGlassOptions } from "vsrc/react";

import { glassMaterial } from "@/registry/vsrc/ui/glass-surface";
import { cn } from "@/lib/utils";

const INPUT_OPTICS: LiquidGlassOptions = {
  scale: -40,
  chroma: 3,
  border: 0.18,
  mapBlur: 6,
  blur: 2,
  saturate: 1.3,
  fallbackBlur: 2,
};

function Input({
  className,
  glass,
  ref,
  ...props
}: React.ComponentProps<"input"> & { glass?: LiquidGlassOptions | GlassPreset | false }) {
  const [node, setNode] = React.useState<HTMLInputElement | null>(null);
  useLiquidGlass(node, mergeGlass(INPUT_OPTICS, glass));
  const composedRef = React.useCallback(
    (element: HTMLInputElement | null) => {
      setNode(element);
      if (typeof ref === "function") ref(element);
      else if (ref) ref.current = element;
    },
    [ref],
  );
  return (
    <input
      ref={composedRef}
      data-slot="input"
      className={cn(
        glassMaterial,
        "h-10 w-full min-w-0 rounded-full px-4 text-sm text-foreground",
        "placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground",
        "transition-[border-color] outline-none focus-visible:border-foreground/50",
        "disabled:pointer-events-none disabled:opacity-50",
        className,
      )}
      {...props}
    />
  );
}

export { Input };