Input

Collects a single line of text or another native input value.

Preview

Example code

Work email

Playground

Materialmaterial

Uses a filled or outlined field treatment.

Sizesize

Sets the field height and horizontal padding.

Schemescheme

Applies a semantic border and surface tint.

Invalidaria-invalid

Marks the field invalid for assistive technology and styling.

Disableddisabled

Prevents editing and removes the field from submission.

Usage

tsx

import { Input } from "earthling-ui/input";
import { Label } from "earthling-ui/label";

export function Example() {
  return (
    <>
      <Label htmlFor="email">Email</Label>
      <Input id="email" type="email" placeholder="you@example.com" />
    </>
  );
}

Pair every input with a visible label or an equivalent accessible name.
Use aria-invalid when validation fails and describe the error nearby.
Native input attributes such as type and autoComplete pass through.

Installation

Start with the project setup for React and Tailwind CSS 4. Both paths use the same component and theme.

Import package

Own the source

bash

npm install earthling-ui

Use the component import shown above. Package updates keep the implementation current.

API reference

Declarations from the current library build, including inherited primitive props. Playground controls above show selected options; they are not the complete API.

tsx

// Generated by dts-bundle-generator v9.5.1

import { VariantProps } from 'class-variance-authority';
import { ComponentProps } from 'react';

declare const inputVariants: (props?: ({
	material?: "paper" | "outline" | null | undefined;
	size?: "sm" | "md" | "lg" | null | undefined;
	scheme?: "default" | "primary" | "secondary" | "tertiary" | "neutral" | "muted" | "good" | "caution" | "bad" | null | undefined;
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
export interface InputProps extends Omit<ComponentProps<"input">, "size">, VariantProps<typeof inputVariants> {
}
export declare const Input: import("react").ForwardRefExoticComponent<Omit<InputProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;

export {};

Runtime dependencies: class-variance-authority, cnfast, react-aria-components.

Source

Use the eject command to copy this implementation with its required helpers and project-specific imports.

View Input implementation

tsx

"use client";

import { cn } from "@/utils/cn";
import { schemes } from "@/utils/variants";
import { cva, type VariantProps } from "class-variance-authority";
import { type ComponentProps, forwardRef } from "react";
import { Input as InputPrimitive } from "react-aria-components";

const inputVariants = cva(
  "rounded-(--radius-control) border text-base font-medium whitespace-nowrap ring-offset-background placeholder:text-current/50 focus-visible:ring-2 focus-visible:ring-outline focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-bad aria-invalid:ring-bad/30 sm:text-sm",
  {
    variants: {
      material: {
        paper:
          "bg-(--scheme-tint)/5 text-current border-transparent hover:bg-(--scheme-tint)/10",
        outline:
          "border-(--scheme-tint)/30 hover:border-(--scheme-tint)/50 hover:bg-(--scheme-tint)/5 ",
      },
      size: { sm: "h-9 px-3", md: "h-10 px-4 py-2", lg: "h-11 px-8" },
      scheme: schemes,
    },
    defaultVariants: { material: "outline", size: "md", scheme: "default" },
  },
);

export interface InputProps
  extends
    Omit<ComponentProps<"input">, "size">,
    VariantProps<typeof inputVariants> {}

const Input = forwardRef<HTMLInputElement, InputProps>(
  ({ className, size, scheme, material, ...props }, ref) => {
    return (
      <InputPrimitive
        className={cn(inputVariants({ size, scheme, material }), className)}
        ref={ref}
        data-scheme={scheme}
        {...props}
      />
    );
  },
);
Input.displayName = "Input";

export { Input };