JSFiddle - React, Tailwind, and code Playground

HTML

<input class="one" type="text" name="variants" value="" />

<label><input class="checkbox" type="checkbox" name="xxs">xxs</label>
<label><input class="checkbox" type="checkbox" name="xs">xs</label>
<label><input class="checkbox" type="checkbox" name="s">s</label>
<label><input class="checkbox" type="checkbox" name="m">m</label>
<label><input class="checkbox" type="checkbox" name="l">l</label>

JavaScript

function handler () {
	const items = document.querySelectorAll('.checkbox:checked')
	const input = document.querySelector('.one')
  input.value = [...items].map(e => e.name).join(',')
}

const checkboxes = document.querySelectorAll('.checkbox')
for(const index in checkboxes){
    checkboxes[index].onchange = handler
}