Input

The Input component is a foundational form control in PyColors UI. It is designed to be accessible by default, theme-aware, and flexible enough for simple fields or complex form layouts.

It supports:

Labels and required indicators
Helper text and validation errors
Left and right icons
Size variants aligned with the design system
Full keyboard and screen-reader support

Import

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

Basic usage

<Input placeholder="Type something…" />

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

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

With label & helper text

We’ll never share your email.

<Input
  label="Email"
  placeholder="you@domain.com"
  helperText="We’ll never share your email."
/>

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

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

Validation error

When error is provided:

Error styles are applied
aria-invalid is set
Error text is announced to screen readers

Invalid email address

<Input
  label="Email"
  placeholder="you@domain.com"
  error="Invalid email address"
/>

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

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

With icons

Left icon

<Input
  placeholder="Search…"
  leftIcon={<SearchIcon className="size-4" />}
/>

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

export default function IconExample() {
  return (
    <Input
      placeholder="Search…"
      leftIcon={<SearchIcon className="size-4" />}
    />
  );
}

Sizes

<Input size="sm" />
<Input size="md" />
<Input size="lg" />

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

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

API

Props

Prop	Type	Default	Description
`label`	`string`	—	Accessible label above the field
`helperText`	`string`	—	Helper text below the field
`error`	`string`	—	Validation error message
`leftIcon`	`React.ReactNode`	—	Icon rendered on the left
`rightIcon`	`React.ReactNode`	—	Icon rendered on the right
`size`	`"sm"	"md"	"lg"`
`className`	`string`	—	Tailwind override

Extends:

React.InputHTMLAttributes<HTMLInputElement>

TypeScript types

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;
}

Accessibility

Uses label + htmlFor for proper field association
Automatically manages aria-describedby
Sets aria-invalid when errors are present
Preserves focus rings and keyboard navigation

Forms

Using Input with React Hook Form + Zod.

PasswordInput

Secure password fields with toggle.

Typography

Labels and helper text on the type scale.

Forms

PasswordInput

Typography

On this page