elorm/ui

Input

Displays a form input field.

Saved preference for elorm init --ui-library base-ui
PreviewCode
"use client"

import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

export function InputDemo() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-2">
      <Label htmlFor="demo-email">Email</Label>
      <Input id="demo-email" type="email" placeholder="name@example.com" />
    </div>
  )
}

Installation#

Usage#

import { Input } from "@/components/ui/input"

Displays a form input field.

Use with Label for accessible form fields.

Examples#

Default#

PreviewCode
import { Input } from "@/components/ui/input"

export function InputDemo() {
  return (
    <Input type="email" placeholder="Email" />
  )
}

Avoid#

  • Do not use without a label or aria-label
ButtonTextarea