Browse components
Interactive Input
A text field with a floating label, a focus ring that blooms out of the border, a spring-in clear button, a character-count ring and a shake on error.
Installation
npx shadcn@latest add @glint-ui/interactive-inputFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/interactive-input.json
Usage
import { InteractiveInput } from "@/components/ui/interactive-input";
const [name, setName] = useState("");
<InteractiveInput
label="Username"
maxLength={20}
value={name}
onValueChange={setName}
error={name === "admin" ? "That username is taken." : undefined}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | "Username" | Floating label. |
| placeholder | string | "ada_lovelace" | Shown only while focused and empty. |
| hint | string | "Letters, numbers and underscores." | Helper text under the field. |
| error | string | "" | Error message. Setting it turns the field red and shakes it. |
| maxLength | number | 20 | Max characters, drives the counter ring. |
| showCounter | boolean | true | Show the used / max counter. |
| clearable | boolean | true | Show a clear button when filled. |
| disabled | boolean | false | Disable the field. |
| icon | ReactNode | — | Leading icon. |
| value | ReactNode | — | Controlled value; pair with `onValueChange(value)`. Or use `defaultValue`. Native input props are forwarded. |
| className | string | — | Extra classes for the root element. |