Input

A highly customizable input field for forms, supporting variants, sizes, colors, adornments, and multiline mode.

Demo

Usage

TypeScript

import React, { useState } from "react";
import { Input } from "@libdev-ui/base";
import { FaSearch } from "react-icons/fa";
import { FaCheck } from "react-icons/fa";

export default function Example(): JSX.Element {
  const [value, setValue] = useState<string>("");

  return (
    <div style={{ display: "grid", gap: 12, maxWidth: 480 }}>

      <Input showClearButton={false} placeholder="Uncontrolled input" />

      <Input
        placeholder="Controlled input"
        value={value}
        onChange={(e: React.ChangeEvent<HTMLInputElement>) => setValue(e.target.value)}
        showClearButton
      />

      <Input
        placeholder="With adornments"
        startAdornment={<FaSearch aria-label="search"/>}
        endAdornment={<FaCheck aria-label="check"/>}
      />
    </div>
  );
}

JavaScript

import React, { useState } from "react";
import { Input } from "@libdev-ui/base";
import { FaSearch } from "react-icons/fa";
import { FaCheck } from "react-icons/fa";

export default function Example() {
  const [value, setValue] = useState("");

  return (
    <div style={{ display: "grid", gap: 12, maxWidth: 480 }}>

      <Input placeholder="Uncontrolled input" />

      <Input
        placeholder="Controlled input"
        value={value}
        onChange={(e) => setValue(e.target.value)}
        showClearButton
      />


      <Input
        placeholder="With adornments"
        startAdornment={<FaSearch aria-label="search"/>}
        endAdornment={<FaCheck aria-label="check"/>}
      />
    </div>
  );
}

Variants

TypeScript

import { Input } from "@libdev-ui/base";

export default function VariantsDemo(): JSX.Element {
  return (
    <div style={{ display: "grid", gap: 12 }}>
      <Input placeholder="Outlined (default)" variant="outlined" />
      <Input placeholder="Filled" variant="filled" />
      <Input placeholder="Ghost" variant="ghost" />
    </div>
  );
}

JavaScript

import { Input } from "@libdev-ui/base";

export default function VariantsDemo() {
  return (
    <div style={{ display: "grid", gap: 12 }}>
      <Input placeholder="Outlined (default)" variant="outlined" />
      <Input placeholder="Filled" variant="filled" />
      <Input placeholder="Ghost" variant="ghost" />
    </div>
  );
}

Sizes

TypeScript

import { Input } from "@libdev-ui/base";

export default function SizesDemo(): JSX.Element {
  return (
    <div style={{ display: "grid", gap: 12 }}>
      <Input placeholder="Small" size="sm" />
      <Input placeholder="Medium" size="md" />
      <Input placeholder="Large" size="lg" />
    </div>
  );
}

JavaScript

import { Input } from "@libdev-ui/base";

export default function SizesDemo() {
  return (
    <div style={{ display: "grid", gap: 12 }}>
      <Input placeholder="Small" size="sm" />
      <Input placeholder="Medium" size="md" />
      <Input placeholder="Large" size="lg" />
    </div>
  );
}

Colors

TypeScript

import { Input } from "@libdev-ui/base";

export default function ColorsDemo(): JSX.Element {
  return (
    <div style={{ display: "grid", gap: 12 }}>
      <Input placeholder="Primary" color="primary" />
      <Input placeholder="Secondary" color="secondary" />
      <Input placeholder="Success" color="success" />
      <Input placeholder="Danger" color="danger" />
      <Input placeholder="Custom var()" color="var(--color-accent)" />
    </div>
  );
}

JavaScript

import { Input } from "@libdev-ui/base";

export default function ColorsDemo() {
  return (
    <div style={{ display: "grid", gap: 12 }}>
      <Input placeholder="Primary" color="primary" />
      <Input placeholder="Secondary" color="secondary" />
      <Input placeholder="Success" color="success" />
      <Input placeholder="Danger" color="danger" />
      <Input placeholder="Custom var()" color="var(--color-accent)" />
    </div>
  );
}

Multiline

TypeScript

import { Input } from "@libdev-ui/base";

export default function MultilineDemo(): JSX.Element {
  return <Input placeholder="Write your message..." multiline rows={4} />;
}

JavaScript

import { Input } from "@libdev-ui/base";

export default function MultilineDemo() {
  return <Input placeholder="Write your message..." multiline rows={4} />;
}

---

Props

Prop	Type	Default	Description
value	string | number	—	Controlled value.
defaultValue	string | number	—	Uncontrolled initial value.
onChange	(e) => void	—	Fired on value change.
placeholder	string	—	Short hint shown before input.
type	string	"text"	HTML5 input type (ignored when multiline).
disabled	boolean	false	Disables the field.
error	boolean	false	Error state styling.
readOnly	boolean	false	Read-only field.
required	boolean	false	Required attribute.
fullWidth	boolean	false	Stretches to 100% width.
autoFocus	boolean	false	Focus on mount.
autoComplete	string	—	Native autocomplete.
multiline	boolean	false	Renders a <textarea>.
rows	number	—	Rows for multiline.
minRows	number	—	Minimum rows for multiline.
maxRows	number	—	Maximum rows for multiline.
startAdornment	ReactNode	—	Leading icon/text.
endAdornment	ReactNode	—	Trailing icon/text.
showClearButton	boolean	true	Shows ✕ button (single-line only).
onClear	() => void	—	Called after clear.
variant	"filled" | "outlined" | "ghost"	"outlined"	Visual variant.
size	"sm" | "md" | "lg"	"md"	Size token.
color	"primary" | "secondary" | "success" | "danger" | "warning" | "info" | string	"primary"	Color token or custom CSS color.
radius	"sm" | "md" | "lg"	"md"	Corner radius.
className	string	—	Custom class.
style	React.CSSProperties	—	Inline styles.

Ensure this MDX page imports both Tabs and TabItem. If you see an error like “Expected component TabItem to be defined”, it means the import is missing at the top of the page.

Accessibility

• Proper ARIA attributes are applied automatically (e.g., aria-invalid, aria-required).
• The clear button has aria-label="Clear" and title="Clear".
• Escape key clears the input (single-line mode) if the clear button is enabled.

Related hook

See useInputBase for the centralized behavior and ARIA details.