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

user_10924758 0
Viewed 609

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:

  1. 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.

react-hook-form reactjs forms css
1 Answers

You can try to wrap the input inside the label

<label>Diabetes &nbsp; <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.

user_174798250
Related