Input

Installation

Complete project setup first. Your configuration must select react/aria and include your Design System ID.

pnpm exec frontfriend download input -f react --primitive aria

Review dependencies reported by the downloader and keep your source changes in version control.

Usage

<Input
  placeholder="Placeholder"
  type="text"
  clearable={false}
  inputClass=""
  prefix=""
  suffix=""
  disabled={false}
/>

Examples

Text Input

<Input
  placeholder="Placeholder"
  type="text"
  clearable={false}
  inputClass=""
  prefix=""
  suffix=""
  disabled={false}
/>

Clearable

<Input
  placeholder="Placeholder"
  type="text"
  clearable
  inputClass=""
  prefix=""
  suffix=""
  disabled={false}
  defaultValue="Value"
/>

Suffix Prefix

import { Input } from "@/components/ui/input";
<Input placeholder="Placeholder" type="text" clearable={false} prefix="€" suffix="Euro" disabled={false} defaultValue="10,00" inputClass="pl-6 pr-12" />;

Suffix

import { Input } from "@/components/ui/input";
<Input placeholder="Placeholder" type="text" clearable={false} prefix="" suffix=".com" disabled={false} defaultValue="example" inputClass="pr-12" />;

Suffix Icon

import { Input } from "@/components/ui/input";
<Input placeholder="Placeholder" type="text" clearable={false} inputClass="" prefix="" suffix="" disabled={false} suffixIcon="Mail" defaultValue="hello@example.com" />;

Prefix Icon

import { Input } from "@/components/ui/input";
<Input placeholder="Insert your device name" type="text" clearable={false} inputClass="" prefix="" suffix="" disabled={false} prefixIcon="Smartphone" />;

Custom Elements On Start

import { Input } from "@/components/ui/input";
import { Badge } from "@/components/ui/badge";
<Input placeholder="Placeholder" type="text" clearable={false} prefix="" suffix="" disabled={false} defaultValue="Keyword" inputClass="pl-16">
  <Badge
    variant="info"
    className="absolute left-3 top-1/2 transform -translate-y-1/2"
  >
    ⌘ K
  </Badge>
</Input>;

Custom Elements On End

import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
<Input placeholder="Placeholder" type="text" clearable={false} prefix="" suffix="" disabled={false} inputClass="pr-20">
  <Button
    variant="ghost"
    className="absolute right-3 top-1/2 transform -translate-y-1/2"
    size="sm"
  >
    Send
  </Button>
</Input>;

Password

<Input
  placeholder="Placeholder"
  type="password"
  clearable={false}
  inputClass=""
  prefix=""
  suffix=""
  defaultValue="PlxjUHaTxyLF"
/>

Search

<Input placeholder="Search..." type="search" clearable={false} inputClass="" prefix="" suffix="" />

Number

<Input
  placeholder="Placeholder"
  type="number"
  clearable={false}
  inputClass=""
  prefix=""
  suffix=""
  defaultValue={4}
/>

File Input

<Input placeholder="Placeholder" type="file" clearable={false} inputClass="" prefix="" suffix="" />

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by React Aria.

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.