Input

Single-line text input with built-in theme styling, three sizes, and leading / trailing slots.

Input is the text input primitive. Controlled or uncontrolled, three sizes, optional leading + trailing slots for icons / clear buttons / unit labels.

API

<Input
  value={email}
  onChange={(v) => setEmail(v)}
  placeholder="you@example.com"
  type="email"
/>

<Input
  size="lg"
  leading={<Icon name="search" />}
  placeholder="Search…"
/>

<Input
  size="md"
  invalid={!!errors.password}
  trailing={
    <button onClick={() => setShow((s) => !s)}>
      <Icon name={show ? "eye-off" : "eye"} />
    </button>
  }
  type={show ? "text" : "password"}
/>

Props

Size scale

(Web is denser than native because mobile touch targets need extra height.)

Field integration

Input automatically picks up the invalid state from a parent <Field /> (via @plyxui/forms). No prop drilling.

<Field label="Email" error={errors.email}>
  <Input value={email} onChange={(v) => setEmail(v)} />
</Field>