<!-- @dsCard group="Components / Forms" viewport="660x400" name="Form" subtitle="The form shell — 24px between Fields, submit actions in a right-aligned row at the end." -->
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Form</title>
<link rel="stylesheet" href="../../styles.css"><link rel="stylesheet" href="../_card/card.css">
<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
<script src="https://unpkg.com/lucide@0.544.0/dist/umd/lucide.min.js"></script>
<script src="../../_ds_bundle.js"></script>
<script src="../_card/card.js"></script>
</head><body>
<header class="ch"><h1>Form</h1><p>The form shell — 24px between Fields, submit actions in a right-aligned row at the end.</p></header>
<div id="root"></div>
<ul class="notes">
<li>Submit stays disabled until the form is dirty <em>and</em> valid; Cancel appears once dirty; submit shows pending on click.</li>
<li>One commit model per screen. A staged form never holds an instant control such as a Switch.</li>
<li>Actions sit in one right-aligned row at the end — never a save button beside each field.</li>
<li>Forms go single-column before their fields go narrow.</li>
</ul>
<script type="text/babel">
const {Form, Field, FieldLabel, Input, Textarea, Button} = window.OriginDesignSystem_7c998b;
const {Ic, mount} = window.OriginCard;
function Demo(){return (<>
  <Form style={{maxWidth:380}} onSubmit={(e)=>e.preventDefault()}>
    <Field><FieldLabel htmlFor="t">Event name</FieldLabel><Input id="t" defaultValue="30 min meeting" /></Field>
    <Field><FieldLabel htmlFor="d">Description</FieldLabel><Textarea id="d" rows={2} placeholder="Anything the attendee should know" /></Field>
    <div className="o-row" style={{justifyContent:"flex-end",gap:8}}><Button variant="ghost" type="button">Cancel</Button><Button type="submit" disabled>Save event type</Button></div>
  </Form>
</>)}
mount(<Demo />);
</script>
</body></html>