Input

Introduction

The Input component is a flexible and accessible input field that supports validation, helper text, icons, and error handling. It adapts to various use cases like text, password, and form validation scenarios.

Default Use Case: Input Variants

Simple Input

import { Input } from "@/components/ui/input";
 
export function CustomInput() {
  return (
    <Input
      type="text"
      placeholder="Enter text..."
      style={{
        borderWidth: "1px",
        borderColor: "#e2e8f0"
      }}
    />
  );
}

Password Input

Error Input

Installation

npx axionjs-ui add input

File Structure

Advanced Usage

Input with Icons

You can add icons at the start or end of the input field:

import { Input } from "@/components/ui/input";
import { Mail, User } from "lucide-react";
 
export function InputsWithIcons() {
  return (
    <div className="space-y-4">
      <Input
        placeholder="Enter your email"
        startIcon={<Mail className="h-4 w-4" />}
      />
      <Input
        placeholder="Enter your username"
        endIcon={<User className="h-4 w-4" />}
      />
    </div>
  );
}

Character Limit

Add a character limit to restrict input length:

<Input
  placeholder="Write a short bio (max 150 characters)"
  characterLimit={150}
/>

Complex Validation with Error State

import React from "react";
import { Input } from "@/components/ui/input";
 
export function ValidatedInput() {
  const [value, setValue] = React.useState("");
  const [error, setError] = React.useState<string | undefined>();
 
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const newValue = e.target.value;
    setValue(newValue);
 
    if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(newValue) && newValue) {
      setError("Please enter a valid email address");
    } else {
      setError(undefined);
    }
  };
 
  return (
    <Input
      placeholder="Enter your email"
      value={value}
      onChange={handleChange}
      error={error}
      variant={error ? "error" : "default"}
      helperText="We'll never share your email with anyone else."
    />
  );
}

Prop Types

Features

Validation

The Input component includes built-in validation capabilities:

• Character Limit: Easily restrict input length with visual feedback
• Error States: Clearly indicates validation errors with red borders and error messages
• Zod Integration: Uses zod for type-safe validation rules
• Custom Validation: Flexible enough to accommodate any validation logic

Accessibility

The Input component follows best accessibility practices:

• ARIA Attributes:

  • Uses aria-invalid to indicate validation errors
  • Includes aria-describedby to associate helper and error text with the input
  • Error messages have role="alert" for screen reader announcements

• Keyboard Navigation:

  • Fully keyboard-accessible
  • Proper tab order and focus states

• Visual Cues:

  • Clear focus states for keyboard users
  • High contrast error states
  • Helper text and character counts for additional context

Styling and Customization

The component is highly customizable:

• Class Variance Authority: Uses CVA for variant-based styling
• Tailwind Integration: Works seamlessly with your Tailwind theme
• Icon Support: Add contextual icons at either end of the input
• Inline Styling: Support for additional style customization

Conclusion

The Input component is a robust foundation for building accessible and user-friendly forms. Its comprehensive validation features, icon support, and accessibility considerations make it suitable for a wide range of applications, from simple contact forms to complex data entry interfaces.