Floating Field

Features

• Bare centered text input with a small on-brand title group — no panel card or extra chrome
• Floating label rests inside the field and rises to the top-left on focus or when the field holds text
• Label float is pure CSS via the placeholder-shown trick — it works even before JavaScript loads
• Focus paints the border with the brand two-color gradient using a dual-background padding-box/border-box technique
• Focus is signalled by the gradient border change alone — no glow or halo ring
• Floated label uses a solid, contrast-safe accent derived from the active design system
• JavaScript mirrors the filled state onto a ffd-inp--filled wrapper class for styling robustness
• Escape clears the field and resyncs the filled state
• Dark and light themes flip the gradient (pink→blue light, violet→teal dark)
• Responsive layout that adapts down to 320px
• Fully respects prefers-reduced-motion

Accessibility

Programmatic label

Native <label for="agent-name"> bound to the text input

CSS-only float

Label float uses :placeholder-shown, so state is conveyed without JS

Visible focus

The two-color gradient border appears on focus in place of the removed native outline

Theme toggle

role="switch" with aria-checked toggled by JS, Enter/Space activation

Focus indicators

Global :focus-visible outline with the --ring token

Reduced motion

prefers-reduced-motion: reduce disables all animations

Customise it with AI

Open Floating Field in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the input is regenerated against your tokens. Take the HTML, CSS, JS and React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.