Input

Pick a framework. Both use the same recipe, so the styling matches exactly.

Input props for React
Prop	Type	Default	Description
invalid	boolean	false	Marks the value as invalid and turns the border red.

Also takes className and children. Anything else passes through to the input.

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>
  );
}

Input props for Svelte
Prop	Type	Default	Description
invalid	boolean	false	Marks the value as invalid and turns the border red.
value	string		Bindable with bind:value.

Also takes class and snippet children. Anything else passes through to the input.

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>