Docs
πŸ—οΈ ⏐ Components
Form
Input

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:

PropDescriptionDefault
fullWidthIf true, the input will take up the full width of its container.
boolean
selectOnFocusIf true, the input will be focused during the first mount.
boolean
errorIf true, the input will show an error state.
boolean
containerClassnameAdditional classname for the input container element.
string
sizeSize of the input.
string
medium
startContent to display before the input. @deprecated Use `startAdornment` instead.
ReactNode
endContent to display after the input. @deprecated Use `endAdornment` instead.
ReactNode
startAdornmentElement to display before the Button content.
ReactNode
endAdornmentElement to display after the Button content.
ReactNode
onValueChangeShortcut for the onChange value event.
(value: string) => void
themeTheme 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.