Glassy UI
Browse docsInput

Controls

Glass Input

Glass text input with label and hint affordances.

Preview

Release demos ready. Update 0.

Installation

First add the exact @glassyui mapping to components.json as shown in Getting Started. Then run the pinned item command:

Install Glass Input

pnpm dlx [email protected] add @glassyui/glass-input

Direct registry declarations

These values belong to @glassyui/glass-input itself in registry.json.

Package dependencies

  • clsx

Registry dependencies

  • @glassyui/glass-provider

File targets

  • components/glassyui/glass-input.tsx

Complete installed closure

This follows every namespaced registry dependency recursively and de-duplicates the packages and target files installed with this item.

Package dependencies

  • clsx

Installed files

  • components/glassyui/glass-input.tsx
  • components/glassyui/glass-provider.tsx
  • components/glassyui/liquid-filters.tsx
  • components/glassyui/lib/preferences.ts
  • components/glassyui/styles/liquid.css

Usage

Usage

import { GlassInput } from "@/components/glassyui/glass-input";

export function InputDemo() {
  return <GlassInput label="Project" placeholder="Glassy UI" hint="Visible over glass." />;
}

Examples

Email input

<GlassInput
  type="email"
  label="Email"
  placeholder="[email protected]"
  hint="Used for registry updates."
/>

API

GlassInput

Forward-ref native input with optional label and hint.

GlassInputProps

Native input props plus label and hint options.

label

Optional visible label rendered above the input.

hint

Optional helper text rendered below the input.

type

Native input type. Defaults to text.

Notes

Accessibility

Keep the Radix-backed semantics intact and preserve visible labels, focus states, and keyboard operation when copying the source.

Performance

Use provider quality preferences for dense app screens. Reserve strong refraction for hero or showcase surfaces.