8
Components

Input Limited

A customizable input field with character limit and validation support.

Introduction

The LimitedInput component provides a feature-rich input field with built-in character counting, limit enforcement, and visual progress indicators. It’s perfect for form fields where character count matters, such as usernames, bios, comments, and more.

Examples

Simple Limited Input

Simple Limited Input

0/20

Validated Limited Input

Validated Limited Input

Please enter at least 5 characters.

0/30

Input must be at least 5 characters long.

Installation

Quickly add the component using:

npx axionjs-ui add limited-input

File Structure

Props

PropTypeDefault
label
string
"Input Label"
id
string
"limited-input"
value
string
-
onChange
(value: string) => void
-
characterLimit
number
50
required
boolean
false
helperText
string
-
error
string
-
placeholder
string
-
progressBarProps
{ className?: string; style?: React.CSSProperties }
-
countStyle
React.CSSProperties
-

Advanced Usage

Custom Progress Bar Styling

You can customize the progress bar appearance:

<LimitedInput
  value={bio}
  onChange={setBio}
  characterLimit={150}
  progressBarProps={{
    style: {
      backgroundColor: '#22c55e', // Green progress bar
      height: '6px',
      borderRadius: '9999px',
    },
  }}
  countStyle={{ color: '#22c55e' }} // Green counter text
/>

Conditional Validation

Implement custom validation logic:

import { useState } from "react";
import LimitedInput from "@/components/ui/limited-input";
 
export function UsernameInput() {
  const [username, setUsername] = useState("");
  
  // Validate username: must be 3-15 chars, alphanumeric + underscores only
  const isValidUsername = /^[a-zA-Z0-9_]{3,15}$/.test(username);
  const error = username && !isValidUsername 
    ? "Username must be 3-15 characters and contain only letters, numbers, and underscores."
    : undefined;
  
  return (
    <LimitedInput
      label="Username"
      value={username}
      onChange={setUsername}
      characterLimit={15}
      helperText="Choose a username between 3-15 characters."
      error={error}
      required
    />
  );
}

Form Integration

import { useState, FormEvent } from "react";
import LimitedInput from "@/components/ui/limited-input";
import { Button } from "@/components/ui/button";
 
export function ProfileForm() {
  const [name, setName] = useState("");
  const [bio, setBio] = useState("");
  
  const handleSubmit = (e: FormEvent) => {
    e.preventDefault();
    // Form submission logic
    console.log({ name, bio });
  };
  
  return (
    <form onSubmit={handleSubmit} className="space-y-4">
      <LimitedInput
        label="Name"
        value={name}
        onChange={setName}
        characterLimit={50}
        required
      />
      
      <LimitedInput
        label="Bio"
        value={bio}
        onChange={setBio}
        characterLimit={150}
        helperText="Tell us a bit about yourself."
        progressBarProps={{
          style: {
            height: '4px',
            borderRadius: '9999px',
          },
        }}
      />
      
      <Button type="submit">Save Profile</Button>
    </form>
  );
}

Accessibility

The LimitedInput component includes several accessibility features:

  • Properly associates labels with inputs using htmlFor
  • Indicates required fields both visually and with aria-required
  • Provides visual feedback on character limits
  • Ensures error messages are accessible to screen readers

Conclusion

The LimitedInput component provides a user-friendly way to implement character-limited input fields in your application. With built-in validation support, visual progress indicators, and customization options, it’s a versatile solution for a wide range of form scenarios.

Previous

Label

Next

Marquee

On this page