Input

A text input component with feedback color states, size variants that share the same sizing system as the button component, and composable parts — <InputRoot> + <InputField> — for building inputs with icons and addons.

Feedback

Apply semantic feedback colors to indicate validation state or context.

AstroReactSvelteVue

PreviewCode

---
import Input from "../Input.astro";
import { stack } from "@pindoba/styled-system/patterns";
---

<div class={stack({ gap: "md", direction: "column" })}>
  <Input feedback="neutral" placeholder="Neutral" />
  <Input feedback="primary" placeholder="Primary" />
  <Input feedback="success" placeholder="Success" />
  <Input feedback="danger" placeholder="Danger" />
  <Input feedback="warning" placeholder="Warning" />
</div>

import { Input } from "../Input";
import { stack } from "@pindoba/styled-system/patterns";

export default function FeedbackDemo() {
  return (
    <div className={stack({ gap: "md", direction: "column" })}>
      <Input feedback="neutral" placeholder="Neutral" />
      <Input feedback="primary" placeholder="Primary" />
      <Input feedback="success" placeholder="Success" />
      <Input feedback="danger" placeholder="Danger" />
      <Input feedback="warning" placeholder="Warning" />
    </div>
  );
}

<script lang="ts">
  import Input from "../Input.svelte";
  import { stack } from "@pindoba/styled-system/patterns";
</script>

<div class={stack({ gap: "md", direction: "column" })}>
  <Input feedback="neutral" placeholder="Neutral" />
  <Input feedback="primary" placeholder="Primary" />
  <Input feedback="success" placeholder="Success" />
  <Input feedback="danger" placeholder="Danger" />
  <Input feedback="warning" placeholder="Warning" />
</div>

<script setup lang="ts">
import { Input } from "@pindoba/vue-input";
import { stack } from "@pindoba/styled-system/patterns";
const col = stack({ gap: "md", direction: "column" });
</script>

<template>
  <div :class="col">
    <Input feedback="neutral" placeholder="Neutral" />
    <Input feedback="primary" placeholder="Primary" />
    <Input feedback="success" placeholder="Success" />
    <Input feedback="danger" placeholder="Danger" />
    <Input feedback="warning" placeholder="Warning" />
  </div>
</template>

Size

Inputs come in four sizes that share the same height system as buttons.

AstroReactSvelteVue

PreviewCode

---
import Input from "../Input.astro";
import { stack } from "@pindoba/styled-system/patterns";
---

<div class={stack({ gap: "md", direction: "column" })}>
  <Input size="xs" placeholder="Extra Small" />
  <Input size="sm" placeholder="Small" />
  <Input size="md" placeholder="Medium" />
  <Input size="lg" placeholder="Large" />
</div>

import { Input } from "../Input";
import { stack } from "@pindoba/styled-system/patterns";

export default function SizeDemo() {
  return (
    <div className={stack({ gap: "md", direction: "column" })}>
      <Input size="xs" placeholder="Extra Small" />
      <Input size="sm" placeholder="Small" />
      <Input size="md" placeholder="Medium" />
      <Input size="lg" placeholder="Large" />
    </div>
  );
}

<script lang="ts">
  import Input from "../Input.svelte";
  import { stack } from "@pindoba/styled-system/patterns";
</script>

<div class={stack({ gap: "md", direction: "column" })}>
  <Input size="xs" placeholder="Extra Small" />
  <Input size="sm" placeholder="Small" />
  <Input size="md" placeholder="Medium" />
  <Input size="lg" placeholder="Large" />
</div>

<script setup lang="ts">
import { Input } from "@pindoba/vue-input";
import { stack } from "@pindoba/styled-system/patterns";
const col = stack({ gap: "md", direction: "column" });
</script>

<template>
  <div :class="col">
    <Input size="xs" placeholder="Extra Small" />
    <Input size="sm" placeholder="Small" />
    <Input size="md" placeholder="Medium" />
    <Input size="lg" placeholder="Large" />
  </div>
</template>

Icons & addons (Affix)

To add icons, stamps, or badges inside the frame, compose the parts: <InputRoot> carries the chrome (size, feedback, background, border) and <InputField> is the bare <input>; wrap each addon in <Affix>. side="start" (default) places the addon before the field, side="end" after it, pushed to the far edge. The frame’s edge padding tightens automatically on the affix side, row-aware addons (Badge, Stamp, Kbd) size themselves to the control row, and a click anywhere in the frame focuses the field. They scale across every size:

AstroReactSvelteVue

PreviewCode

USD

---
import InputRoot from "../InputRoot.astro";
import InputField from "../InputField.astro";
import Affix from "@pindoba/astro-affix";
import Stamp from "@pindoba/astro-stamp";
import Badge from "@pindoba/astro-badge";
import { DollarSign, Search } from "@lucide/astro";
import { stack } from "@pindoba/styled-system/patterns";

const sizes = ["xs", "sm", "md", "lg"] as const;
---

<div class={stack({ gap: "md", direction: "column" })}>
  {
    sizes.map((size) => (
      <InputRoot size={size}>
        <Affix>
          <Stamp emphasis="ghost" border="muted">
            <DollarSign />
          </Stamp>
        </Affix>
        <InputField placeholder={`Amount (${size})`} />
        <Affix side="end">
          <Badge emphasis="secondary">USD</Badge>
        </Affix>
      </InputRoot>
    ))
  }
  {
    sizes.map((size) => (
      <InputRoot size={size}>
        <Affix>
          <Stamp emphasis="ghost" border="muted">
            <Search />
          </Stamp>
        </Affix>
        <InputField placeholder={`Search (${size})`} />
      </InputRoot>
    ))
  }
</div>

USD

import { InputRoot } from "../InputRoot";
import { InputField } from "../InputField";
import { Affix } from "@pindoba/react-affix";
import { Stamp } from "@pindoba/react-stamp";
import { Badge } from "@pindoba/react-badge";
import { stack } from "@pindoba/styled-system/patterns";

const DollarSignIcon = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth="2"
    strokeLinecap="round"
    strokeLinejoin="round"
  >
    <line x1="12" x2="12" y1="2" y2="22" />
    <path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" />
  </svg>
);

const SearchIcon = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth="2"
    strokeLinecap="round"
    strokeLinejoin="round"
  >
    <circle cx="11" cy="11" r="8" />
    <path d="m21 21-4.3-4.3" />
  </svg>
);

const sizes = ["xs", "sm", "md", "lg"] as const;

export default function LeadingTrailingSizesDemo() {
  return (
    <div className={stack({ gap: "md", direction: "column" })}>
      {sizes.map((size) => (
        <InputRoot key={`amount-${size}`} size={size}>
          <Affix>
            <Stamp emphasis="ghost" border="muted">
              <DollarSignIcon />
            </Stamp>
          </Affix>
          <InputField placeholder={`Amount (${size})`} />
          <Affix side="end">
            <Badge emphasis="secondary">USD</Badge>
          </Affix>
        </InputRoot>
      ))}

      {sizes.map((size) => (
        <InputRoot key={`search-${size}`} size={size}>
          <Affix>
            <Stamp emphasis="ghost" border="muted">
              <SearchIcon />
            </Stamp>
          </Affix>
          <InputField placeholder={`Search (${size})`} />
        </InputRoot>
      ))}
    </div>
  );
}

USD

<script lang="ts">
  import InputRoot from "../input-root.svelte";
  import InputField from "../input-field.svelte";
  import Affix from "@pindoba/svelte-affix";
  import Stamp from "@pindoba/svelte-stamp";
  import Badge from "@pindoba/svelte-badge";
  import LucideSearch from "@lucide/svelte/icons/search";
  import LucideDollarSign from "@lucide/svelte/icons/dollar-sign";
  import { stack } from "@pindoba/styled-system/patterns";

  const sizes = ["xs", "sm", "md", "lg"] as const;
</script>

<div class={stack({ gap: "md", direction: "column" })}>
  {#each sizes as size (size)}
    <InputRoot {size}>
      <Affix>
        <Stamp emphasis="ghost" border="muted">
          <LucideDollarSign />
        </Stamp>
      </Affix>
      <InputField placeholder={`Amount (${size})`} />
      <Affix side="end">
        <Badge emphasis="secondary">USD</Badge>
      </Affix>
    </InputRoot>
  {/each}

  {#each sizes as size (size)}
    <InputRoot {size}>
      <Affix>
        <Stamp emphasis="ghost" border="muted">
          <LucideSearch />
        </Stamp>
      </Affix>
      <InputField placeholder={`Search (${size})`} />
    </InputRoot>
  {/each}
</div>

USD

<script setup lang="ts">
import { InputRoot, InputField } from "@pindoba/vue-input";
import { Affix } from "@pindoba/vue-affix";
import { Stamp } from "@pindoba/vue-stamp";
import { Badge } from "@pindoba/vue-badge";
import { stack } from "@pindoba/styled-system/patterns";
import { Search, DollarSign } from "./_icons";
const col = stack({ gap: "md", direction: "column" });
const sizes = ["xs", "sm", "md", "lg"] as const;
</script>

<template>
  <div :class="col">
    <InputRoot v-for="size in sizes" :key="`amt-${size}`" :size="size">
      <Affix
        ><Stamp emphasis="ghost" border="muted"><DollarSign /></Stamp
      ></Affix>
      <InputField :placeholder="`Amount (${size})`" />
      <Affix side="end"><Badge emphasis="secondary">USD</Badge></Affix>
    </InputRoot>
    <InputRoot v-for="size in sizes" :key="`search-${size}`" :size="size">
      <Affix
        ><Stamp emphasis="ghost" border="muted"><Search /></Stamp
      ></Affix>
      <InputField :placeholder="`Search (${size})`" />
    </InputRoot>
  </div>
</template>

Interactive buttons (clear, password reveal)

An affix can also hold a real <Button> — a clear button, a password reveal, an inline action. Put the button inside an <Affix> (without decorative, so it stays clickable and visible to assistive technology) and it sizes itself to the row automatically, just like Stamp and Badge. Clicking the button keeps its own focus; clicking anywhere else in the frame still focuses the field. emphasis="ghost" with shape="circle" or shape="square" is the usual look for these affordances:

AstroReactSvelteVue

PreviewCode

---
import InputRoot from "../InputRoot.astro";
import InputField from "../InputField.astro";
import Affix from "@pindoba/astro-affix";
import Button from "@pindoba/astro-button";
import Stamp from "@pindoba/astro-stamp";
import { Eye, EyeOff, Search, X } from "@lucide/astro";
import { stack } from "@pindoba/styled-system/patterns";

const sizes = ["xs", "sm", "md", "lg"] as const;
---

<div class={stack({ gap: "md", direction: "column" })}>
  <InputRoot>
    <Affix decorative>
      <Stamp emphasis="ghost">
        <Search />
      </Stamp>
    </Affix>
    <InputField
      id="astro-input-affix-clear-field"
      value="Clear me"
      placeholder="Search…"
    />
    <Affix side="end">
      <Button
        id="astro-input-affix-clear-btn"
        emphasis="ghost"
        shape="circle"
        aria-label="Clear"
      >
        <X />
      </Button>
    </Affix>
  </InputRoot>

  <InputRoot>
    <InputField
      id="astro-input-affix-pw-field"
      type="password"
      value="hunter2"
      placeholder="Password"
    />
    <Affix side="end">
      <Button
        id="astro-input-affix-pw-btn"
        emphasis="ghost"
        shape="square"
        aria-label="Show password"
        aria-pressed="false"
      >
        <span data-icon="show"><Eye /></span>
        <span data-icon="hide" hidden><EyeOff /></span>
      </Button>
    </Affix>
  </InputRoot>

  {
    sizes.map((size) => (
      <InputRoot size={size}>
        <InputField value={`Clearable (${size})`} />
        <Affix side="end">
          <Button emphasis="ghost" shape="circle" aria-label="Clear">
            <X />
          </Button>
        </Affix>
      </InputRoot>
    ))
  }
</div>

<style>
  /* The icon-swap spans must not add an inline line box (it would push the
     glyph off the button's flex center). [hidden] keeps working because the
     rule below re-asserts it over the display override. */
  [data-icon] {
    display: inline-flex;
  }
  [data-icon][hidden] {
    display: none;
  }
</style>

<script>
  const clearField = document.getElementById("astro-input-affix-clear-field");
  document
    .getElementById("astro-input-affix-clear-btn")
    ?.addEventListener("click", () => {
      if (clearField instanceof HTMLInputElement) {
        clearField.value = "";
        clearField.focus();
      }
    });

  const pwField = document.getElementById("astro-input-affix-pw-field");
  const pwButton = document.getElementById("astro-input-affix-pw-btn");
  pwButton?.addEventListener("click", () => {
    if (!(pwField instanceof HTMLInputElement) || !pwButton) return;
    const reveal = pwField.type === "password";
    pwField.type = reveal ? "text" : "password";
    pwButton.setAttribute("aria-pressed", String(reveal));
    pwButton.setAttribute(
      "aria-label",
      reveal ? "Hide password" : "Show password",
    );
    pwButton
      .querySelector("[data-icon='show']")
      ?.toggleAttribute("hidden", reveal);
    pwButton
      .querySelector("[data-icon='hide']")
      ?.toggleAttribute("hidden", !reveal);
  });
</script>

import { useState } from "react";
import { InputRoot } from "../InputRoot";
import { InputField } from "../InputField";
import { Affix } from "@pindoba/react-affix";
import { Button } from "@pindoba/react-button";
import { Stamp } from "@pindoba/react-stamp";
import { stack } from "@pindoba/styled-system/patterns";

const XIcon = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth="2"
    strokeLinecap="round"
    strokeLinejoin="round"
  >
    <path d="M18 6 6 18" />
    <path d="m6 6 12 12" />
  </svg>
);

const EyeIcon = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth="2"
    strokeLinecap="round"
    strokeLinejoin="round"
  >
    <path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0" />
    <circle cx="12" cy="12" r="3" />
  </svg>
);

const EyeOffIcon = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth="2"
    strokeLinecap="round"
    strokeLinejoin="round"
  >
    <path d="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49" />
    <path d="M14.084 14.158a3 3 0 0 1-4.242-4.242" />
    <path d="M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143" />
    <path d="m2 2 20 20" />
  </svg>
);

const SearchIcon = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth="2"
    strokeLinecap="round"
    strokeLinejoin="round"
  >
    <circle cx="11" cy="11" r="8" />
    <path d="m21 21-4.3-4.3" />
  </svg>
);

const sizes = ["xs", "sm", "md", "lg"] as const;

export default function AffixButtonsDemo() {
  const [search, setSearch] = useState("Clear me");
  const [password, setPassword] = useState("hunter2");
  const [revealed, setRevealed] = useState(false);

  return (
    <div className={stack({ gap: "md", direction: "column" })}>
      <InputRoot>
        <Affix decorative>
          <Stamp emphasis="ghost">
            <SearchIcon />
          </Stamp>
        </Affix>
        <InputField
          value={search}
          placeholder="Search…"
          onChange={(e) => setSearch(e.currentTarget.value)}
        />
        {search && (
          <Affix side="end">
            <Button
              emphasis="ghost"
              shape="circle"
              aria-label="Clear"
              onClick={() => setSearch("")}
            >
              <XIcon />
            </Button>
          </Affix>
        )}
      </InputRoot>

      <InputRoot>
        <InputField
          value={password}
          type={revealed ? "text" : "password"}
          placeholder="Password"
          onChange={(e) => setPassword(e.currentTarget.value)}
        />
        <Affix side="end">
          <Button
            emphasis="ghost"
            shape="square"
            aria-label={revealed ? "Hide password" : "Show password"}
            aria-pressed={revealed}
            onClick={() => setRevealed((r) => !r)}
          >
            {revealed ? <EyeOffIcon /> : <EyeIcon />}
          </Button>
        </Affix>
      </InputRoot>

      {sizes.map((size) => (
        <InputRoot key={size} size={size}>
          <InputField defaultValue={`Clearable (${size})`} />
          <Affix side="end">
            <Button emphasis="ghost" shape="circle" aria-label="Clear">
              <XIcon />
            </Button>
          </Affix>
        </InputRoot>
      ))}
    </div>
  );
}

<script lang="ts">
  import InputRoot from "../input-root.svelte";
  import InputField from "../input-field.svelte";
  import Affix from "@pindoba/svelte-affix";
  import Button from "@pindoba/svelte-button";
  import Stamp from "@pindoba/svelte-stamp";
  import LucideX from "@lucide/svelte/icons/x";
  import LucideEye from "@lucide/svelte/icons/eye";
  import LucideEyeOff from "@lucide/svelte/icons/eye-off";
  import LucideSearch from "@lucide/svelte/icons/search";
  import { stack } from "@pindoba/styled-system/patterns";

  let search = $state("Clear me");
  let password = $state("hunter2");
  let revealed = $state(false);

  const sizes = ["xs", "sm", "md", "lg"] as const;
</script>

<div class={stack({ gap: "md", direction: "column" })}>
  <InputRoot>
    <Affix decorative>
      <Stamp emphasis="ghost"><LucideSearch /></Stamp>
    </Affix>
    <InputField bind:value={search} placeholder="Search…" />
    {#if search}
      <Affix side="end">
        <Button
          emphasis="ghost"
          shape="circle"
          aria-label="Clear"
          onclick={() => (search = "")}
        >
          <LucideX />
        </Button>
      </Affix>
    {/if}
  </InputRoot>

  <InputRoot>
    <InputField
      bind:value={password}
      type={revealed ? "text" : "password"}
      placeholder="Password"
    />
    <Affix side="end">
      <Button
        emphasis="ghost"
        shape="square"
        aria-label={revealed ? "Hide password" : "Show password"}
        aria-pressed={revealed}
        onclick={() => (revealed = !revealed)}
      >
        {#if revealed}<LucideEyeOff />{:else}<LucideEye />{/if}
      </Button>
    </Affix>
  </InputRoot>

  {#each sizes as size (size)}
    <InputRoot {size}>
      <InputField value={`Clearable (${size})`} />
      <Affix side="end">
        <Button emphasis="ghost" shape="circle" aria-label="Clear">
          <LucideX />
        </Button>
      </Affix>
    </InputRoot>
  {/each}
</div>

<script setup lang="ts">
import { ref } from "vue";
import { InputRoot, InputField } from "@pindoba/vue-input";
import { Affix } from "@pindoba/vue-affix";
import { Button } from "@pindoba/vue-button";
import { Stamp } from "@pindoba/vue-stamp";
import { stack } from "@pindoba/styled-system/patterns";
import { Search, X, Eye, EyeOff } from "./_icons";

const col = stack({ gap: "md", direction: "column" });
const sizes = ["xs", "sm", "md", "lg"] as const;

const search = ref("Clear me");
const password = ref("hunter2");
const revealed = ref(false);

const onSearchInput = (e: Event) => {
  if (e.target instanceof HTMLInputElement) search.value = e.target.value;
};
const onPasswordInput = (e: Event) => {
  if (e.target instanceof HTMLInputElement) password.value = e.target.value;
};
</script>

<template>
  <div :class="col">
    <InputRoot>
      <Affix decorative>
        <Stamp emphasis="ghost"><Search /></Stamp>
      </Affix>
      <InputField
        :value="search"
        placeholder="Search…"
        @input="onSearchInput"
      />
      <Affix v-if="search" side="end">
        <Button
          emphasis="ghost"
          shape="circle"
          aria-label="Clear"
          @click="search = ''"
        >
          <X />
        </Button>
      </Affix>
    </InputRoot>

    <InputRoot>
      <InputField
        :value="password"
        :type="revealed ? 'text' : 'password'"
        placeholder="Password"
        @input="onPasswordInput"
      />
      <Affix side="end">
        <Button
          emphasis="ghost"
          shape="square"
          :aria-label="revealed ? 'Hide password' : 'Show password'"
          :aria-pressed="revealed"
          @click="revealed = !revealed"
        >
          <EyeOff v-if="revealed" />
          <Eye v-else />
        </Button>
      </Affix>
    </InputRoot>

    <InputRoot v-for="size in sizes" :key="size" :size="size">
      <InputField :value="`Clearable (${size})`" />
      <Affix side="end">
        <Button emphasis="ghost" shape="circle" aria-label="Clear">
          <X />
        </Button>
      </Affix>
    </InputRoot>
  </div>
</template>

Custom Styling

The passThrough prop provides escape hatches for each slot: style accepts a Panda CSS SystemStyleObject and props forwards arbitrary HTML attributes.

AstroReactSvelteVue

PreviewCode

Custom style via passThrough

Custom props via passThrough

---
import Input from "../Input.astro";
import { stack } from "@pindoba/styled-system/patterns";
---

<div class={stack({ gap: "xl", direction: "column" })}>
  <div>
    <h3>Custom style via passThrough</h3>
    <Input
      placeholder="Custom root style"
      passThrough={{
        root: { style: { borderRadius: "full" } },
        input: { style: { fontStyle: "italic" } },
      }}
    />
  </div>

  <div>
    <h3>Custom props via passThrough</h3>
    <Input
      placeholder="Search..."
      passThrough={{
        input: {
          props: {
            "aria-label": "Search input",
            "data-testid": "search-input",
          },
        },
      }}
    />
  </div>
</div>

Custom style via passThrough

Custom props via passThrough

import { Input } from "../Input";
import { stack } from "@pindoba/styled-system/patterns";

export default function CustomDemo() {
  return (
    <div className={stack({ gap: "xl", direction: "column" })}>
      <div>
        <h3>Custom style via passThrough</h3>
        <Input
          placeholder="Custom root style"
          passThrough={{
            root: { style: { borderRadius: "full" } },
            input: { style: { fontStyle: "italic" } },
          }}
        />
      </div>

      <div>
        <h3>Custom props via passThrough</h3>
        <Input
          placeholder="Search..."
          passThrough={{
            input: {
              props: {
                "aria-label": "Search input",
                "data-testid": "search-input",
              },
            },
          }}
        />
      </div>
    </div>
  );
}

Custom style via passThrough

Custom props via passThrough

<script lang="ts">
  import Input from "../Input.svelte";
  import { stack } from "@pindoba/styled-system/patterns";
</script>

<div class={stack({ gap: "xl", direction: "column" })}>
  <div>
    <h3>Custom style via passThrough</h3>
    <Input
      placeholder="Custom root style"
      passThrough={{
        root: { style: { borderRadius: "full" } },
        input: { style: { fontStyle: "italic" } },
      }}
    />
  </div>

  <div>
    <h3>Custom props via passThrough</h3>
    <Input
      placeholder="Search..."
      passThrough={{
        input: {
          props: {
            "aria-label": "Search input",
            "data-testid": "search-input",
          },
        },
      }}
    />
  </div>
</div>

Custom style via passThrough

Custom props via passThrough

<script setup lang="ts">
import { Input } from "@pindoba/vue-input";
import { stack } from "@pindoba/styled-system/patterns";
const col = stack({ gap: "xl", direction: "column" });
</script>

<template>
  <div :class="col">
    <div>
      <h3>Custom style via passThrough</h3>
      <Input
        placeholder="Custom root style"
        :passThrough="{
          root: { style: { borderRadius: 'full' } },
          input: { style: { fontStyle: 'italic' } },
        }"
      />
    </div>
    <div>
      <h3>Custom props via passThrough</h3>
      <Input
        placeholder="Search..."
        :passThrough="{
          input: {
            props: {
              'aria-label': 'Search input',
              'data-testid': 'search-input',
            },
          },
        }"
      />
    </div>
  </div>
</template>

#Feedback

#Size

#Icons & addons (Affix)

#Interactive buttons (clear, password reveal)

#Custom Styling

Custom style via passThrough

Custom props via passThrough

Feedback

Size

Icons & addons (Affix)

Interactive buttons (clear, password reveal)

Custom Styling