Wensity

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.

inputformfieldtext fieldsearchvalidationerrordashboard
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
    />
  );
}

Search

Search-style input with icon, clear button, and native search semantics.

examples/input-search.tsx
import { IconSearch } from "@tabler/icons-react";
import { Input } from "@/components/wensity/input";


export function InputSearch() {
  return (
    <Input
      type="search"
      label="Search"
      placeholder="Search components..."
      leftIcon={<IconSearch />}
      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>
  );
}