Halo Input

Renders single-line and multiline inputs with frosted fill and gradient rim for forms. Behaves with animated background effects and focus states. Use for generic form fields needing a polished, modern look.

byjordan from Cult UI

Installation

terminal

pnpm dlx layro-cli add @nolly-studio/halo-input

npx layro-cli add @nolly-studio/halo-input

npx layro-cli add @nolly-studio/halo-input

bunx layro-cli add @nolly-studio/halo-input

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client"

/**
 * Single-line and multiline text controls with the same frosted + gradient-rim polish as
 * {@link HaloSegmented} / {@link HaloSwitch} — for generic forms (not search- or
 * composer-specific shaders, staggered placeholders, or trailing send/clear chrome).
 */
import { forwardRef, useId, type ComponentProps, type ReactNode } from "react"
import { Input as InputPrimitive } from "@base-ui/react/input"
import { motion, useReducedMotion } from "motion/react"

import { cn } from "@/lib/utils"

/** Inset 1px inside `rounded-xl` shell → inner radius 12px − 1px = 11px (concentric with `SelectGradientUnderlay`). */