Input
Text input field. Supports text, password, number, email types with focus and error states.
Examples
Default
With Label
Input paired with a label and helper text.
Disabled
Password
Error State
Input with error styling and message.
With Icon
Input with a leading search icon.
File Input
Installation
pnpm add @rokle/components @rokle/tokensInstalls with the default Rokle brand. Generate a custom brand on rokle.app to use your own colours and personality.
Usage
import { Input } from "@rokle/components";import { Input } from "@rokle/components";
export function Example() {
return (
<div className="flex flex-col gap-3 max-w-sm">
<Input placeholder="Default" />
<Input placeholder="Disabled" disabled />
<Input type="password" placeholder="Password" />
</div>
);
}Source
The implementation source for this component. Copy it into your project and customise.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| type | string | "text" | HTML input type. |
| placeholder | string | - | Placeholder text. |
| disabled | boolean | false | Disable interaction. |