Input
@anxndsgn/ink-ui

Input

A text field that allows users to enter and edit text. 

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

export function InputExample() {
  return (
    <div className="flex flex-wrap items-center gap-4">
      <Input placeholder="Type something..." />
    </div>
  );
}

Examples

Variants

Available variants: default, outline.

Outline

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

export function OutlineInputExample() {
  return (
    <div className="flex flex-wrap items-center gap-4">
      <Input variant="outline" placeholder="Outline variant..." />
    </div>
  );
}

Width

By default, the input stretches to fill its container (block={true}). Pass block={false} to constrain the width.

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

export function InlineInputExample() {
  return (
    <div className="flex flex-wrap items-center gap-4">
      <Input block={false} placeholder="Inline width..." />
    </div>
  );
}

Installation

Copy the source code below into your project:

 
import { Input as BaseInput } from "@base-ui/react/input";
import { cn } from "@registry/lib/utils";
import { cva } from "class-variance-authority";
import type { VariantProps } from "class-variance-authority";

const inputVariants = cva(
  "min-h-9 rounded-lg border border-transparent pl-3.5 text-base text-foreground transition-all duration-150 not-disabled:hover:border-accent focus-visible:border-accent focus-visible:ring-[3px] focus-visible:ring-ring focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
  {
    defaultVariants: {
      variant: "default",
    },
    variants: {
      variant: {
        default: "border-input bg-gray-950/5 dark:bg-gray-950/30",
        outline: "border-input",
      },
    },
  },
);

export function Input({
  variant,
  className,
  block = true,
  ...props
}: BaseInput.Props &
  VariantProps<typeof inputVariants> & {
    block?: boolean;
  }) {
  return (
    <BaseInput
      className={cn(inputVariants({ className, variant }), block ? "w-full" : "max-w-60")}
      data-slot="input"
      {...props}
    />
  );
}

API Reference

The Input component extends the Base UI Input props and adds the following:

PropTypeDefaultDescription
variant"default" | "outline""default"Visual style of the input.
blockbooleantrueWhen true, the input stretches to fill its container.