Playground · Inputs & forms

Glass Text Field

  • shader component
  • iOS
  • Android
  • Flutter 3.47.0+

A single-line text field on liquid glass: its label floats up as you type, the rim brightens and a soft accent glow eases in on focus, and a clear button fades in with your text.

Version 1.1.0 · What changed
  • 1.1.0 2026-10-06 The clear button's name is now an argument (clearLabel; it still follows the app's language when null). The clear button's tap area is 48 points, it takes keyboard focus with a visible ring and activates with Enter or Space.
  • 1.0.1 2026-10-03 In debug builds, a badge now names the shader when it fails to load and how to fix it.
  • 1.0.0 2026-10-02 First release.

Parameters

Shown inside the empty field, and above the text once it is focused or filled. Screen readers read it as the field's name.

The icon before the text.

The cursor, the focused label and the glow around the focused field.

The text, the label, the icon and the clear button.

How much the glass frosts what's behind it; more keeps the text readable over busy backgrounds.

How strongly the glass bends what's behind it near its edges, from flat to the most its rim can show.

How much of the tint colour shows in the glass.

How bright the lit edge of the glass is at rest. Focus brightens it further.

28 makes a pill at the standard height.

How strong the accent-coloured glow around the focused field is; 0 for none.

How much shadow the glass casts on what's below it.

Loading Preview…

Send to your coding agent

Add Sheen's MCP server once, then paste the prompt. No key or account needed.

Run in your project (Claude Code)
claude mcp add --transport http sheen https://sheen.ciroapps.com/api/mcp
Then ask your agent
Use the Sheen MCP server to add the Glass Text Field Component to this Flutter app. Call get_export with componentId "glass-text-field" and parameters {"label":"Email","icon":"mail","accentColor":"A594FF","textColor":"FFFFFF","blur":6,"refraction":0.7,"tint":"FFFFFF","tintStrength":0.1,"rim":0.7,"cornerRadius":16,"glow":0.6,"shadow":0.3}, then follow the install steps it returns. (Tuned in the Sheen Playground: https://sheen.ciroapps.com/c/glass-text-field?label=Email&icon=mail&accentColor=A594FF&textColor=FFFFFF&blur=6&refraction=0.7&tint=FFFFFF&tintStrength=0.1&rim=0.7&cornerRadius=16&glow=0.6&shadow=0.3)