JSFiddle - React, Tailwind, and code Playground

HTML

<input type="radio" name="price" value="value" id="value_radio" onclick="document.getElementById('value_input').focus()" required>
    
<label for="value_input">&euro;</label>
<input type="text" name="price_value" id="value_input" pattern="\d+(,\d{1,2})?" 
	onclick="document.getElementById('value_radio').checked=true">
        
<script>
	$('#value_radio').change(function () {
		if($(this).is(':checked') {
			$('#value_input').attr('required');
		} else {
			$('#value_input').removeAttr('required');
		}
	});
</script>
 
<input type="radio" name="price" id="free" value="free">
<label for="free">Free</label>