I've been struggling to align the labels next to the checkboxes on this form. I'm currently utilizing React with React-Hook-Form for validation and state management (you can find the code on GitHub: https://github.com/cipdv/ciprmt-mern/blob/main/client/src/components/User/HHForm/RFHHHForm.js - the file containing the form is RFHHHForm.js).
I have attempted a few solutions:
- I tried using Semantic UI's library in this way:
<div className='inline field'>
<div className='ui checkbox'>
<input defaultChecked={healthHistory?.epilepsy} name="epilepsy" type="checkbox" id="epilepsy" {...register('epilepsy')} />
<label>Epilepsy</label>
</div>
<div className='ui checkbox'>
<input defaultChecked={healthHistory?.diabetes} name="diabetes" type="checkbox" id="diabetes" {...register('diabetes')} />
<label>Diabetes</label>
</div>
Although this method aligned the labels and checkboxes, the checkboxes were no longer editable (unable to be checked or unchecked).
Another attempt involved creating a custom CSS stylesheet module like so:
input[type="checkbox"]
{
vertical-align:middle;
}
label,input{
display: inline-block;
vertical-align: middle;
}
However, this approach did not successfully align the elements as intended.