Menu

Component · controls

Liquid glass input

Text entry.

Text inputs showing an error, helper text, multiline entry and verification-code boxes over a procedural backdrop.

Copy the prompt

Free

The rules, the spec, the glass code for Web and the checks, in one text.

Works in any AI that can write code.

Or connect your AI once
Material
regular trough (slightly darker than surrounding glass) · OTP: one rim/lens tile per digit
Profile
bevel
Bezel (px)
10–12 (= radius) · OTP 10
Displacement (px)
0.4 × bezel (4–5) · OTP rim 0.15 × bezel
Blur (px)
1–2

Geometry. height 36–44, radius 10–12 (or capsule), padding-x 12; label above 12–13 semibold; OTP slots 36–44 square, radius 10, gap 8

Rules2
  • A fieldset container stays clear; each field is its own glass.
  • Inside a dialog the field is a flat trough, not a second lens.
Anatomy4
  • glass trough
  • placeholder secondary colour
  • text primary
  • helper text below
States4
  • rest
  • focus: 2 px accent ring
  • error: red ring + helper
  • disabled

Questions

What material is a liquid glass input?

Regular trough (slightly darker than surrounding glass) · OTP: one rim/lens tile per digit material with a bevel edge profile, in the controls layer. Text entry.

How big is a liquid glass input?

Height 36–44, radius 10–12 (or capsule), padding-x 12; label above 12–13 semibold; OTP slots 36–44 square, radius 10, gap 8.

What bezel, displacement and blur does it use?

Bezel 10–12 (= radius) · OTP 10; displacement 0.4 × bezel (4–5) · OTP rim 0.15 × bezel; blur 1–2 (px).

Which states does a liquid glass input need?

Rest; focus: 2 px accent ring; error: red ring + helper; disabled.