Componentform0.41 KB gzipZero dependencies

Input

Text input with dashed focus border and design tokens.

Preview

Live Preview

Installation

Tokens guide →

Add to your project via CLI (zero dependencies, code you own):

npx bigbullui add input

Or install the full npm package:

npm install bigbullui

Usage

Open in StackBlitz

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

<Input type="email" placeholder="Email" />

Usage guidance

Use Input when a ticket stub surface needs Text input with dashed focus border and design tokens. Keep props minimal and prefer composition with sibling stubs.

Avoid Input for long form flows or dense data grids where a dedicated layout block fits better.

Source code

input.tsx

Zero dependencies (only React + utils). Copy and paste directly into your project:

import * as React from "react";
import { cn } from "./lib/utils";

export type InputProps = React.InputHTMLAttributes<HTMLInputElement>;

const Input = React.forwardRef<HTMLInputElement, InputProps>(
  ({ className, type, ...props }, ref) => (
    <input
      ref={ref}
      type={type}
      className={cn(
        "flex h-10 w-full rounded-md border-2 border-dashed border-input bg-transparent px-3 py-1 font-mono text-sm transition-colors placeholder:text-muted-foreground focus-visible:border-solid focus-visible:border-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
        className
      )}
      {...props}
    />
  )
);
Input.displayName = "Input";

export { Input };

Props

Prop	Type	Description
type	string	HTML input type.