Radio Button Misplaced in Form.Check - React bootstrap

Viewed 15

So I've been trying to create a payment method wherein the user selects the desired payment method using radio buttons. Unfortunately, the button is somehow misplaced.

Here is my code:

<FormContainer>
        <CheckoutSteps step1 step2 step3></CheckoutSteps>
        <h1>Payment Method</h1>
        <Form onSubmit={submitHandler}>
          <Form.Group>
            <Form.Label as='legend'>Select Method</Form.Label>
          </Form.Group>
          <Col>
            <Form.Check
              type='radio'
              label='PayPal or Credit Card'
              id='PayPal'
              name='paymentMethod'
              value='PayPal'
              onChange={(e) => setPaymentMethod(e.target.value)}
            ></Form.Check>
            <Form.Check
              type='radio'
              label='Stripe'
              id='Stripe'
              name='paymentMethod'
              value='Stripe'
              onChange={(e) => setPaymentMethod(e.target.value)}
            ></Form.Check>
          </Col>
          <br></br>
          <Button type='submit' variant='primary'>
            Continue
          </Button>
        </Form>
      </FormContainer>
    </>

Here is the output: enter image description here

The button appears on the rightmost side. Using react-bootstrap 2.5

2 Answers

please change your id to be the same value

instead of id='Stripe' id='PayPal' use id=myradio

Update: Solved it by removing

as='legend'

in the Form.Label

Related