Inputs
Five text-field treatments: an underline, a floating label, a focus glow, a filled surface and a leading icon. Each is sized, token-driven and wraps a real input element.
Installation
The styled layer is free and installs like any other ai2 component.
Run the following command
npx shadcn@latest add @ai2/inputs-styledDependencies, the @ai2/tokens theme and the component file are installed together.
Install dependencies
npm install lucide-reactCopy the source
components/ui/inputs-styled.tsx"use client"
import * as React from "react"
import { Search } from "lucide-react"
import { cn } from "@/lib/utils"
/* Input family: 5 decorative text inputs. Colour comes ONLY from tokens. Size = height (aligned with the base scale). The focus effects are CSS (focus-within / peer) plus token transitions; the transform-based ones are guarded with motion-reduce. Each wraps a real <input> and passes every native prop through. */
export type StyledSize = "sm" | "md" | "lg" | "xl"
const height: Record<StyledSize, string> = {
sm: "h-8 text-sm",
md: "h-9 text-sm",
lg: "h-10 text-base",
xl: "h-12 text-base",
}
const fieldBase =
"w-full bg-transparent text-foreground outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
type Props = Omit<React.ComponentProps<"input">, "size"> & { size?: StyledSize }
/* Underline: frameless, with a token line growing outwards from the centre on focus. */
export function UnderlineInput({ className, size = "md", ...props }: Props) {
return (
<span data-slot="styled-input" className={cn("relative inline-flex w-56 max-w-full items-center border-b border-border", height[size], className)}>
<input {...props} className={cn(fieldBase, "peer px-1")} />
<span className="pointer-events-none absolute inset-x-0 bottom-[-1px] h-0.5 origin-center scale-x-0 bg-primary transition-transform duration-(--motion-base) ease-(--motion-ease) peer-focus:scale-x-100 motion-reduce:transition-none" />
</span>
)
}
/* Float: odakta / dolu iken yukari suzulen etiket. */
export function FloatInput({ className, size = "md", id, ...props }: Props) {
const autoId = React.useId()
const inputId = id ?? autoId
return (
<span data-slot="styled-input" className={cn("relative inline-flex w-56 max-w-full items-center rounded-lg border border-border px-3", height[size], className)}>
<input id={inputId} placeholder=" " {...props} className={cn(fieldBase, "peer h-full")} />
<label
htmlFor={inputId}
className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 bg-background px-1 text-muted-foreground transition-all duration-(--motion-base) peer-focus:top-0 peer-focus:text-xs peer-focus:text-primary peer-[:not(:placeholder-shown)]:top-0 peer-[:not(:placeholder-shown)]:text-xs motion-reduce:transition-none"
>
Label
</label>
</span>
)
}
/* Glow: odakta token isima halkasi (box-shadow). */
export function GlowInput({ className, size = "md", ...props }: Props) {
return (
<span
data-slot="styled-input"
className={cn(
"relative inline-flex w-56 max-w-full items-center rounded-lg border border-border px-3 transition-shadow duration-(--motion-base) focus-within:border-info focus-within:shadow-[0_0_0_3px_color-mix(in_oklab,var(--info)_25%,transparent)]",
height[size],
className
)}
>
<input {...props} className={cn(fieldBase, "h-full")} />
</span>
)
}
/* Filled: dolu yuzey + odakta alttan token vurgu cizgisi. */
export function FilledInput({ className, size = "md", ...props }: Props) {
return (
<span data-slot="styled-input" className={cn("relative inline-flex w-56 max-w-full items-center overflow-hidden rounded-t-lg border-b border-border bg-surface-2 px-3", height[size], className)}>
<input {...props} className={cn(fieldBase, "peer h-full")} />
<span className="pointer-events-none absolute inset-x-0 bottom-[-1px] h-0.5 origin-center scale-x-0 bg-primary transition-transform duration-(--motion-base) ease-(--motion-ease) peer-focus:scale-x-100 motion-reduce:transition-none" />
</span>
)
}
/* Icon: bastaki ikon, odakta ikon token'a doner. */
export function IconInput({ className, size = "md", ...props }: Props) {
return (
<span
data-slot="styled-input"
className={cn(
"group relative inline-flex w-56 max-w-full items-center gap-2 rounded-lg border border-border pl-3 pr-3 transition-colors focus-within:border-primary",
height[size],
className
)}
>
<Search className="size-4 shrink-0 text-muted-foreground transition-colors group-focus-within:text-primary" />
<input {...props} className={cn(fieldBase, "h-full")} />
</span>
)
}Manual installs skip the @ai2/tokens theme, so add the token CSS from the theming guide or the tone colors will be missing.
Variations
5 takes on the same idea. Each is its own export, and every one accepts a size prop (sm, md, lg, xl) aligned to the base Button scale.
Underline
Borderless, with a token underline that grows from the center on focus.
import { UnderlineInput } from "@/components/ui/inputs-styled"
<UnderlineInput placeholder="Search" />Float
A label that floats up on focus or when the field is filled.
import { FloatInput } from "@/components/ui/inputs-styled"
<FloatInput />Glow
A token glow ring blooms on focus.
import { GlowInput } from "@/components/ui/inputs-styled"
<GlowInput placeholder="Email" />Filled
A filled surface with a token accent bar on focus.
import { FilledInput } from "@/components/ui/inputs-styled"
<FilledInput placeholder="Name" />Icon
A leading icon that turns a token color on focus.
import { IconInput } from "@/components/ui/inputs-styled"
<IconInput placeholder="Search" />ai2 Inputs: 5 styled variations on the token system
The ai2 Inputs are a set of 5 decorative button variations from the styled layer of the @ai2 design system, built around text-field focus treatments. They are free and MIT licensed, and every color comes from a semantic token, so they theme with the rest of ai2 in light and dark.
Motion runs on framer-motion: focus effects run on token CSS transitions; transform-based ones respect reduced motion. The styled layer is opt-in, so the dependency only lands if you use it; the base components stay lean. Under reduced motion, the underline and label transitions are disabled and the fields still focus.
What is in the ai2 Inputs?
5 exports in one file: Underline, Float, Glow, Filled and Icon. Each renders a native button and takes a size prop (sm, md, lg, xl) aligned to the base Button. They are separate from the base Button on purpose: the base keeps its clean variant, tone and size axes, while the styled layer carries the effects.
You own the file. Copy the one category file and you have all 5 variations, with no runtime dependency on ai2 itself.
Why use it
- On-system by construction: Every color resolves to an ai2 semantic token, so the buttons follow your theme in light and dark with no extra work.
- Effect without the sprawl: The decorations live in a dedicated styled file, so the base Button keeps its clean, predictable API.
- Accessible and honest: Each renders a real button element, keeps a visible focus ring, and respects prefers-reduced-motion.
Features
- Token-driven color: No hardcoded hex or oklch; the look recolors with your theme tokens.
- framer-motion: focus effects run on token CSS transitions; transform-based ones respect reduced motion.
- Reduced-motion aware: Under prefers-reduced-motion, the underline and label transitions are disabled and the fields still focus.
- Size aligned to the base: Every variation takes sm, md, lg and xl matching the base Button height scale, so styled and base buttons line up in a row.
Production tips
- Use it for emphasis, not everywhere: Styled buttons draw the eye. Reserve them for the one action you want people to take on a screen, and use the base Button for the rest.
- Keep labels as verbs: The decoration adds weight, so a clear action label keeps the button scannable.
- Pick one variation per surface: The variations share a family; using two different ones in the same view competes for attention.
Works with the rest of ai2
The Inputs sit alongside the base Button and the rest of the @ai2 registry. They share the same token file, so a styled action next to a base button or a badge stays visually consistent in both modes.