Input

One recipe, two bindings — rendered side by side from the same source the package ships.

React

input.demo.tsx

import { Input } from "../react/index.js";

export default function InputDemo() {
  return (
    <div className="flex max-w-sm flex-col gap-3">
      <Input placeholder="Your name" aria-label="Your name" />
      <Input placeholder="Disabled" aria-label="Disabled" disabled />
      <Input placeholder="Invalid value" aria-label="Invalid value" invalid />
    </div>
  );
}

Svelte

input.demo.svelte

<script lang="ts">
  import { Input } from "../svelte/index.js";
</script>

<div class="flex max-w-sm flex-col gap-3">
  <Input placeholder="Your name" aria-label="Your name" />
  <Input placeholder="Disabled" aria-label="Disabled" disabled />
  <Input placeholder="Invalid value" aria-label="Invalid value" invalid />
</div>