<!-- @dsCard group="Components / Forms" viewport="800x340" name="Input" subtitle="The text field. Always pair it with a Field and a Label rather than leaning on a placeholder." -->
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Input</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>Input</h1><p>The text field. Always pair it with a Field and a Label rather than leaning on a placeholder.</p></header>
<div id="root"></div>
<ul class="notes">
<li>Heights are sm 28px, default 32px, lg 36px on desktop.</li>
<li><code>invalid</code> switches the border and ring to destructive; the message goes in <code>FieldError</code>.</li>
<li>Placeholders are passed per usage, reference something present in that context, and must fit the field at its narrowest width.</li>
<li>A placeholder is never a substitute for a label.</li>
</ul>
<script type="text/babel">
const {Field, FieldLabel, Input} = window.OriginDesignSystem_7c998b;
const {Ic, mount} = window.OriginCard;
function Demo(){return (<>
  <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:18}}>
    <Field><FieldLabel htmlFor="e1">Email</FieldLabel><Input id="e1" type="email" placeholder="rick@cal.com" /></Field>
    <Field><FieldLabel htmlFor="e2">Email</FieldLabel><Input id="e2" defaultValue="not-an-email" invalid /></Field>
  </div>
  <div className="spec"><span className="spec-label">Sizes</span>
    <div style={{width:140}}><Input size="sm" placeholder="sm · 28px" /></div><div style={{width:150}}><Input placeholder="default · 32px" /></div><div style={{width:140}}><Input size="lg" placeholder="lg · 36px" /></div><div style={{width:130}}><Input placeholder="Disabled" disabled /></div>
  </div>
</>)}
mount(<Demo />);
</script>
</body></html>