Email input with a label and helper text.
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/labeled-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 { useState } from "react";4import { LabeledInput } from "@/components/nextui/labeled-input";56export function BillingEmail() {7const [email, setEmail] = useState("");89return (10<LabeledInput11id="billing-email"12name="billingEmail"13label="Billing email"14description="Receipts go here every month."15placeholder="billing@acme.com"16value={email}17onChange={setEmail}18/>19);20}
| Prop | Type | Default | Description |
|---|---|---|---|
| label | ReactNode | "Work email" | Text of the label above the field |
| description | ReactNode | "We will send the invoice to this address." | Helper text under the field; null hides it |
| placeholder | string | "you@company.com" | Placeholder text |
| type | HTMLInputTypeAttribute | "email" | Input type |
| id | string | "input-01-email" | Field id, linked to the label |
| name | string | – | Field name for form submits |
| value | string | – | Controlled value |
| defaultValue | string | – | Starting value when uncontrolled |
| onChange | (value: string) => void | – | Called with the new value on each keystroke |
| className | string | – | Extra classes on the wrapper |
Sign in to see the code
Preview it freely. A free account copies code and prompts a few times a day.