Input

Overview

The Input component is the standard text field used across all dashboard forms. It renders a label above the field, supports left/right icons, an inline suffix, a money variant, and error messages below.

Basic Usage

import { Input } from "@fsai/shared-ui";

<Input label="Full Name" placeholder="John Doe" />;

With Error

Pass the error prop as a string to display a validation message below the field.

<Input
  label="Email*"
  placeholder="contact@example.com"
  error="Invalid email address"
/>

With Icon

Use the Icon prop to display a contextual icon. Icons appear on the left by default.

import { Search, Globe } from '@fsai/icons';

<Input label="Search" Icon={Search} placeholder="Search vendors..." />
<Input label="Website" Icon={Globe} placeholder="https://example.com" />

Set iconPosition="right" to place the icon on the right side:

<Input
  label="Search"
  Icon={Search}
  iconPosition="right"
  placeholder="Search..."
/>

With Label Icon

Use labelIcon to render a small icon inline with the label text:

<Input label="Location" labelIcon="MapPin" placeholder="Enter location" />

With Suffix

Use suffix for inline unit indicators:

<Input label="Duration" type="number" suffix="min" placeholder="30" />
<Input label="Weight" type="number" suffix="kg" placeholder="0" />

Money Variant

The variant="money" preset configures the input for currency values with appropriate inputMode, step, and min attributes:

<Input label="Amount" variant="money" />

Sizes

Two sizes are available. Default is md.

<Input label="Standard" size="md" placeholder="Default size" />
<Input label="Compact" size="sm" placeholder="Smaller size" />

Full Width

Set fullWidth to make the input expand to fill its container:

<Input label="Address" fullWidth placeholder="123 Main St" />

Required Fields

When the required HTML attribute is set, the label automatically appends a red *:

<Input label="Name" required placeholder="Enter name" />

When using react-hook-form register rules for validation instead of the HTML required attribute, add * to the label manually:

<Input
  label="Name*"
  {...register("name", { ...formValidations.required })}
  error={errors.name?.message}
/>

With react-hook-form

The Input component works with react-hook-form's register by spreading the returned props. Pass the error message from formState.errors to the error prop.

import { useForm } from "react-hook-form";
import { Input } from "@fsai/shared-ui";

const {
  register,
  handleSubmit,
  formState: { errors },
} = useForm();

<form onSubmit={handleSubmit(onSubmit)}>
  <Input
    label="Email*"
    placeholder="contact@example.com"
    {...register("email", { required: "Email is required" })}
    error={errors.email?.message}
  />
</form>;

Input Primitive

For cases where you need a raw styled <input> without label or error handling, use InputPrimitive directly:

import { InputPrimitive } from '@fsai/shared-ui';

<InputPrimitive variant="outline" size="md" placeholder="Raw input" />
<InputPrimitive variant="filled" size="sm" placeholder="Filled variant" />

Guidelines

• Do always provide a label — the label is the primary identifier for the field. Either via prop, or via the <Label> component directly, like when using the primitive of the Input component.
• Do add a placeholder showing the expected format or an example value
• Do pass error={errors.fieldName?.message} from react-hook-form for inline validation feedback and better UX.
• Do use fullWidth when the input is the only field on a row
• Do use the Icon prop for contextual reinforcement (search, URL, globe)
• Don't use a placeholder as a substitute for a label
• Don't use variant="filled" in standard forms — reserve it for search bars and inline editing
• Don't add decorative icons that don't help the user understand the field's purpose