Input

Edit the code — the preview updates live. Try changing props, text, or classes.

render(
  <div className="w-full max-w-xs space-y-2">
    <Label htmlFor="email">Email</Label>
    <Input id="email" type="email" placeholder="you@stacklyui.in" />
  </div>
)

Common variations — edit any of them live.

render(
  <div className="w-full max-w-xs space-y-3">
    <Input placeholder="Default" />
    <Input placeholder="Disabled" disabled />
    <Input placeholder="Invalid" aria-invalid />
  </div>
)

render(
  <div className="flex w-full max-w-sm gap-2">
    <Input type="email" placeholder="you@stacklyui.in" />
    <Button>Subscribe</Button>
  </div>
)

Copy the source into your project with the registry CLI:

Or install the package and import it:

Import Input from "@stacklyui/ui" and compose it as shown in the playground above. Every interactive primitive is built on Radix, so keyboard navigation, focus management, and ARIA are handled for you.