# Sentence Form: Project Brief

> A design studio's inquiry in large serif type. Type your name and the words after it make room; pick services and each one flies up from the tray while the list grammar ("a website, a product, and motion") rearranges around it. Tap an outline in the tray to send a pick back down. Try Other for the timeline, send it half-filled to see the check, then send it for real: the form settles into the note you wrote, with an Edit link.

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

- Page, with a live preview: https://shadcn.exchange/r/keyframeui/sentence-form-demo
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/keyframeui/sentence-form-demo-light-ab2550e4cda2ae00.png
- Registry item: https://keyframeui.com/r/sentence-form-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-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-demo

## Files

### `registry/demos/sentence-form-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, 1200));

const firstName = (name: string | string[] | undefined) => String(name ?? "").trim().split(/\s+/)[0];

export function SentenceFormDemo() {
  return (
    <section className="w-full max-w-2xl rounded-3xl bg-[#fbfaf7] px-6 py-8 text-stone-900 ring-1 ring-stone-900/[0.07] sm:px-10 sm:py-10 dark:bg-stone-950 dark:text-stone-100 dark:ring-white/10">
      <div className="flex items-baseline justify-between gap-4 font-mono text-[11px] tracking-[0.16em] text-stone-500 uppercase">
        <span>Start a project</span>
        <span className="max-sm:hidden">Field &amp; Fold Studio</span>
      </div>

      <SentenceForm
        onSubmit={send}
        className="mt-6 min-h-[34rem] font-serif text-[23px] leading-[1.45] sm:min-h-[27rem] sm:text-[31px] sm:leading-[1.4]"
        submitLabel="Send brief"
        success={({ values, edit }) => (
          <p className="max-w-md text-pretty text-stone-600 dark:text-stone-400">
            Thanks, {firstName(values.name)}. We&apos;ll reply to{" "}
            <span className="break-all text-stone-900 dark:text-stone-100">{values.email}</span> within two
            working days.{" "}
            <button
              type="button"
              onClick={edit}
              className="cursor-pointer rounded-sm font-medium text-stone-900 underline decoration-stone-900/30 underline-offset-4 outline-none hover:decoration-stone-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current dark:text-stone-100 dark:decoration-stone-100/30 dark:hover:decoration-stone-100"
            >
              Edit
            </button>
          </p>
        )}
      >
        Hi, I&apos;m{" "}
        <SentenceFormField name="name" label="Your name" placeholder="your name" autoComplete="name" required /> from{" "}
        <SentenceFormField name="company" label="Company" placeholder="your company" autoComplete="organization" />.
        We&apos;d like help with{" "}
        <SentenceFormField
          name="services"
          label="What you need"
          placeholder="a few things"
          options={["a brand identity", "a website", "a product", "motion"]}
          multiple
          required
        />
        , ideally by{" "}
        <SentenceFormField
          name="timeline"
          label="Timeline"
          placeholder="when"
          options={["next month", "this summer", "the end of the year"]}
          custom
        />
        . Our budget is around{" "}
        <SentenceFormField
          name="budget"
          label="Budget"
          placeholder="how much"
          options={["$10k", "$25k", "$50k", "$100k+"]}
          required
        />
        , and you can reach me at{" "}
        <SentenceFormField
          name="email"
          label="Email"
          placeholder="you@company.com"
          type="email"
          autoComplete="email"
          hint="Only used to reply"
          required
        />
        .
      </SentenceForm>
    </section>
  );
}
```