Input

A polished form input primitive for app interfaces. It handles labels, helper text, error messaging, icon slots, clearable values, disabled and read-only states, and small/default/large sizing from one installable component.

Loading preview...

Examples

Practical examples and common states for the same installable component.

Label

Standard labeled field for forms and settings.

examples/input-label.tsx
import { IconMail } from "@tabler/icons-react";
import { Input } from "@/components/wensity/input";
export function InputLabel() {
return (
<Input
label="Email"
placeholder="you@company.com"
leftIcon={<IconMail />}
/>
);
}

Hint

Helper copy is wired with aria-describedby automatically.

examples/input-hint.tsx
import { IconAt } from "@tabler/icons-react";
import { Input } from "@/components/wensity/input";
export function InputHint() {
return (
<Input
label="Workspace slug"
placeholder="acme"
hint="This will be used in your public workspace URL."
leftIcon={<IconAt />}
/>
);
}

Error

Validation errors update border, focus ring, and accessibility state.

examples/input-error.tsx
import { IconMail } from "@tabler/icons-react";
import { Input } from "@/components/wensity/input";
export function InputError() {
return (
<Input
label="Email"
defaultValue="hello@"
error="Enter a complete email address."
leftIcon={<IconMail />}
/>
);
}

Icons

Left and right slots keep dense form rows easy to scan.

examples/input-icons.tsx
import { IconLock, IconUser } from "@tabler/icons-react";
import { Input } from "@/components/wensity/input";
export function InputIcons() {
return (
<div className="space-y-4">
<Input
label="Display name"
autoComplete="name"
placeholder="Parth Sharma"
leftIcon={<IconUser />}
/>
<Input
label="Password"
type="password"
autoComplete="current-password"
placeholder="Enter password"
leftIcon={<IconLock />}
/>
</div>
);
}

Clearable

Controlled clear action keeps focus in the field after reset.

examples/input-clearable.tsx
"use client";
import * as React from "react";
import { Input } from "@/components/wensity/input";
export function InputClearable() {
const [value, setValue] = React.useState("Quarterly roadmap");
return (
<Input
label="Project"
value={value}
onChange={(event) => setValue(event.target.value)}
onClear={() => setValue("")}
clearable
/>
);
}

Sizes

Small, default, and large sizes for dense forms or hero forms.

examples/input-sizes.tsx
import { IconSearch } from "@tabler/icons-react";
import { Input } from "@/components/wensity/input";
export function InputSizes() {
return (
<div className="flex items-end gap-3">
<Input inputSize="sm" placeholder="Small" leftIcon={<IconSearch />} />
<Input inputSize="md" placeholder="Default" leftIcon={<IconSearch />} />
<Input inputSize="lg" placeholder="Large" leftIcon={<IconSearch />} />
</div>
);
}

Read-only

Read-only values stay selectable while reducing emphasis.

examples/input-readonly.tsx
import { Input } from "@/components/wensity/input";
export function InputReadonly() {
return <Input label="API endpoint" value="https://api.wensity.com/v1" readOnly />;
}

Disabled

Disabled state blocks interaction while keeping layout stable.

examples/input-disabled.tsx
import { IconMail } from "@tabler/icons-react";
import { Input } from "@/components/wensity/input";
export function InputDisabled() {
return (
<Input
label="Billing email"
placeholder="billing@company.com"
defaultValue="billing@acme.com"
disabled
leftIcon={<IconMail />}
/>
);
}

Form

Stack labeled fields with icons and helper copy for compact settings or onboarding flows.

examples/input-form.tsx
import { IconAt, IconMail, IconUser } from "@tabler/icons-react";
import { Input } from "@/components/wensity/input";
export function InputForm() {
return (
<div className="space-y-4">
<Input
label="Full name"
placeholder="Parth Kumar"
leftIcon={<IconUser />}
/>
<Input
label="Work email"
type="email"
placeholder="you@company.com"
leftIcon={<IconMail />}
/>
<Input
label="Workspace slug"
placeholder="acme"
hint="Letters, numbers, and hyphens only."
leftIcon={<IconAt />}
/>
</div>
);
}