@loke/design-system/dist/components/input/input.d.ts

A design system with individually importable components

import { type LokeIcon } from "@loke/icons";
import { type InputHTMLAttributes } from "react";
export type InputProps = InputHTMLAttributes<HTMLInputElement> & {
    icon?: LokeIcon;
    onClear?: () => void;
};
/**
 * Input component for text input fields
 *
 * The Input component provides a flexible and customizable text input field that can be used for various types of user input. It's designed to maintain consistent styling across your application while allowing for easy customization.
 *
 * Key features:
 * - Supports common input types: text, password, email, and number
 * - Consistent styling with other form components
 * - Customizable appearance through className prop
 * - Accessible focus states
 * - Support for disabled state
 * - File input styling
 * - Optional icon support
 *
 * Usage considerations:
 * - Use appropriate input types for different kinds of data (e.g., 'email' for email addresses)
 * - Provide clear labels or placeholders to indicate the expected input
 * - Consider using the 'required' attribute for mandatory fields
 * - Implement proper form validation for user inputs
 * - Ensure sufficient color contrast for placeholder text
 */
declare const Input: import("react").ForwardRefExoticComponent<InputHTMLAttributes<HTMLInputElement> & {
    icon?: LokeIcon;
    onClear?: () => void;
} & import("react").RefAttributes<HTMLInputElement>>;
export { Input };