eo-n/ui

Input

Captures user text input with basic styling and accessibility support.

import { Input } from "@/components/ui/input";
 
export function InputDemo() {
  return (
    <Input
      id="username"
      name="username"
      type="text"
      placeholder="Username"
      autoComplete="off"
      className="max-w-xs"
    />
  );
}

Installation

npx shadcn@latest add @eo-n/input

Usage

Import all parts and piece them together.

import { Input } from "@/components/ui/input";
<Input />

Examples

Default

import { Input } from "@/components/ui/input";
 
export function InputDemo() {
  return (
    <Input
      id="username"
      name="username"
      type="text"
      placeholder="Username"
      autoComplete="off"
      className="max-w-xs"
    />
  );
}

With Label

import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
 
export function InputWithLabel() {
  return (
    <div className="w-full max-w-xs">
      <Label>Username</Label>
      <Input
        id="username"
        name="username"
        type="text"
        placeholder="Username"
        autoComplete="off"
      />
    </div>
  );
}

Disabled

import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
 
export function DisabledInput() {
  return (
    <div className="w-full max-w-xs">
      <Label>Username</Label>
      <Input
        id="username"
        name="username"
        type="text"
        disabled
        placeholder="Username"
        autoComplete="off"
      />
    </div>
  );
}