Checkbox and label in same line

Issue

I would like to make filters using a modal window. But I have a problem, in that the checkbox and the label appear on different lines.

But I would like to see the checkbox and the label on the same line with a little space between. Tell me how this can be done. My code is below.

export default function FilterMethod  () {
    const [methods, setMethods] = useState([]);

    const onMethodChange = (e) => {
        let selectedMethods = [...methods];

        if (e.checked)
            selectedMethods.push(e.value);
        else
            selectedMethods.splice(selectedMethods.indexOf(e.value), 1);

        setMethods(selectedMethods);
    }

    return (

            <div>
                <h6>Method</h6>
                <div>
                    <Checkbox inputId="method1" name="method" value="Connect" onChange={onMethodChange} checked={methods.indexOf('Connect') !== -1} />
                    <label htmlFor="method1">Connect</label>
                </div>
                <div className="field-checkbox">
                    <Checkbox inputId="method2" name="method" value="Delete" onChange={onMethodChange} checked={methods.indexOf('Delete') !== -1} />
                    <label htmlFor="method2">Delete</label>
                </div>
                <div className="field-checkbox">
                    <Checkbox inputId="method3" name="method" value="Get" onChange={onMethodChange} checked={methods.indexOf('Get') !== -1} />
                    <label htmlFor="method3">Get</label>
                </div>
                <div className="field-checkbox">
                    <Checkbox inputId="method4" name="method" value="Head" onChange={onMethodChange} checked={methods.indexOf('Head') !== -1} />
                    <label htmlFor="method4">Head</label>
                </div>

            </div>

    )}

Solution

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"}}>
 
 - - - 

2. Set padding-right / margin-right on the outer most element in Checkbox

3. Set padding-left / margin-left on the label

Answered By - mahan