ui.html

<div>
  <p class="title">Input Value</p>
  <div class="form-input">
    <div class="container-input">
      <p>Value: </p>
      <input class="input-number" id="count" value="2" type="number" inputMode="numeric" pattern="[0-9]*" maxlength="3" oninput="this.value=this.value.slice(0,this.maxLength)">
    </div>
    <div class="container-input">
      <p>Max Length: </p>
      <input class="input-number" id="max" value="5" type="number" inputMode="numeric" pattern="[0-9]*" maxlength="3" oninput="this.value=this.value.slice(0,this.maxLength)">
    </div>
  </div>
  <form>
    <p class="title">Select the Type</p>
    <div class="container-radio">
      <div class="radio-select">
        <input checked type="radio" id="pb2" name="age" value="full">
        <label for="pb2">Full</label><br>
      </div>
      <div class="radio-select">
        <input type="radio" id="pb1" name="age" value="divided">
        <label for="pb1">Divided</label><br>
      </div>
    </div>
  </form>
  <div class="container-button">
    <button class="button-secondary" id="cancel">Cancel</button>
    <button class="button-main" id="create">Create</button>
  </div>
</div>
<script>

document.getElementById('create').onclick = () => {
  const textbox = document.getElementById('count');
  const maxLenght = document.getElementById('max')
  const type = document.querySelector("form")
  
  const data = new FormData(type);
  let selected = "";
  for (const entry of data) {
    selected = `${entry[1]}`;
  }
   
  const count = {
    fill: parseInt(textbox.value || 0, 10),
    max: parseInt(maxLenght.value || 0, 10)
  };

  parent.postMessage({ pluginMessage: { type: selected, count } }, '*')
}

document.getElementById('cancel').onclick = () => {
  parent.postMessage({ pluginMessage: { type: 'cancel' } }, '*')
}

</script>

<style>
  .title {
    padding-bottom: 4px;
    margin: 0;
    font-weight: 500;
  }

  .form-input {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    color: var(--figma-color-text);
    padding-top: 8px;
    padding-bottom: 16px;
  }

  .container-input {
    display: flex;
    align-items: center;
  }

  .container-radio {
    display: flex;
    align-items: center;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .radio-select {
    margin-left: 16px;
    cursor: pointer;
  }

  .input-number {
    border-radius: 4px;
    padding: 4px;
    width: 32px;
    text-align: center;
    outline: none;
    border: 1px solid;
    background-color: var(--figma-color-bg-secondary);
    color: var(--figma-color-text);
    border-color: var(--figma-color-border);
    margin-left: 8px;
  }

  .input-number:focus {
    border-color: var(--figma-color-border-onselected);
    background-color: var(--figma-color-bg-selected);
  }

  .container-button {
    display: flex;
    width: 100%;
    justify-content: start;
  }

  .button-main {
    padding: 8px;
    border: none;
    border-radius: 4px;
    outline: none;
    cursor: pointer;
    margin-left: 4px;
    background-color: var(--figma-color-bg-brand);
    color: var(--figma-color-text-onbrand);
  }

  .button-main:hover {
    background-color: var(--figma-color-bg-brand-hover);
  }

  .button-secondary {
    padding: 8px;
    border: none;
    border-radius: 4px;
    outline: none;
    cursor: pointer;
    margin-right: 4px;
    background-color: var(--figma-color-bg-tertiary);
    color: var(--figma-color-text-invers);
  }

  .button-secondary:hover {
    background-color: var(--figma-color-bg-hover);
  }

  body {
    background-color: var(--figma-color-bg);
    color: var(--figma-color-text);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color: var(--figma-color-text);
  }

  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  input[type=number] {
    -moz-appearance: textfield;
  }

  p {
    margin: 0;
  }
</style>