Components
Input
macOS 26 Text Field — 5 control sizes, solid control surface, hairline border, accent focus ring.
The macOS 26 Text Field: a solid control-surface field with a hairline border, muted placeholder, and an accent focus ring, in the five macOS control sizes. Geometry is lifted from the Apple macOS 26 UI Kit; colors flip light/dark via the Acrylic theme tokens. Compose a leading icon by wrapping the field.
Installation
npx shadcn add https://acrylic-ui.vercel.app/r/input.jsonUsage
"use client"import { Search } from "lucide-react"import { Input } from "@/registry/acrylic/input"export default function InputDemo() { return ( <div className="flex w-full max-w-xs flex-col gap-2.5 text-foreground"> <Input placeholder="Email…" /> <div className="relative"> <Search className="pointer-events-none absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" /> <Input placeholder="Search…" className="pl-8" /> </div> <Input placeholder="Disabled" disabled /> </div> )}import { Input } from "@/components/acrylic/input"
<Input size="medium" placeholder="Email…" />Sizes
mini (16px) · small (20) · medium (24, default) · large (28) · xl (36).
Radius is uniform ~height ÷ 4 (4 / 5 / 6 / 7 / 9) — unlike Button, text fields
never go capsule.
mini
small
medium
large
xl
states
"use client"import { Input } from "@/registry/acrylic/input"const sizes = ["mini", "small", "medium", "large", "xl"] as const// The five macOS control sizes (heights 16/20/24/28/36) plus the field states,// lifted from the Apple macOS 26 UI Kit Text Fields page.export default function InputShowcase() { return ( <div className="flex flex-col gap-3 text-foreground"> {sizes.map((size) => ( <div key={size} className="flex items-center gap-3"> <span className="w-14 shrink-0 text-xs text-muted-foreground">{size}</span> <Input size={size} placeholder={`${size}…`} className="max-w-xs" /> </div> ))} <div className="flex items-center gap-3"> <span className="w-14 shrink-0 text-xs text-muted-foreground">states</span> <Input placeholder="Placeholder" className="max-w-[9rem]" /> <Input defaultValue="Value" className="max-w-[9rem]" /> <Input placeholder="Disabled" disabled className="max-w-[9rem]" /> </div> </div> )}Notes
- Solid control surface (
--acr-control) with a hairline border and an accent focus ring (ring-ring/25), all theme-aware. - For a leading icon, wrap in a
relativecontainer, absolutely position the icon, and add padding (e.g.pl-8) to the input (see the search field above).