page SchedulingExample {
 view {
<nav class="example-toolbar"><a href="/preview">← All examples</a><a href="#example-source">View code</a></nav> <main class="example-form-page" style="max-width:42rem;margin:3rem auto;padding:1.5rem;display:grid;gap:1.5rem"><h1>Schedule a meeting</h1><p>Choose the date and time that work for your team.</p><DatePicker label="Meeting date" name="date" /><DatePicker type="datetime-local" label="Send reminder" name="reminder" value="2026-09-20T09:30" /><TimePicker label="Start time" name="time" value="09:30" /></main> <section class="example-code-panel"><header><h2>Copy this example</h2><button type="button" data-copy-target="#example-source">Copy code</button></header><pre><code id="example-source">page SchedulingExample <span>&#123;</span>
 view <span>&#123;</span> &lt;main class="example-form-page" style="max-width:42rem;margin:3rem auto;padding:1.5rem;display:grid;gap:1.5rem"&gt;&lt;h1&gt;Schedule a meeting&lt;/h1&gt;&lt;p&gt;Choose the date and time that work for your team.&lt;/p&gt;&lt;DatePicker label="Meeting date" name="date" /&gt;&lt;DatePicker type="datetime-local" label="Send reminder" name="reminder" value="2026-09-20T09:30" /&gt;&lt;TimePicker label="Start time" name="time" value="09:30" /&gt;&lt;/main&gt; <span>&#125;</span>
<span>&#125;</span></code></pre></section> } }