Input

A text input component for forms and user data entry with built-in styling and accessibility features.

1
import { Field, FieldDescription, FieldLabel } from "@/components/ui/pxl/field";
2
import { Input } from "@/components/ui/pxl/input";
3

4
export default function InputDemo() {
5
  return (
6
    <Field>
7
      <FieldLabel htmlFor="input-demo-api-key">API Key</FieldLabel>
8
      <Input id="input-demo-api-key" type="password" placeholder="sk-..." />
9
      <FieldDescription>
10
        Your API key is encrypted and stored securely.
11
      </FieldDescription>
12
    </Field>
13
  );
14
}

Installation

Command
Manual

pnpm dlx shadcn@latest add pxl-ui/registry/input

Install the following dependencies:

pnpm add @base-ui/react

Copy and paste the following code into your project.

1
import { Input as InputPrimitive } from "@base-ui/react/input";
2
import { cva, type VariantProps } from "class-variance-authority";
3
import { type ComponentProps, forwardRef } from "react";
4

5
import { cn } from "@/lib/utils";
6

7
const inputWrapperVariants = cva(
8
  "pixel-rounded pixel-border pixel-size-md [--pixel-color:var(--input)] has-[input:focus-visible]:[--pixel-color:var(--ring)] has-[input:disabled]:opacity-50 has-[input[aria-invalid=true]]:[--pixel-color:var(--destructive)]",
9
  {
10
    variants: {
11
      size: {
12
        default: "",
13
        xs: "",
14
        md: "",
15
      },
16
      defaultVariants: {
17
        size: "default",
18
      },
19
    },
20
  },
21
);
22

23
const inputVariants = cva(
24
  "w-full min-w-0 bg-transparent transition-[color] outline-none file:inline-flex file:border-0 file:bg-transparent file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed",
25
  {
26
    variants: {
27
      size: {
28
        default: "px-2.5 py-1 h-9 text-base file:h-7 file:text-sm md:text-sm",
29
        xs: "px-1.5 py-0.5 h-5 text-sm file:h-7 file:text-sm md:text-xs",
30
        md: "px-2.5 py-1 h-9 text-base file:h-7 file:text-sm md:text-sm",
31
      },
32
    },
33
    defaultVariants: {
34
      size: "default",
35
    },
36
  },
37
);
38

39
const Input = forwardRef<
40
  HTMLInputElement,
41
  Omit<ComponentProps<"input">, "size"> & VariantProps<typeof inputVariants>
42
>(function Input({ className, size = "default", type, ...props }, ref) {
43
  return (
44
    <div
45
      data-slot="input-wrapper"
46
      className={cn(
47
        inputWrapperVariants({
48
          size,
49
        }),
50
        className,
51
      )}
52
    >
53
      <InputPrimitive
54
        ref={ref}
55
        type={type}
56
        data-slot="input"
57
        className={cn(
58
          inputVariants({
59
            size,
60
          }),
61
        )}
62
        {...props}
63
      />
64
    </div>
65
  );
66
});
67

68
Input.displayName = "Input";
69

70
export { Input, inputVariants, inputWrapperVariants };

Update the import paths to match your project setup.

Usage

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

<Input />

Field

Use Field, FieldLabel, and FieldDescription to create an input with a label and description.

Field Group

Use FieldGroup to show multiple Field blocks and to build forms.

Disabled

Use the disabled prop to disable the input. To style the disabled state, add the data-disabled attribute to the Field component.

Invalid

Use the aria-invalid prop to mark the input as invalid. To style the invalid state, add the data-invalid attribute to the Field component.

File

Use the type="file" prop to create a file input.

Inline

Use Field with orientation="horizontal" to create an inline input. Pair with Button to create a search input with a button.

Grid

Use a grid layout to place multiple inputs side by side.

Required

Use the required attribute to indicate required inputs.

Badge

Use Badge in the label to highlight a recommended field.

Input Group

To add icons, text, or buttons inside an input, use the InputGroup component. See the Input Group component for more examples.

Button Group

To add buttons to an input, use the ButtonGroup component. See the Button Group component for more examples.