# Sentence Form: Event RSVP

> An invitation reply with a clause that depends on an answer. Pick "with a guest" and " named ___" rises in after it while the words after it glide aside; switch back and the clause folds away. The dinner choice starts filled in through a default value.

A shadcn/ui block from the [@keyframeui](https://keyframeui.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/keyframeui/sentence-form-rsvp-demo).

- Page, with a live preview: https://shadcn.exchange/r/keyframeui/sentence-form-rsvp-demo
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/keyframeui/sentence-form-rsvp-demo-light-1d12e5ca9d66324c.png
- Registry item: https://keyframeui.com/r/sentence-form-rsvp-demo.json
- Categories: form, input, motion
- Listed: 2026-10-14, source last changed 2026-10-15

## Install

```bash
npx shadcn@latest add https://keyframeui.com/r/sentence-form-rsvp-demo.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `https://keyframeui.com/r/sentence-form.json`

## Notes from the registry

Live preview, examples and props: https://keyframeui.com/components/sentence-form#sentence-form-rsvp-demo

## Files

### `registry/demos/sentence-form-rsvp-demo.tsx`

```tsx
"use client";

import { SentenceForm, SentenceFormField } from "@/components/ui/sentence-form";

// Stands in for a real request.
const send = () => new Promise<void>((resolve) => setTimeout(resolve, 1000));

export function SentenceFormRsvpDemo() {
  return (
    <section className="w-full max-w-xl rounded-3xl bg-[#fff7f2] px-6 py-8 text-[#3b1d14] ring-1 ring-[#3b1d14]/10 sm:px-10 sm:py-10 dark:bg-[#1c1311] dark:text-[#f6e7df] dark:ring-white/10">
      <header className="border-b border-current/15 pb-5">
        <p className="font-mono text-[11px] tracking-[0.16em] uppercase opacity-60">Thursday 19 June · 7 pm</p>
        <h3 className="mt-2 font-serif text-2xl italic">Midsummer supper at the studio</h3>
      </header>

      <SentenceForm
        onSubmit={send}
        className="mt-6 min-h-[32rem] font-serif text-[22px] leading-[1.5] sm:min-h-[21rem] sm:text-[26px]"
        submitLabel="RSVP"
        submitClassName="data-[ready=true]:bg-[#3b1d14] data-[ready=true]:text-[#fff7f2] dark:data-[ready=true]:bg-[#f6e7df] dark:data-[ready=true]:text-[#1c1311]"
        success={({ values, edit }) => (
          <p className="text-pretty opacity-80">
            See you on the 19th
            {values.party === "with a guest" && values.guest ? <>, and {values.guest} too</> : null}. Details are on
            their way.{" "}
            <button
              type="button"
              onClick={edit}
              className="cursor-pointer rounded-sm font-medium underline decoration-current/30 underline-offset-4 outline-none hover:decoration-current focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current"
            >
              Change my reply
            </button>
          </p>
        )}
      >
        {(values) => (
          <>
            Count me in. I&apos;m{" "}
            <SentenceFormField name="name" label="Your name" placeholder="your name" autoComplete="name" required />,
            and I&apos;m coming{" "}
            <SentenceFormField
              name="party"
              label="Coming"
              placeholder="with whom"
              options={["on my own", "with a guest"]}
              required
            />
            {values.party === "with a guest" ? (
              <>
                {" "}
                named{" "}
                <SentenceFormField name="guest" label="Guest's name" placeholder="their name" required />
              </>
            ) : null}
            . I&apos;ll have the{" "}
            <SentenceFormField
              name="menu"
              label="Dinner"
              options={["roast chicken", "wild mushroom risotto", "grilled sea bass"]}
              defaultValue="wild mushroom risotto"
            />
            . Send the details to{" "}
            <SentenceFormField
              name="email"
              label="Email"
              placeholder="you@email.com"
              type="email"
              autoComplete="email"
              required
            />
            .
          </>
        )}
      </SentenceForm>
    </section>
  );
}
```