Input

Text field primitive aligned with the SumX portal theme (border-gray-gray, text-black-soft, placeholder:text-gray-dark).

Interactive demo

<Input
  type="text"
  value="Hello SumX"
  onChange={(e) => setValue(e.target.value)}
  placeholder="Type here…"
  
/>

Import

import { Input, type InputProps } from '@sumx/ui';

Usage

<Input
  placeholder="Search…"
  value={query}
  onChange={(e) => setQuery(e.target.value)}
/>
 
<Input type="email" disabled className="max-w-sm" />

Props

InputProps = React.InputHTMLAttributes<HTMLInputElement> — all native input attributes and ref forwarding.

Override with className via cn() merge.

With React Hook Form

<Input {...register('name')} />

Portal vs kit

The portal src/shared/components/ui/input.tsx adds view-only and icon wrappers for ERP forms. @sumx/ui Input is the lean primitive for kit packages (@sumx/sumx-editor variable search, crop dialog fields).

Related

• Label
• SumX Editor