We are tasked with creating a highly customizable input box component that enhances user interaction and can be tailored to fit various design requirements. The input box should allow developers to modify its appearance and behavior easily while maintaining a consistent and user-friendly interface.
Objectives:
Develop a reusable input box component.
Ensure the component is accessible and responsive across devices.
Provide comprehensive documentation for developers.
Requirements:
Input Types:
Support for multiple input types:
Text
Email
Password
Number
Tel (telephone)
URL
Customizable Styles:
Ability to customize:
Border color and width
Background color
Font size and style
Padding and margin
Height and width
CSS classes for easy integration with existing styles.
Placeholder Text:
Allow users to set placeholder text for the input box.
Validation:
Provide visual feedback for input validation:
Success (e.g., green border)
Error (e.g., red border, error message below input)
Ability to trigger validations on input change and on form submission.
Icons:
Support for optional leading and trailing icons.
Icons should be customizable (e.g., size, color).
Accessibility:
Implement ARIA attributes for improved accessibility.
Ensure keyboard navigability.
Documentation:
Provide usage examples and code snippets in the documentation.
Include a live demo in the documentation site.
Proposed Interface Specification:
interface CustomInputProps {
type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url';
placeholder?: string;
value: string;
onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
style?: React.CSSProperties;
className?: string;
error?: string; // Error message to display
success?: boolean; // Indicates successful validation
startIcon?: React.ReactNode; // Icon to display before the input
endIcon?: React.ReactNode; // Icon to display after the input
required?: boolean; // Marks the input as required
disabled?: boolean; // Disables the input field
}
We are tasked with creating a highly customizable input box component that enhances user interaction and can be tailored to fit various design requirements. The input box should allow developers to modify its appearance and behavior easily while maintaining a consistent and user-friendly interface.
Objectives:
Requirements:
Input Types:
Customizable Styles:
Placeholder Text:
Validation:
Icons:
Accessibility:
Documentation:
Proposed Interface Specification: