Job Application Form

Careers17: Job Application Form

A two-column apply page that renders a badge, <strong>-aware heading, and description above a submit form built from a fields array (text inputs plus one textarea type), a fixed drag-and-drop resume dropzone, and a full-width submit button, alongside a sidebar card summarizing the open position with department, location, and type rows plus a "Back to all positions" link.

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://ui.beste.co/r/careers17?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/careers17?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/careers17.tsx, plus the badge, button, input, label, and textarea shadcn/ui primitives it uses for the section eyebrow, submit and sidebar buttons, form inputs, field labels, and the multiline cover-letter field.

Quick start

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

import { Careers17, careers17Demo } from "@/components/beste/block/careers17";

export default function Page() {
  return <Careers17 {...careers17Demo} />;
}

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

import { Careers17 } from "@/components/beste/block/careers17";

export default function Page() {
  return (
    <Careers17
      badge={{ label: "Apply Now", variant: "secondary" }}
      heading="Join our <strong>engineering team</strong>"
      description="Fill out the form below and we'll get back to you shortly."
      job={{
        title: "Senior Frontend Engineer",
        department: "Engineering",
        location: "Remote",
        type: "Full-time",
        href: "/careers",
      }}
      fields={[
        { label: "Full Name", type: "text", placeholder: "John Doe" },
        { label: "Email Address", type: "email", placeholder: "[email protected]" },
        { label: "Cover Letter", type: "textarea", placeholder: "Tell us why you're a great fit..." },
      ]}
      submitLabel="Submit Application"
    />
  );
}

Props

type JobSummary = {
  title: string;
  department?: string;
  location?: string;
  type?: string;
  href?: string;
};

type FormField = {
  label: string;
  type: string;
  placeholder?: string;
};

Behavior notes

• The header block (badge, heading, description) is only rendered when at least one of those three props is present; otherwise the form starts at the top of the left column.
• heading is injected via dangerouslySetInnerHTML, so inline <strong> is honored and styled with the primary color; pass only trusted markup.
• Each field renders a Textarea (fixed at rows={5}) when its type is exactly "textarea", and a standard Input with that type otherwise; the type string is passed straight through to the input.
• The form's onSubmit calls e.preventDefault() and nothing else, so there is no submit callback, form state, or validation; the block collects no values and the integrator must wire up handling.
• The "Resume" dropzone is presentational only: it is a static styled <div> with an upload icon and helper text, with no file input, onDrop, or click-to-upload behavior wired in.
• The sidebar card renders only when job is provided, and each of its department, location, and type rows renders only when that field is set; the "Back to all positions" button appears only when job.href is present and links via next/link.
• The left column spans two of three grid columns (lg:col-span-2) with the sidebar in the remaining column; below the lg breakpoint they stack.