Newsletter-style input with a leading icon and submit button.
Set your access key from API keys as NEXTUI_TOKEN in .env.local and add the @nextui namespace below to components.json once. Then every item installs by name. Each install counts as a copy on a free account.
$pnpm dlx shadcn@latest add @nextui/subscribe-input
1{2"registries": {3"@nextui": {4"url": "https://nextui.dev/r/{name}.json",5"headers": { "Authorization": "Bearer ${NEXTUI_TOKEN}" }6}7}8}
1"use client";23import { Search } from "lucide-react";4import { IconInputButton } from "@/components/nextui/subscribe-input";56export function DocsSearch() {7return (8<IconInputButton9icon={Search}10type="search"11name="q"12ariaLabel="Search docs"13placeholder="Search the docs"14buttonLabel="Search"15onSubmit={(query) => console.log("search", query)}16/>17);18}
| Prop | Type | Default | Description |
|---|---|---|---|
| icon | LucideIcon | Icon inside the field on the left | |
| placeholder | string | "Enter your email" | Placeholder text |
| buttonLabel | ReactNode | "Subscribe" | Text of the submit button |
| type | HTMLInputTypeAttribute | "email" | Input type |
| ariaLabel | string | "Email" | Accessible name for the field |
| name | string | "email" | Field name, also used to read the value on submit |
| value | string | – | Controlled value |
| defaultValue | string | – | Starting value when uncontrolled |
| onChange | (value: string) => void | – | Called with the new value on each keystroke |
| onSubmit | (value: string) => void | – | Called with the value on submit; prevents the native submit |
| className | string | – | Extra classes on the form |
Sign in to see the code
Preview it freely. A free account copies code and prompts a few times a day.