JSFiddle - React, Tailwind, and code Playground

by graphettion

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/choices.js/3.0.4/styles/css/choices.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/choices.js/3.0.4/choices.min.js"></script>
<select class="select-tags" id="features" multiple name="features"></select>

JavaScript

let featuresList = [
  { label: "Allow User Reactivation On Upload", value: "allow-reactivate", selected: true },
  { label: "Doesn't Use CDN", value: "non-cdn" },
  { label: "Enable API Endpoints", value: "api" },
  { label: "Enable Legacy Group Page", value: "legacy-groups" },
  { label: "Group Mode", value: "playthrough" },
  { label: "Has Advanced Reporting (Beta)", value: "advanced-reporting" },
  { label: "Has HR Integration", value: "hr-integration" },
  { label: "Has Self Sign Up", value: "self-signup" },
  { label: "LDAP Authorization", value: "ldap-auth" },
  { label: "Require TOS", value: "require-tos" },
  { label: "SSO Authorization", value: "sso-auth" },
  { label: "Test Account", value: "test" }
]

let features = new Choices("#features", {
  removeItemButton: true,
  choices: featuresList
})

// server returns ["allow-reactivate", "api", "legacy-groups", "non-cdn"]
// How do I make them show up in the text box as selectable?