Components
Loading preview...
Primitive single-line text input that accepts standard HTML attributes.
npx shadcn@latest add https://21st.dev/r/hero_ui/heroui-input"use client"
import { Input } from "@/components/ui/heroui-input"
import React from "react"
export default function Demo() {
const [value, setValue] = React.useState("heroui.com")
return (
<div className="flex min-h-screen w-full items-center justify-center bg-[var(--default)] p-10">
<div className="flex w-80 flex-col gap-2">
<Input
aria-label="Domain"
placeholder="domain"
value={value}
onChange={(event) => setValue(event.target.value)}
/>
<span className="px-1 text-sm text-muted">https://{value || "your-domain"}</span>
</div>
</div>
)
}