samples/html/index.html

<html>
<head>
  <title>My Custom Elements</title>
  <script type="module" src="./js/index.js"></script>
</head>
<body>
  <h1>Form Elements</h1>

  <dt-tile
    title="Kitchen Sink Tile"
    expands: true,
  >
    <dt-toggle id="toggleField" name="toggleField" label="Toggle Field"></dt-toggle>

    <dt-text id='textField' name='textField' value='' label="Text Field" private></dt-text>

    <dt-textarea id='textareaField' name='textareaField' value='' label="Textarea Field"></dt-textarea>

    <dt-number id="numberField" name="numberField" label="Number Field" private></dt-number>

    <dt-date id="dateField" name="dateField" label="Date Field"></dt-date>

    <dt-single-select
      label="Single Select Field"
      placeholder="Select Item"
      value="opt1"
      options="${JSON.stringify(options)}"
    ></dt-single-select>

    <dt-multi-select
      label="Multi Select Field"
      placeholder="Select Items"
      value="${JSON.stringify(options.slice(0, 2).map(o => o.id))}"
      options="${JSON.stringify(options)}"
    ></dt-multi-select>

    <dt-tags
      label="Tags Field"
      value="${JSON.stringify([{id:'personal',label:'Personal'}])}"
      options="${JSON.stringify(tags)}"
    ></dt-tags>

    <dt-connection
      label="Connection Field"
      options="${JSON.stringify(posts)}"
    ></dt-connection>

    <dt-dropdown
      label="dropdown Field"
      options="${JSON.stringify(posts)}"
    ></dt-dropdown>

    <dt-users-connection
    label="Connection Field"
    options="${JSON.stringify(posts)}"
  ></dt-users-connection>

  </dt-tile>
</body>
</html>