Checkbox design bootstrap

I'm trying to get a checkbox to look like this

correct box

what I've tried

                     <div class="col-2">
                            <label for="WitholdingTax">Charge</label>
                            <div class="input-group mb-3">
                                <input type="checkbox" class="form-control" style="height:50px" aria-label="Amount (to the nearest dollar)">
                                <div class="input-group-prepend">
                                    <span class="input-group-text" style="height:50px">0</span>
                                </div>
                                <div class="input-group-append">
                                    <span class="input-group-text" style="height:50px">%</span>
                                </div>
                            </div>
                        </div>

And that looks like this Wrong box