# Floating Field

> A bare token-driven text input with a floating "Agent Name" label that rests inside the field and rises above it on focus or when filled, a design-system focus border, and readable accent label text in light and dark.

- Category: Input
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Design system: Odyssey
- Dark mode: yes
- Access: premium (Atheros AI Pass)
- Page: https://builder.atheros.ai/components/floating-field
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_floating_field/preview-4d6d9c01b84e.webp

## 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

## Keyboard shortcuts

- `Escape` — Clear the field while it is focused
- `Enter` — Activate the focused theme toggle
- `Space` — Activate the focused theme toggle
- `Tab` — Move focus between the theme toggle and the field

## Common questions

**Which frameworks is Floating Field available in?**

Floating Field ships as Vanilla, React + CSS and React + Tailwind — HTML, CSS, JS and React source you can copy, download or clone into Atheros AI Builder.

**Is the Floating Field input component free?**

Floating Field is a premium component. Anyone can preview it; the source, downloads and AI customisation are included with Atheros AI Pass.

**Does Floating Field support dark mode?**

Yes. Floating Field ships light and dark themes, both drawn from the Odyssey design system's tokens. Switch the preview to dark mode to compare them.

## Get the code

Preview Floating Field live, then sign in to copy or download the source, apply another design system, or ask the AI assistant to change it: https://builder.atheros.ai/components/floating-field

Every component on https://builder.atheros.ai is also reachable from Claude Code, Cursor and Codex through the Atheros MCP server (paid plans). Component index: https://builder.atheros.ai/llms-components.txt