score:0

Accepted answer

by default, the div - parent of the checkboxes is a block level element. it should work, if you change it to be flex.

<div style={{display: "flex"}}>
  <checkbox inputid="method1" name="method" value="connect" onchange={onmethodchange} checked={methods.indexof('connect') !== -1} />
  <label htmlfor="method1">connect</label>
</div>

update.

add space between the checkbox and the label

  1. depending on how much space you need and the width of the div, you can use
 <div style={{display: "flex", justifycontent: "space-between"}}>
 
 - - - 
  1. set padding-right / margin-right on the outer most element in checkbox

  2. set padding-left / margin-left on the label

score:1

you can convert checkboxes to inline elements:

<div>
  <checkbox style={{display: "inline"}} inputid="method1" name="method" value="connect" onchange={onmethodchange} checked={methods.indexof('connect') !== -1} />
  <label htmlfor="method1">connect</label>
</div>

or, use flex layout:

<div style={{display: "flex"}}>
  <checkbox inputid="method1" name="method" value="connect" onchange={onmethodchange} checked={methods.indexof('connect') !== -1} />
  <label htmlfor="method1">connect</label>
</div>

Related Query

More Query from same tag