Live Docs

Navigation

Forms /

stable

Input

Text input control. 3 sizes, error state, leading/trailing icon, clearable, input group/addon, dan semua atribut native input.

import { Input, InputGroup, InputAddon } from "@naraya/ui";

Overview

Wrapper minimal di atas native input. Dukung leadingIcon/trailingIcon (icon di dalam input), prop clearable (tombol ✕), serta komposisi InputGroup + InputAddon untuk addon segmen (mis. https:// … .com). Untuk form lengkap (label, helper, error), bungkus dengan Field.

Examples

Default

<Input placeholder="nama@naraya.id" />

Sizes

<Input size="sm" />
<Input size="md" />
<Input size="lg" />

Controlled

const [value, setValue] = useState("");

<Input
  value={value}
  onChange={(e) => setValue(e.target.value)}
/>

With label (manual)

<Stack gap="1">
  <Label htmlFor="email" required>Email</Label>
  <Input id="email" type="email" />
</Stack>

Error state

<Input error placeholder="..." />

Disabled

<Input disabled defaultValue="..." />

Types

<Input type="email" />
<Input type="password" />
<Input type="number" />
<Input type="date" />

File input → pakai FileUpload

Pilih dokumen...Pilih File

<Input type="file" /> native-nya susah di-style konsisten — pakai FileUpload (variant input setinggi field form).

// Hindari: <Input type="file" /> (native, susah di-style)
import { FileUpload } from "@naraya/ui";

<FileUpload variant="button" />        // tombol compact
<FileUpload onChange={setFiles} />     // dropzone drag-drop

With leading icon

import { Search } from "@naraya/icons";

<Input leadingIcon={<Search size={16} />} placeholder="Cari..." />

Clearable

const [value, setValue] = useState("Able to clear");

<Input
  clearable
  value={value}
  onChange={(e) => setValue(e.target.value)}
/>

// Bisa dikombinasi dengan leadingIcon:
<Input clearable leadingIcon={<Search size={16} />} />

Password toggle (trailing icon)

const [show, setShow] = useState(false);

<Input
  type={show ? "text" : "password"}
  trailingIcon={
    <button type="button" onClick={() => setShow(!show)}>
      {show ? <EyeOff size={16} /> : <Eye size={16} />}
    </button>
  }
/>

Input group / addon

https://.com
Rp
<InputGroup>
  <InputAddon>https://</InputAddon>
  <Input placeholder="your-domain" />
  <InputAddon>.com</InputAddon>
</InputGroup>

Props

PropTypeDefaultDescription
size"sm" | "md" | "lg""md"Tinggi & font-size input.
errorbooleanfalseAktifkan red border + ring untuk error state.
leadingIconReactNode—Icon/elemen di dalam input sebelah kiri (dekoratif).
trailingIconReactNode—Icon/elemen di dalam input sebelah kanan (mis. tombol password toggle).
clearablebooleanfalseTampilkan tombol ✕ untuk mengosongkan field saat ada nilai.
onClear() => void—Dipanggil setelah field dibersihkan via tombol clear.
disabledbooleanfalseDisable input.
...restInputHTMLAttributes—Semua atribut native input (type, value, onChange, placeholder, autoFocus, etc).

Tokens Used

--bg-surface

Background input

--border-subtle

Border default

--color-primary

Border focus + ring

--color-error

Border + ring saat error

--radius-md

Border radius

Accessibility

  • Selalu pasangkan dengan Label via htmlFor / id untuk screen reader.
  • Pakai type yang tepat (email/number/tel/url) — keyboard mobile menyesuaikan.
  • Untuk error, kombinasikan dengan Field yang punya role='alert' otomatis.
  • Focus ring visible (focus-visible).
  • Disabled tetap fokus-able untuk screen reader navigation tapi tidak menerima input.