Input

A polished text field for fast, accessible forms.

input form field text field search validation error dashboard

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

 1import { IconMail } from "@tabler/icons-react";
 2import { Input } from "@/components/wensity/input";
 3
 4export function InputLabel() {
 5  return (
 6    <Input
 7      label="Email"
 8      placeholder="you@company.com"
 9      leftIcon={<IconMail />}
10    />
11  );
12}

Error

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

examples/input-error.tsx

 1import { IconMail } from "@tabler/icons-react";
 2import { Input } from "@/components/wensity/input";
 3
 4export function InputError() {
 5  return (
 6    <Input
 7      label="Email"
 8      defaultValue="hello@"
 9      error="Enter a complete email address."
10      leftIcon={<IconMail />}
11    />
12  );
13}

Icons

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

examples/input-icons.tsx

 1import { IconLock, IconUser } from "@tabler/icons-react";
 2import { Input } from "@/components/wensity/input";
 3
 4export function InputIcons() {
 5  return (
 6    <div className="space-y-4">
 7      <Input
 8        label="Display name"
 9        autoComplete="name"
10        placeholder="Parth Sharma"
11        leftIcon={<IconUser />}
12      />
13      <Input
14        label="Password"
15        type="password"
16        autoComplete="current-password"
17        placeholder="Enter password"
18        leftIcon={<IconLock />}
19      />
20    </div>
21  );
22}

Clearable

Controlled clear action keeps focus in the field after reset.

examples/input-clearable.tsx

 1"use client";
 2
 3import * as React from "react";
 4import { Input } from "@/components/wensity/input";
 5
 6export function InputClearable() {
 7  const [value, setValue] = React.useState("Quarterly roadmap");
 8
 9  return (
10    <Input
11      label="Project"
12      value={value}
13      onChange={(event) => setValue(event.target.value)}
14      onClear={() => setValue("")}
15      clearable
16    />
17  );
18}

Read-only

Read-only values stay selectable while reducing emphasis.

examples/input-readonly.tsx

1import { Input } from "@/components/wensity/input";
2
3export function InputReadonly() {
4  return <Input label="API endpoint" value="https://api.wensity.com/v1" readOnly />;
5}

Disabled

Disabled state blocks interaction while keeping layout stable.

examples/input-disabled.tsx

 1import { IconMail } from "@tabler/icons-react";
 2import { Input } from "@/components/wensity/input";
 3
 4export function InputDisabled() {
 5  return (
 6    <Input
 7      label="Billing email"
 8      placeholder="billing@company.com"
 9      defaultValue="billing@acme.com"
10      disabled
11      leftIcon={<IconMail />}
12    />
13  );
14}

Form

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

examples/input-form.tsx

 1import { IconAt, IconMail, IconUser } from "@tabler/icons-react";
 2import { Input } from "@/components/wensity/input";
 3
 4export function InputForm() {
 5  return (
 6    <div className="space-y-4">
 7      <Input
 8        label="Full name"
 9        placeholder="Parth Kumar"
10        leftIcon={<IconUser />}
11      />
12      <Input
13        label="Work email"
14        type="email"
15        placeholder="you@company.com"
16        leftIcon={<IconMail />}
17      />
18      <Input
19        label="Workspace slug"
20        placeholder="acme"
21        hint="Letters, numbers, and hyphens only."
22        leftIcon={<IconAt />}
23      />
24    </div>
25  );
26}