How can I get the checkbox and label to line up in a form with React? - css

Question

I'm having a hard time getting the labels on this form to line up beside the checkboxes. I'm using React with React-Hook-Form for validation and state management (here's the github: https://github.com/cipdv/ciprmt-mern/blob/main/client/src/components/User/HHForm/RFHHHForm.js if that helps, the file with the form is called RFHHHForm.js).
I've tried a few things:
I tried using semantic ui's library like this:
<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>
When I used this, the label and checkboxes line up, but for some reason the checkboxes become uneditable (can't be checked or unchecked).
I tried making my own css stylesheet module like this:
input[type="checkbox"]
{
vertical-align:middle;
}
label,input{
display: inline-block;
vertical-align: middle;
}
But this didn't seem to work at lining anything up.

Answer 1

You can try to wrap the input inside the label
<label>Diabetes <input defaultChecked={healthHistory?.diabetes} name="diabetes" type="checkbox" id="diabetes" {...register('diabetes')} /></label>
or with your checkbox class you can
.checkbox{
display: flex;
align-items: center;
}
let me know if it worked.