Input

Reliable text fields for product formsLink to section

The Input component is a foundational form control in PyColors UI.

Use it for:

• login forms
• search fields
• settings forms
• billing details
• profile fields
• admin filters
• product creation flows
• validation-driven forms

Input is designed to be accessible by default, theme-aware, and flexible enough for simple fields or production form layouts.

It supports:

• labels
• helper text
• validation errors
• left and right icons
• size variants
• keyboard and screen-reader support

ImportLink to section

import {
  Input,
  type InputProps,
  type InputSize,
} from "@pycolors/ui";

Basic usageLink to section

Use Input when the field is simple and the surrounding context already provides a label.

import { Input } from "@pycolors/ui";

export function BasicInput() {
  return <Input placeholder="Type something…" />;
}

With label and helper textLink to section

Use label and helperText to make the field self-explanatory.

import { Input } from "@pycolors/ui";

export function InputWithLabel() {
  return (
    <Input
      label="Email"
      placeholder="you@domain.com"
      helperText="We’ll never share your email."
    />
  );
}

When to use InputLink to section

Use Input when the user needs to provide or edit short text-based data.

Validation errorLink to section

When error is provided:

• error styles are applied
• aria-invalid is set
• error text is connected to the field
• screen readers can access the validation message

import { Input } from "@pycolors/ui";

export function InputError() {
  return (
    <Input
      label="Email"
      placeholder="you@domain.com"
      error="Invalid email address"
    />
  );
}

With iconsLink to section

Use icons when they clarify the field purpose.

Left iconLink to section

import { Input } from "@pycolors/ui";
import { SearchIcon } from "lucide-react";

export function InputLeftIcon() {
  return (
    <Input
      placeholder="Search…"
      leftIcon={<SearchIcon className="size-4" aria-hidden="true" />}
    />
  );
}

Right iconLink to section

import { Input } from "@pycolors/ui";
import { FileText } from "lucide-react";

export function InputRightIcon() {
  return (
    <Input
      label="Project"
      placeholder="Project name"
      rightIcon={<FileText className="size-4" aria-hidden="true" />}
    />
  );
}

SizesLink to section

Use size to adapt density across product surfaces.

import { Input } from "@pycolors/ui";

export function InputSizes() {
  return (
    <div className="flex w-80 flex-col gap-3">
      <Input size="sm" placeholder="Small" />
      <Input size="md" placeholder="Medium" />
      <Input size="lg" placeholder="Large" />
    </div>
  );
}

Available sizesLink to section

Usage patternsLink to section

Input vs PasswordInput vs TextareaLink to section

APILink to section

Props

Input extends standard input props, excluding the native size attribute.

React.InputHTMLAttributes<HTMLInputElement>

TypeScript typesLink to section

export type InputSize = "sm" | "md" | "lg";

export interface InputProps
  extends Omit<
    React.InputHTMLAttributes<HTMLInputElement>,
    "size"
  > {
  label?: string;
  helperText?: string;
  error?: string;
  leftIcon?: React.ReactNode;
  rightIcon?: React.ReactNode;
  size?: InputSize;
}

AccessibilityLink to section

Input is designed to support accessible form composition.

Guidelines:

• use a visible label when the field needs context
• do not rely on placeholder text as the only label
• error should set aria-invalid
• helper and error text should be connected through aria-describedby
• decorative icons should use aria-hidden="true"
• keep focus rings visible
• use appropriate native type values, such as email, url, tel, or search
• use autoComplete values where relevant

Prefer / avoidLink to section

Product copy guidelinesLink to section

Labels, placeholders, helper text, and errors each have a different job.

Common questionsLink to section

RelatedLink to section