Updates Signup Form

Realestate48: Updates Signup Form

A quiet updates signup for a development: heading and lead on the left; on the right a GET form with an email field, a fieldset of interest rows (Phase 2 launch, price changes, viewing days, construction updates) each a checkbox with a label and a one-line description under a hairline, then the submit pill beside a privacy line.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://beste.dev/r/realestate48?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://beste.dev/r-base/realestate48?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/realestate48.tsx plus the badge24 rule eyebrow, the button25 quiet pill used for the submit button, and the shadcn/ui button, checkbox and input primitives behind them, the interest rows and the email field.

Quick start

The installed file exports realestate48Demo alongside the block: the exact props behind the preview above. Spread it to get a working section in one line.

import { Realestate48, realestate48Demo } from "@/components/beste/block/realestate48";

export default function Page() {
  return <Realestate48 {...realestate48Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { Realestate48 } from "@/components/beste/block/realestate48";

export default function Page() {
  return (
    <Realestate48
      eyebrow="Stay in touch"
      heading="Hear about Alder Row only when something changes."
      description="One email when there is news, never a schedule."
      form={{ action: "/updates", params: { email: "email", interests: "interests" } }}
      interests={[
        { label: "Phase 2 launch", description: "Prices and plans for the courtyard wing, a week before release.", value: "phase-2", checked: true },
        { label: "Price changes", description: "When a type is repriced or a home is released back to the market.", value: "prices", checked: false },
        { label: "Viewing days", description: "Open afternoons at the show apartment.", value: "viewings", checked: false },
      ]}
      labels={{ email: "Email", interests: "Send me", submit: "Sign up" }}
      note="Every message has an unsubscribe link, and we never pass your details on."
    />
  );
}

Props

type Interest = {
  label: string;
  description?: string;
  value: string;
  checked?: boolean;
};

type UpdatesForm = { action: string; params?: { email?: string; interests?: string } };

type Labels = { email?: string; interests?: string; submit?: string };

Behavior notes

• The form is a plain method="get" form posting to form.action; the email field carries native required and its parameter name falls back to email.
• Every interest checkbox shares one name (form.params.interests, falling back to interests), so the query string repeats the parameter once per ticked row, for example interests=phase-2&interests=viewings. The shadcn Checkbox renders a hidden native input inside the form to make this work.
• checked sets each row's initial state with defaultChecked; the rows stay uncontrolled so the block holds no state of its own.
• The whole label block is the click target for its checkbox, with the one-line description under the title.
• The sequence runs heading, lead, email field, legend, then one row at a time 100 ms apart with its hairline drawing alongside, and the submit row last; its delay is computed from the number of rows. With prefers-reduced-motion nothing moves.