Normal Input
This is a standard HTML input for comparison.
With react-smooth-input
Experience the future of text input with react-smooth-input! Enjoy seamless typing, enhanced aesthetics, and unparalleled responsiveness. Dive in and feel the difference!
Type something...
Example
A demo sign-in card built with react-smooth-input
👋 Welcome aboard!
*Demo sign in card with react-smooth-input
example@example.com
abc123xyz!
terms and conditions, bra bra bra...
Easy to use
Get started in minutes with a simple and intuitive API.
page.tsx
import { Input } from "react-smooth-input";
export default function Page() {
return (
<div>
<Input
label="I'm a label!"
placeholder="Type here..."
/>
</div>
);
}Result
Type here...
With icon
Easily add icons or any other elements to the start or end of the input field.
page.tsx
import { Input } from "react-smooth-input";
export default function Page() {
return (
<div>
<Input
label="Input with Icons"
placeholder="Type here..."
...
startContent={<icon />}
endContent={<icon />}
/>
</div>
);
}startContent
Type here...
endContent
Type here...
startContent
+
endContent
https://
Type here...
.com
Custom Styles
Customize the appearance of the Input component using the classNames prop.
Type here...
Placeholder
Fun... right?
legacy + smooth... ah... smooth-legacy
Current Value: (empty)
API
Detailed documentation for all available props and customization options.
Coming soon!