Input

A form control for single-line text entry with multiple size and validation states.

Installation

npx micomponents-cli add input

import { Input, ClearableInput } from "@/components/ui/input";

<Input
  type="email"
  placeholder="Enter your email"
  size="m"
  validation="none"
/>

Display validation states with error and success messages.

Email is invalid

Email is valid

Choose from multiple input sizes for different contexts.

Input with a clear button for quick value removal.

Prop	Type	Default	Description
size	s \| m \| l \| xl	m	The size of the input field
validation	none \| error \| success	none	The validation state of the input
validationMsg	string	-	Message displayed for validation states