KCI-KANBAN/app/views/Boards/Create.asp

<div class="row justify-content-center">
  <div class="col-md-6">
    <div class="d-flex align-items-center mb-4">
      <a href="/boards" class="btn btn-sm btn-outline-secondary me-3">
        <i class="bi bi-arrow-left"></i>
      </a>
      <h1 class="h3 mb-0">New Board</h1>
    </div>

    <div class="card shadow-sm">
      <div class="card-body">
        <form method="post" action="/boards">
          <div class="mb-3">
            <label for="name" class="form-label">Board Name</label>
            <input type="text" class="form-control" id="name" name="name"
                   placeholder="e.g. Sprint 1" autofocus required />
          </div>
          <div class="mb-3">
            <label class="form-label text-muted small">URL Slug <span class="text-secondary">(auto-generated)</span></label>
            <div class="form-control bg-light text-muted" id="slug-preview" style="min-height:38px;">&nbsp;</div>
          </div>
          <div class="mb-3">
            <div class="form-check">
              <input class="form-check-input" type="checkbox" id="import_from_printstream"
                     name="import_from_printstream" />
              <label class="form-check-label" for="import_from_printstream">Import Jobs from Printstream</label>
            </div>
          </div>
          <div class="mb-3" id="printstream-job-name-group" style="display:none;">
            <label for="printstream_job_name" class="form-label">Job Name to Import</label>
            <textarea class="form-control" id="printstream_job_name" name="printstream_job_name"
                      rows="4" placeholder="Enter job name(s) to import"></textarea>
          </div>
          <div class="d-flex gap-2">
            <button type="submit" class="btn btn-primary">Create Board</button>
            <a href="/boards" class="btn btn-outline-secondary">Cancel</a>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<script>
(function () {
  var nameEl   = document.getElementById('name');
  var preview  = document.getElementById('slug-preview');
  var chk      = document.getElementById('import_from_printstream');
  var jobGroup = document.getElementById('printstream-job-name-group');

  nameEl.addEventListener('input', function () {
    preview.textContent = slugify(nameEl.value) || ' ';
  });

  chk.addEventListener('change', function () {
    jobGroup.style.display = this.checked ? '' : 'none';
  });

  function slugify(s) {
    return s.toLowerCase()
      .replace(/&/g, 'and')
      .replace(/[^a-z0-9\s-]/g, '')
      .trim()
      .replace(/[\s]+/g, '-')
      .replace(/-+/g, '-');
  }
})();
</script>