Skip to main content
View source

Input

Text field with the site's field surface and an optional spring caret.

Usage

svelte 
<script lang="ts">
  import { Input } from "@milandekruijf/ui/svelte";

  let value = $state("");
</script>

<Input bind:value placeholder="Type something…" />

Examples

Basic field 
<script lang="ts">
  import { css } from "@milandekruijf/pandacss/css";
  import { Input } from "@milandekruijf/ui/svelte";

  let value = $state("");

  const wrapClass = css({ maxW: "28rem", minW: 0 });
</script>

<div class={wrapClass}>
  <Input bind:value placeholder="Type something…" />
</div>

Props

PropTypeDefaultDescription
value?string | number""
Bindable field value (`bind:value`); drives the spring caret.
class?string—
Extra classes merged after the field styles.

Native `<input>` attributes (`type`, `placeholder`, `disabled`, `autocomplete`, …) are forwarded.