Field

A form-field wrapper that pairs any Pindoba control with a label, optional description, required/optional markers, an info tooltip, and validation error messages — and wires the accessibility between them. Field is presentational and framework-state-agnostic: you pass it a label and an error, and it derives the control’s feedback color, links label ↔ control, and exposes the right aria-* attributes. For full form state and validation, pair it with TanStack Form.

The control is rendered through a control snippet that receives a props bag to spread onto the control:

<Field label="Email" description="We'll send your receipt here." required>
  {#snippet control(props)}
    <Input {...props} bind:value type="email" />
  {/snippet}
</Field>

Basic

A label and a help description, wired to the control via for / aria-describedby.

ReactSvelteVueAstroTODO

PreviewCode

We'll send your receipt here.

import { useState } from "react";
import { Field } from "../Field";
import { Input } from "@pindoba/react-input";

export default function DefaultDemo() {
  const [value, setValue] = useState("");

  return (
    <Field
      label="Email"
      description="We'll send your receipt here."
      control={(props) => (
        <Input
          {...props}
          value={value}
          onChange={(e) => setValue(e.target.value)}
          type="email"
          placeholder="you@example.com"
        />
      )}
    />
  );
}

We'll send your receipt here.

<script lang="ts">
  import Field from "../field.svelte";
  import Input from "@pindoba/svelte-input";

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

<Field label="Email" description="We'll send your receipt here.">
  {#snippet control(props)}
    <Input {...props} bind:value type="email" placeholder="you@example.com" />
  {/snippet}
</Field>

We'll send your receipt here.

<script setup lang="ts">
import { ref } from "vue";
import { Field } from "@pindoba/vue-field";
import { Input } from "@pindoba/vue-input";

const value = ref("");
</script>

<template>
  <Field>
    <template #label>Email</template>
    <template #description>We'll send your receipt here.</template>
    <template #control="controlProps">
      <Input
        v-bind="controlProps"
        :value="value"
        @input="value = ($event.target as HTMLInputElement).value"
        type="email"
        placeholder="you@example.com"
      />
    </template>
  </Field>
</template>

Mark a field required to render a *, and attach a labelTooltip for an inline info trigger next to the label.

ReactSvelteVueAstroTODO

PreviewCode

API key

import { useState } from "react";
import { Field } from "../Field";
import { Input } from "@pindoba/react-input";

export default function RequiredTooltipDemo() {
  const [value, setValue] = useState("");

  return (
    <Field
      label="API key"
      required
      labelTooltip="Find this in Settings → Developer. We never store it in plaintext."
      control={(props) => (
        <Input
          {...props}
          value={value}
          onChange={(e) => setValue(e.target.value)}
          placeholder="sk-…"
        />
      )}
    />
  );
}

API key

<script lang="ts">
  import Field from "../field.svelte";
  import Input from "@pindoba/svelte-input";

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

<Field
  label="API key"
  required
  labelTooltip="Find this in Settings → Developer. We never store it in plaintext."
>
  {#snippet control(props)}
    <Input {...props} bind:value placeholder="sk-…" />
  {/snippet}
</Field>

API key

<script setup lang="ts">
import { ref } from "vue";
import { Field } from "@pindoba/vue-field";
import { Input } from "@pindoba/vue-input";

const value = ref("");
</script>

<template>
  <Field required>
    <template #label>API key</template>
    <template #labelTooltip>
      Find this in Settings → Developer. We never store it in plaintext.
    </template>
    <template #control="controlProps">
      <Input
        v-bind="controlProps"
        :value="value"
        @input="value = ($event.target as HTMLInputElement).value"
        placeholder="sk-…"
      />
    </template>
  </Field>
</template>

Validation feedback

Pass an error (string or string array). Field renders the message in an alert region, sets aria-invalid, and flips the control’s feedback to danger automatically.

ReactSvelteVueAstroTODO

PreviewCode

Type an @ to clear the error.

Enter a valid email address.

import { useState } from "react";
import { Field } from "../Field";
import { Input } from "@pindoba/react-input";

export default function ErrorDemo() {
  const [value, setValue] = useState("nope");
  // Live-derived error: empty when it looks like an email.
  const error = value.includes("@")
    ? undefined
    : "Enter a valid email address.";

  return (
    <Field
      label="Email"
      description="Type an @ to clear the error."
      error={error}
      control={(props) => (
        <Input
          {...props}
          value={value}
          onChange={(e) => setValue(e.target.value)}
          type="email"
        />
      )}
    />
  );
}

Type an @ to clear the error.

Enter a valid email address.

<script lang="ts">
  import Field from "../field.svelte";
  import Input from "@pindoba/svelte-input";

  let value = $state("nope");
  // Live-derived error: empty when it looks like an email.
  const error = $derived(
    value.includes("@") ? undefined : "Enter a valid email address.",
  );
</script>

<Field label="Email" description="Type an @ to clear the error." {error}>
  {#snippet control(props)}
    <Input {...props} bind:value type="email" />
  {/snippet}
</Field>

Type an @ to clear the error.

Enter a valid email address.

<script setup lang="ts">
import { ref, computed } from "vue";
import { Field } from "@pindoba/vue-field";
import { Input } from "@pindoba/vue-input";

const value = ref("nope");
// Live-derived error: empty when it looks like an email.
const error = computed(() =>
  value.value.includes("@") ? undefined : "Enter a valid email address.",
);
</script>

<template>
  <Field :error="error">
    <template #label>Email</template>
    <template #description>Type an @ to clear the error.</template>
    <template #control="controlProps">
      <Input
        v-bind="controlProps"
        :value="value"
        @input="value = ($event.target as HTMLInputElement).value"
        type="email"
      />
    </template>
  </Field>
</template>

Sizes

size scales the label, description, and error text. Keep it in sync with the control’s own size. Use optionalText for an “(optional)” hint when a field isn’t required.

ReactSvelteVueAstroTODO

PreviewCode

Size xs(optional)

Size sm(optional)

Size md(optional)

Size lg(optional)

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

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

export default function SizesDemo() {
  return (
    <div className={stack({ gap: "md", direction: "column" })}>
      {sizes.map((size) => (
        <Field
          key={size}
          label={`Size ${size}`}
          size={size}
          optionalText="(optional)"
          control={(props) => (
            <Input {...props} size={size} placeholder={size} />
          )}
        />
      ))}
    </div>
  );
}

Size xs (optional)

Size sm (optional)

Size md (optional)

Size lg (optional)

<script lang="ts">
  import Field from "../field.svelte";
  import Input from "@pindoba/svelte-input";
  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)}
    <Field label={`Size ${size}`} {size} optionalText="(optional)">
      {#snippet control(props)}
        <Input {...props} {size} placeholder={size} />
      {/snippet}
    </Field>
  {/each}
</div>

Size xs(optional)

Size sm(optional)

Size md(optional)

Size lg(optional)

<script setup lang="ts">
import { Field } from "@pindoba/vue-field";
import { Input } from "@pindoba/vue-input";
import { stack } from "@pindoba/styled-system/patterns";

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

<template>
  <div :class="stack({ gap: 'md', direction: 'column' })">
    <Field
      v-for="size in sizes"
      :key="size"
      :size="size"
      optionalText="(optional)"
    >
      <template #label>Size {{ size }}</template>
      <template #control="controlProps">
        <Input v-bind="controlProps" :size="size" :placeholder="size" />
      </template>
    </Field>
  </div>
</template>

Horizontal layout

Set orientation="horizontal" to place the label beside the control.

AstroReactSvelteVue

PreviewCode

Display name

Shown publicly.

---
import Field from "../field.astro";
import Input from "@pindoba/astro-input";
---

<Field
  label="Display name"
  orientation="horizontal"
  description="Shown publicly."
>
  <Input placeholder="Ada Lovelace" />
</Field>

Display name

Shown publicly.

import { useState } from "react";
import { Field } from "../Field";
import { Input } from "@pindoba/react-input";

export default function HorizontalDemo() {
  const [value, setValue] = useState("");

  return (
    <Field
      label="Display name"
      orientation="horizontal"
      description="Shown publicly."
      control={(props) => (
        <Input
          {...props}
          value={value}
          onChange={(e) => setValue(e.target.value)}
          placeholder="Ada Lovelace"
        />
      )}
    />
  );
}

Display name

Shown publicly.

<script lang="ts">
  import Field from "../field.svelte";
  import Input from "@pindoba/svelte-input";

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

<Field
  label="Display name"
  orientation="horizontal"
  description="Shown publicly."
>
  {#snippet control(props)}
    <Input {...props} bind:value placeholder="Ada Lovelace" />
  {/snippet}
</Field>

Display name

Shown publicly.

<script setup lang="ts">
import { ref } from "vue";
import { Field } from "@pindoba/vue-field";
import { Input } from "@pindoba/vue-input";

const value = ref("");
</script>

<template>
  <Field orientation="horizontal">
    <template #label>Display name</template>
    <template #description>Shown publicly.</template>
    <template #control="controlProps">
      <Input
        v-bind="controlProps"
        :value="value"
        @input="value = ($event.target as HTMLInputElement).value"
        placeholder="Ada Lovelace"
      />
    </template>
  </Field>
</template>

Forms with TanStack Form

Field is the presentational half of Pindoba’s forms story. To wire it to real form state and validation, use the TanStack Form block — it re-exports createForm and ships ready-made <FormInput>, <FormSelect>, <FormCheckbox>, a generic <FormField>, and a <FormSubmit> button, with Standard Schema validation (Zod / Valibot / ArkType).

PreviewCode

<script lang="ts">
  import { z } from "zod";
  import {
    createForm,
    FormInput,
    FormSubmit,
    focusInvalidOnSubmit,
  } from "../index.js";
  import { stack } from "@pindoba/styled-system/patterns";

  const schema = z.object({
    name: z.string().min(2, "Use at least 2 characters."),
    email: z.string().email("Enter a valid email address."),
  });

  let submitted = $state<string | null>(null);

  const form = createForm(() => ({
    defaultValues: { name: "", email: "" },
    validators: { onChange: schema },
    onSubmit: async ({ value }) => {
      submitted = JSON.stringify(value);
    },
  }));
</script>

<form
  onsubmit={(event) => {
    event.preventDefault();
    form.handleSubmit();
  }}
  {@attach focusInvalidOnSubmit(form)}
>
  <div class={stack({ gap: "md", direction: "column" })}>
    <FormInput {form} name="name" label="Name" required />
    <FormInput
      {form}
      name="email"
      label="Email"
      type="email"
      required
      labelTooltip="We email your receipt here."
    />
    <FormSubmit {form}>Create account</FormSubmit>
    {#if submitted}<p>Submitted: {submitted}</p>{/if}
  </div>
</form>

#Basic

#Required & label tooltip

#Validation feedback

#Sizes

#Horizontal layout

#Forms with TanStack Form

Basic

Required & label tooltip

Validation feedback

Sizes

Horizontal layout

Forms with TanStack Form