Input

Use the Input component when you need to collect textual data from users. It's ideal for forms, search interfaces, and any scenario where users need to enter information like names, emails, passwords, or other text-based data.

The component offers multiple variants to match different design patterns: floating labels for modern interfaces, outlined style for Material Design aesthetics, and traditional inputs for classic forms.

• Always provide descriptive labels for accessibility, using the label prop for floating/outlined variants or the Label component for default inputs.
• Use appropriate type attributes (email, password, number) to enable browser validation and mobile keyboard optimization.
• Provide helpful placeholders that exemplify the expected format, but don't rely on them as the only form of instruction.
• Validate data on both client and server sides for better UX and security.
• Choose the variant that best fits your design system: floating for modern apps, outlined for Material Design, or default for traditional forms.
• Provide clear error messages using aria-invalid and error text when validation fails.

The Input component is built with accessibility in mind, following WAI-ARIA best practices for form controls.

• Always associate inputs with labels using the label prop or htmlFor attributes.
• The component automatically handles aria-invalid states with visual feedback through ring colors.
• Floating and outlined variants maintain label visibility at all times, improving accessibility for users with cognitive disabilities.
• The component supports disabled state with proper styling and cursor behavior.
• Focus states are clearly visible with ring indicators for keyboard navigation users.

The Input component offers four distinct variants:

• Default - Standard input field with traditional styling, best paired with an external Label component.
• Floating - Label starts inside the input and animates to float above the border when focused or filled. Creates a modern, space-efficient design.
• Floating Inside - Label starts centered in the input and animates to the top-left corner when focused or filled, remaining within the input boundaries.
• Outlined - Material Design style with the label positioned on the border, creating a clean outlined appearance. Label animates from inside to the border on focus/fill.