Input

Displays a standard text input field.

Installation

npx shadcn@latest add input

Usage

import { Input } from "@hoag/ui/input";
 
<Input placeholder="Enter your email" />;

In this repo, the implementation is already available at packages/ui/src/common/data-input/input/input.tsx.

Basic

<Input placeholder="Default input" />
<Input type="email" placeholder="name@example.com" />

Input Types

<Input type="text" placeholder="Text" />
<Input type="password" placeholder="Password" />
<Input type="number" placeholder="Number" />
<Input type="date" />

States

<Input value="Read only value" readOnly />
<Input disabled value="Disabled input" />
<Input aria-invalid placeholder="Invalid input" className="border-red-500 focus-visible:ring-red-500" />

With Label

Username

<Label htmlFor="email">Email</Label>
<Input id="email" type="email" placeholder="you@example.com" />

Required Field

Full name*

Phone*

<Input label="Full name" isRequired placeholder="Nguyen Van A" />

Helper & Error Text

We'll only use this for account notifications.

Work email

Please enter a valid company email address.

<Input
  label="Email"
  placeholder="you@example.com"
  helpText="We'll only use this for account notifications."
/>
 
<Input
  label="Work email"
  value="not-an-email"
  readOnly
  isError
  errorText="Please enter a valid company email address."
/>

With Addons

https://

Website

Amount

VND

<Input label="Website" addonBefore="https://" placeholder="your-domain.com" />
<Input label="Amount" addonAfter="VND" placeholder="100000" type="number" />

Clearable Input

<Input
  label="Search"
  value={value}
  onChange={(e) => setValue(e.target.value)}
  showRemoveIcon
  onClearValue={() => setValue("")}
/>

Sizes

<Input size="default" placeholder="Default size (h-8)" />
<Input size="md" placeholder="Medium size (h-9)" />
<Input size="lg" placeholder="Large size (h-10)" />
<Input size="xl" placeholder="Extra large size (h-11)" />
<Input size="2xl" placeholder="2X large size (h-12)" />

Sizes with Label

<Input size="default" label="Email" placeholder="Default (h-8)" />
<Input size="md" label="Email" placeholder="Medium (h-9)" />
<Input size="lg" label="Email" placeholder="Large (h-10)" />
<Input size="xl" label="Email" placeholder="Extra Large (h-11)" />
<Input size="2xl" label="Email" placeholder="2X Large (h-12)" />

Form-like Group

First name

Last name

Company

optional

<div className="space-y-4">
  <Input label="First name" placeholder="An" />
  <Input label="Last name" placeholder="Nguyen" />
  <Input label="Company" placeholder="Acme Inc." addonAfter="optional" />
</div>

API Reference

Prop	Type	Default	Description
`size`	`"default" \| "md" \| "lg" \| "xl" \| "2xl"`	`"default"`	Input size variant (h-8, h-9, h-10, h-11, h-12 respectively). 2xl uses 16px font.
`label`	`React.ReactNode`	`undefined`	Label shown above the input.
`isRequired`	`boolean`	`false`	Show required indicator next to label.
`isError`	`boolean`	`false`	Marks input as error state.
`helpText`	`React.ReactNode`	`undefined`	Helper text below input.
`errorText`	`React.ReactNode`	`undefined`	Error text below input (when `isError`).
`addonBefore`	`React.ReactNode`	`undefined`	Content rendered before input content area.
`addonAfter`	`React.ReactNode`	`undefined`	Content rendered after input content area.
`showRemoveIcon`	`boolean`	`true`	Show clear icon when input has value.
`onClearValue`	`() => void`	`undefined`	Callback fired when clear icon is clicked.
`inputClassName`	`string`	`undefined`	Extra classes for the native `<input>`.
`wrapperClassName`	`string`	`undefined`	Extra classes for outer wrapper.

Button Checkbox