Call to action — Session time options

A centered invitation leads three radio choices and a confirmation action. Use it when readers need to select a session time before continuing.

ReactHTML

1440 × 900

Open in new tab

Component.tsx27 lines

export default function CtaScheduleOptions() {
  return (
    <section className="bg-white text-neutral-900">
      <div className="mx-auto max-w-6xl px-6 py-16 sm:py-24 ">
        <header className="mx-auto max-w-2xl text-center">
          <p className="text-sm font-medium text-neutral-500">Eyebrow for the section</p>
          <h2 className="mt-4 text-3xl font-semibold tracking-tight text-balance sm:text-4xl">Heading for choosing a session time</h2>
          <p className='mt-4 text-lg text-pretty text-neutral-600'>Explain the session length and what participants should prepare.</p>
        </header>
        <form className="mx-auto mt-10 max-w-3xl" action="#">
          <fieldset aria-describedby="cta-schedule-options-hint">
            <legend className="text-sm font-semibold">Choose a time</legend>
            <div className="mt-4 grid gap-3 sm:grid-cols-3">
              <label className="flex cursor-pointer items-start gap-3 rounded-lg border border-neutral-300 bg-white p-4"><input type="radio" name="session-time" value="0" defaultChecked className="mt-1 size-4 shrink-0 accent-neutral-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900" /><span><span className="block text-sm font-semibold">Mar 14</span><span className="mt-1 block text-sm text-neutral-600">10:00 AM</span></span></label>
              <label className="flex cursor-pointer items-start gap-3 rounded-lg border border-neutral-300 bg-white p-4"><input type="radio" name="session-time" value="1"  className="mt-1 size-4 shrink-0 accent-neutral-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900" /><span><span className="block text-sm font-semibold">Mar 15</span><span className="mt-1 block text-sm text-neutral-600">2:00 PM</span></span></label>
              <label className="flex cursor-pointer items-start gap-3 rounded-lg border border-neutral-300 bg-white p-4"><input type="radio" name="session-time" value="2"  className="mt-1 size-4 shrink-0 accent-neutral-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900" /><span><span className="block text-sm font-semibold">Mar 16</span><span className="mt-1 block text-sm text-neutral-600">11:30 AM</span></span></label>
            </div>
          </fieldset>
          <div className="mt-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
            <p id="cta-schedule-options-hint" className="text-sm text-neutral-600">All times use your local time zone.</p>
            <button type="submit" className="inline-flex h-11 items-center justify-center rounded-md bg-neutral-900 px-5 text-sm font-medium text-white transition-colors hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">Continue</button>
          </div>
        </form>
      </div>
    </section>
  )
}

Pattern notes

When to use: Use when a small fixed schedule determines the next step. Choose a contact form for open-ended requests. Variations include session formats or appointment durations instead of dates.
Hierarchy: The heading explains the invitation before readers choose a date and time. Keep heading below 8 words, introduction below 20 and hint below 12. Each choice names both its date and time.
Responsive: Below 640px choices stack and the hint sits above the submit action. From 640px choices and the form footer become rows.
Layout: The white section uses a 1152px max-w-6xl container, 24px px-6 sides and 64px py-16 vertical padding, increasing to 96px sm:py-24 at 640px. The centered max-w-2xl introduction precedes a max-w-3xl 768px form by 40px. A fieldset contains three sm:grid-cols-3 choices with 12px gaps and 16px padding. The hint and 44px submit action share a footer 24px below.
States: Native radio buttons expose one checked option and allow keyboard selection within the group. Inputs and submit show 2px focus outlines; the filled submit changes to neutral-700 on hover.

Desktop wireframe

┌──────────────────────────────────────────────────────────────┐
│                  Heading for choosing a session              │
│                          Session details                     │
│ Choose a time                                                │
│ ┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐  │
│ │ (x) Mar 14      │ │ ( ) Mar 15      │ │ ( ) Mar 16      │  │
│ │     10:00 AM    │ │     2:00 PM     │ │     11:30 AM    │  │
│ └─────────────────┘ └─────────────────┘ └─────────────────┘  │
│ Local time zone hint                           [Continue]    │
└──────────────────────────────────────────────────────────────┘

View all

Call to action — Audience choice cards
Layout tags: split,list,spacious
Call to action — Card with image
Layout tags: split,media
Call to action — Centred with actions
Layout tags: centered,stacked,spacious

Call to action — Session time options

Pattern notes

More in Call to action

Call to action — Audience choice cards

Call to action — Card with image

Call to action — Centred with actions