JSFiddle - React, Tailwind, and code Playground
HTML
<form id="form">
<label class="mb-3 mr-1" for="radio-ko" required>Portes (accessibles?): </label>
<input type="radio" name="gender3" class="btn btn-sm btn-outline-secondary" value="Ok" required> Ok ✅
<input checked type="radio" name="gender3" id="radio-ko" class="btn btn-sm btn-outline-secondary" value="Ko" required>Ko ❌<br>
<textarea name="gend3" rows="4" cols="20" placeholder="Si KO préciser les manquants" required id="textarea-ko"></textarea>
</form>
CSS
input {
display: unset;
}
textarea {
height: 30px;
width: 1000px;
}
JavaScript
const form = document.getElementById("form")
const koRadioElement = document.getElementById("radio-ko")
const koTextArea = document.getElementById("textarea-ko")
form.onchange = () => {
const isKoChecked = koRadioElement.checked
koTextArea.required = isKoChecked
koTextArea.disabled = !isKoChecked
}