Input
A flexible text input component with support for icons, affixes, and various states. Designed for accessibility and customizable with multiple size options.
Installation
Install the following dependencies
Run these commands in your terminal to install the required packages
Create or update your Input component
Copy this code to create your Input component
Test Your Component
- 1. Add the component to a test page
- 2. Check all props and variants work as expected
- 3. Verify responsive behavior
- 4. Test with different content/data
- 5. Ensure accessibility features work correctly
Sizes
Input components are available in three different sizes: large, medium, and small.
With Label and Hint
Inputs can be combined with labels and hints for better accessibility and user experience.
This is a default hint
With Icon
Add icons to your inputs to provide visual context or additional functionality.
Error State
Display error states to indicate validation issues or input errors.
With Affix
Add prefix or suffix text to your inputs to provide context or additional information.
API Reference
The Input component is a compound component that consists of several parts. Each part has its own set of props that can be used to customize its appearance and behavior.
Input.Root
The container component that provides context for all other Input components.
| Prop | Type | Default | Description |
|---|---|---|---|
size | "sm""md""lg" | "md" | Controls the size of the input component. |
error | "boolean" | "false" | When true, applies error styling to the input. |
asChild | "boolean" | "false" | When true, the component will render its child directly, transferring all props to it. |
className | "string" | "undefined" | Additional CSS classes to apply to the input root. |
Input.Wrapper
A wrapper component that provides layout for the input and its associated elements like icons and affixes.
| Prop | Type | Default | Description |
|---|---|---|---|
asChild | "boolean" | "false" | When true, the component will render its child directly, transferring all props to it. |
className | "string" | "undefined" | Additional CSS classes to apply to the input wrapper. |
Input.Icon
An icon component that can be used within the input wrapper.
| Prop | Type | Default | Description |
|---|---|---|---|
as | "ElementType" | "undefined" | The component to render as the icon. |
className | "string" | "''" | Additional CSS classes to apply to the icon. |
Input.Input
The actual input element that accepts user input.
| Prop | Type | Default | Description |
|---|---|---|---|
type | "string" | "text" | The type of input (e.g., text, password, email). |
className | "string" | "undefined" | Additional CSS classes to apply to the input element. |
Input.Affix
A component for adding prefix or suffix text to the input.
| Prop | Type | Default | Description |
|---|---|---|---|
position | "start""end" | "start" | Determines whether the affix appears at the start or end of the input. |
className | "string" | "undefined" | Additional CSS classes to apply to the affix. |