Input
The Input component is a fundamental element in form design, allowing users to enter data. Its versatility supports a variety of applications, from simple text entries to complex data inputs.
Examples
Basic Usage
A straightforward implementation of the Input component for basic text entry:
Advanced Customization
Size Variations
Adjust the size of the input field (small, medium, large) to accommodate different content lengths and interface designs:
Full Width
Extend the input field to the full width of its container, ideal for forms or sections requiring larger text entries:
Adornments at Start/End
Enhance input fields with icons or text at the start or end to provide context or additional functionalities:
State Variations
Implement variations for error states and disabled inputs, providing visual feedback and interaction cues.
- Error
- Disabled
Value Initialization
Set initial values or placeholders to guide user input or display default values:
- Placeholder
- Default value
Blocks
This component is used in the following Blocks:
Theme Customization
Customize the Input component's appearance to align with your application's theme:
- root{}(9 keys)
- Show all
Learn more about how to customize in the Theme documentation.
API
Fine-tune the Input component's behavior and appearance with these configurable properties:
| Prop | Description | Default |
|---|---|---|
fullWidth | If true, the input will take up the full width of its container.boolean | |
selectOnFocus | If true, the input will be focused during the first mount.boolean | |
error | If true, the input will show an error state.boolean | |
containerClassname | Additional classname for the input container element.string | |
size | Size of the input.string | medium |
start | Content to display before the input.
@deprecated Use `startAdornment` instead.ReactNode | |
end | Content to display after the input.
@deprecated Use `endAdornment` instead.ReactNode | |
startAdornment | Element to display before the Button content.ReactNode | |
endAdornment | Element to display after the Button content.ReactNode | |
onValueChange | Shortcut for the onChange value event.(value: string) => void | |
theme | Theme for the Input.InputTheme |
Design and Usability Tips
- Consistent Field Width: Design input fields with a width that hints at the expected length of the answer. For example, shorter fields for postal codes or longer fields for descriptions. This visual cue helps users gauge the expected input at a glance.
- Error State Feedback: Clearly indicate error states through text messages. Place error messages close to the related input field, and ensure they provide constructive feedback on how to resolve the issue.