Input

Stable

This component has limited functionality on the server side. In Next.js, add "use client" at the top to make it work.

A flexible text input component with labels, validation states, and helper text support.

Import

TypeScript React

import { Input } from "laxod";

A simple input field with a label.

Name

Inputs support all standard HTML input types. Not all of them are fully functional and styled yet tho.

Text

Password

Add additional context or instructions with helper text.

Username

Choose a unique username between 3-20 characters

Display validation errors with the error prop. An error icon appears by default.

Password

Password must be at least 8 characters

Show a success state with an optional success icon.

Username

Username is available

Make the input span the full width of its container.

Disable user interaction with the disabled prop.

Disabled Empty

Disabled with Value

Control the input value with React state.

Message

0 characters

Current value: (empty)

Prop	Type	Default	Description
label	string	-	Label text displayed above the input
error	string	-	Error message to display below the input
helperText	string	-	Helper text displayed below the input
fullWidth	boolean	false	Makes the input take full width of container
success	boolean	false	Shows success styling
showSuccessIcon	boolean	false	Shows success icon when success is true
showErrorIcon	boolean	true	Shows error icon when error is present
type	string	"text"	HTML input type (text, email, password, etc.)
className	string	""	Additional CSS classes to apply
...props	InputHTMLAttributes	-	All standard HTML input attributes