@versini/ui-textinput

!npm package minimized gzipped size>)

> Accessible and feature-rich React text input components built with TypeScript and TailwindCSS.

The TextInput package provides standard text inputs and masked text inputs with comprehensive form features including validation states, helper text, and customizable styling. Perfect for building accessible forms and user interfaces.

Table of Contents

- Features
- Installation
- Usage
- API

Features

- 🎯 Multiple Input Types: TextInput and TextInputMask components
- ♿ Accessible: WCAG compliant with proper labeling and keyboard navigation
- 🎨 Customizable: Multiple sizes, themes, and styling options
- 🔧 Form Integration: Built-in validation states and helper text
- 🌲 Tree-shakeable: Lightweight and optimized for bundle size
- 🔧 TypeScript: Fully typed with comprehensive prop definitions
- 🎭 Theme Support: Built-in support for light, dark, and system themes

Installation

``bash
npm install @versini/ui-textinput
`

> Note: This component requires TailwindCSS and the @versini/ui-styles plugin for proper styling. See the installation documentation for complete setup instructions.

Usage

$3

`tsx
import { TextInput } from "@versini/ui-textinput";

function App() {
return (
label="Email Address"
name="email"
type="email"
placeholder="Enter your email"
/>
);
}
`

$3

`tsx
import { TextInput } from "@versini/ui-textinput";

function App() {
return (
label="Password"
name="password"
type="password"
helperText="Must be at least 8 characters long"
placeholder="Enter your password"
/>
);
}
`

$3

`tsx
import { TextInput } from "@versini/ui-textinput";

function App() {
return (
label="Username"
name="username"
error
helperText="Username is already taken"
defaultValue="invalid-username"
/>
);
}
`

$3

`tsx
import { TextInput } from "@versini/ui-textinput";
import { Button } from "@versini/ui-button";

function App() {
return (
label="Search"
name="search"
placeholder="Search for anything..."
rightElement={

Search

}
/>
);
}
`

$3

`tsx
import { TextInputMask } from "@versini/ui-textinput";
import { ButtonIcon } from "@versini/ui-button";
import { IconEye, IconEyeOff } from "@versini/ui-icons";
import { useState } from "react";

function App() {
const [masked, setMasked] = useState(true);

return (
label="Password"
name="password"
type={masked ? "password" : "text"}
onMaskChange={setMasked}
rightElement={
label={masked ? "Show password" : "Hide password"}
noBackground
>
{masked ? : }

}
/>
);
}
`

API

$3

| Prop | Type | Default | Description |
| --------------------- | ----------------------------------------------- | ---------- | -------------------------------------------------- |
| label | string | - | The label of the TextInput (required) |
| name | string | - | The name of the TextInput (required) |
| rightElement | React.ReactElement | - | Element to render on the right side |
| rightElementClassName | string | - | Extra classes for the right element container |
| error | boolean | false | Whether the TextInput is in error state |
| helperText | string | - | Text to add to the bottom of the TextInput |
| size | "xs" \| "sm" \| "md" \| "lg" \| "xl" | "md" | Controls input height and padding |
| mode | "dark" \| "light" \| "system" \| "alt-system" | "system" | The mode of TextInput (controls color) |
| focusMode | "dark" \| "light" \| "system" \| "alt-system" | "system" | The focus ring color mode |
| labelHidden | boolean | false | Hides the label visually but retains accessibility |
| labelId | string | - | Id to use for the TextInput label |
| noBorder | boolean | false | Whether the TextInput has a border |
| raw | boolean | false | Whether to render with styles |
| inputClassName | string | - | CSS class(es) for the actual input element |

_Also supports all standard HTML input element attributes_

$3

| Prop | Type | Default | Description |
| ------------------- | --------------------------- | ------- | ---------------------------------------------- |
| rightElement | React.ReactElement | - | Element to render on the right side (required) |
| onMaskChange | (masked: boolean) => void | - | Callback fired when mask state changes |
| onTextInputMaskBlur | () => void | - | Callback fired when user blurs out |

_Also supports all TextInput props except rightElement is required_

Examples

$3

`tsx
import { TextInput } from "@versini/ui-textinput";
import { Button } from "@versini/ui-button";
import { useState } from "react";

function ValidationForm() {
const [errors, setErrors] = useState({});
const [values, setValues] = useState({
email: "",
password: "",
confirmPassword: ""
});

const handleSubmit = (e) => {
e.preventDefault();
// Validation logic here
};

return (


`tsx
import { TextInput } from "@versini/ui-textinput";

function SizeExamples() {
return (


`tsx
import { TextInput } from "@versini/ui-textinput";
import { ButtonIcon } from "@versini/ui-button";
import { IconSearch } from "@versini/ui-icons";

function SearchInput() {
return (
label="Search Products"
name="search"
placeholder="Search for products..."
rightElement={



}
rightElementClassName="mr-2"
/>
);
}
`

$3

`tsx
import { TextInput } from "@versini/ui-textinput";
import { ButtonIcon } from "@versini/ui-button";
import { IconClose } from "@versini/ui-icons";
import { useState } from "react";

function ClearableInput() {
const [value, setValue] = useState("");

return (
label="Search Query"
name="query"
value={value}
onChange={(e) => setValue(e.target.value)}
placeholder="Type to search..."
rightElement={
value ? (
setValue("")}>


) : undefined
}
/>
);
}
`

$3

`tsx
import { TextInputMask } from "@versini/ui-textinput";
import { ButtonIcon } from "@versini/ui-button";
import { IconEye, IconEyeOff } from "@versini/ui-icons";
import { useState } from "react";

function PasswordWithStrength() {
const [password, setPassword] = useState("");
const [masked, setMasked] = useState(true);

const getPasswordStrength = (password) => {
// Simple strength calculation
let strength = 0;
if (password.length >= 8) strength++;
if (/[A-Z]/.test(password)) strength++;
if (/[0-9]/.test(password)) strength++;
if (/[^A-Za-z0-9]/.test(password)) strength++;
return strength;
};

const strength = getPasswordStrength(password);
const strengthColors = ["red", "orange", "yellow", "green"];
const strengthLabels = ["Weak", "Fair", "Good", "Strong"];

return (


`tsx
import { TextInput } from "@versini/ui-textinput";

function ThemeVariations() {
return (