Componentform0.71 KB gzipZero dependencies

Signature Line

Printable signature line with typed name.

Preview

Live Preview

SignatureType your full name as it appears on official documents

Installation

Tokens guide →

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

npx bigbullui add signature-line

Or install the full npm package:

npm install bigbullui

Usage

Open in StackBlitz

import { SignatureLine } from "@/components/ui/signature-line";

<SignatureLine />

Usage guidance

Use Signature Line when a ticket stub surface needs Printable signature line with typed name. Keep props minimal and prefer composition with sibling stubs.

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

Source code

signature-line.tsx

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

"use client";

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

export interface SignatureLineProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
  value?: string;
  defaultValue?: string;
  onValueChange?: (value: string) => void;
  label?: string;
  hint?: string;
}

export function SignatureLine({
  value: controlledValue,
  defaultValue = "",
  onValueChange,
  label = "Signature",
  hint = "Type your full name as it appears on official documents",
  className,
  ...props
}: SignatureLineProps) {
  const [inner, setInner] = React.useState(defaultValue);
  const value = controlledValue ?? inner;

  return (
    <div className={cn("w-full", className)} {...props}>
      <input
        value={value}
        onChange={(e) => {
          setInner(e.target.value);
          onValueChange?.(e.target.value);
        }}
        aria-label={label}
        placeholder="Jane Doe"
        spellCheck={false}
        autoComplete="off"
        className="w-full border-0 border-b-2 border-dashed border-border bg-transparent pb-1 pl-1 font-mono text-lg italic transition-colors placeholder:font-sans placeholder:text-sm placeholder:not-italic placeholder:text-muted-foreground/60 focus:border-accent focus-visible:outline-none"
      />
      <div className="mt-1 flex items-center justify-between">
        <span className="font-mono text-[10px] uppercase tracking-widest text-muted-foreground">
          {label}
        </span>
        <span className="font-mono text-[10px] text-muted-foreground">{hint}</span>
      </div>
    </div>
  );
}

Props

Prop	Type	Description
value	string	Controlled signature text.
onValueChange	(value: string) => void	Change callback.
hint	string	Helper microcopy.