Forms

<fieldset class="demo-fieldset sl-stack demo-narrow">
  <legend class="sl-text-xl sl-bold">Tell us about your idea</legend>
  <div class="sl-field">
    <label class="sl-label" for="project-name">Project name</label
    ><input
      class="sl-input"
      id="project-name"
      name="project"
      placeholder="My next big idea"
    />
  </div>
  <div class="sl-field">
    <label class="sl-label" for="project-email">Email address</label
    ><input
      class="sl-input"
      id="project-email"
      type="email"
      autocomplete="email"
      aria-describedby="email-note"
      placeholder="you@example.com"
    />
    <p class="sl-help" id="email-note">Use the address you check most often.</p>
  </div>
  <div class="sl-field">
    <label class="sl-label" for="project-type">Project type</label
    ><select class="sl-input" id="project-type">
      <option>Personal website</option>
      <option>Documentation</option>
      <option>Design system</option>
    </select>
  </div>
  <label class="sl-check"><input type="checkbox" /> Include optional modules</label>
</fieldset>

<div class="sl-stack demo-narrow">
  <div class="sl-field">
    <label class="sl-label" for="workspace">Workspace name</label
    ><input
      class="sl-input"
      id="workspace"
      aria-invalid="true"
      aria-describedby="workspace-error"
    />
    <p id="workspace-error" class="sl-error">Enter a workspace name to continue.</p>
  </div>
  <div class="sl-field">
    <label class="sl-label" for="notes">Anything else?</label
    ><textarea
      class="sl-input"
      id="notes"
      rows="3"
      placeholder="A few words about your project…"
    ></textarea>
  </div>
</div>

<fieldset class="demo-fieldset sl-stack">
  <legend class="sl-label">Choose a project style</legend>
  <label class="sl-check"
    ><input type="radio" name="style-demo" value="minimal" checked /> Minimal</label
  ><label class="sl-check"
    ><input type="radio" name="style-demo" value="expressive" /> Expressive</label
  >
  <div class="sl-field">
    <label for="disabled-plan" class="sl-label">Locked plan (example)</label
    ><input id="disabled-plan" class="sl-input" value="Starter" disabled />
  </div>
</fieldset>

<div class="sl-grid sl-md:cols-2 sl-gap-4">
  <div class="sl-field">
    <label class="sl-label" for="first-name-example">First name</label
    ><input id="first-name-example" class="sl-input" autocomplete="given-name" />
  </div>
  <div class="sl-field">
    <label class="sl-label" for="last-name-example">Last name</label
    ><input id="last-name-example" class="sl-input" autocomplete="family-name" />
  </div>
</div>

<div class="sl-stack">
  <div class="sl-field">
    <label class="sl-label" for="select-library">Choose a module</label
    ><select class="sl-select" id="select-library">
      <option value="">Select a module…</option>
      <optgroup label="Essentials">
        <option value="core">Core framework</option>
        <option value="forms">Forms and selects</option>
      </optgroup>
      <optgroup label="Expression">
        <option value="motion">Motion</option>
        <option value="cursor">Cursor effects</option>
      </optgroup>
    </select>
  </div>
  <div class="sl-field">
    <label class="sl-label" for="select-unavailable">Unavailable module</label
    ><select class="sl-select" id="select-unavailable" disabled>
      <option>Coming soon</option>
    </select>
  </div>
</div>

<div class="sl-field">
  <label class="sl-label" for="select-modules">Optional modules</label
  ><select
    class="sl-select"
    id="select-modules"
    multiple
    size="4"
    aria-describedby="select-modules-help"
  >
    <option value="motion">Motion</option>
    <option value="tables">Tables</option>
    <option value="editor">Editor styles</option>
    <option value="header">Headers</option>
  </select>
  <p class="sl-help" id="select-modules-help">
    Choose one or more modules with your keyboard or pointer.
  </p>
</div>