Question 191695 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – How to display the label of an Antd Form.Item to the right of the input field?

I am using Ant Design React and I want to create a form where the label of a Form.Item is displayed to the right of the input field.

By default, the label is displayed to the left of the input field. I tried to set the labelAlign property to "right", but that only changes the text alignment of the label. How can I change the position of the label?

<Form.Item
  name={"isPickup"}
  label={t("booking.field.isPickup")}
  colon={false}
  valuePropName="checked"
>
  <Switch />
</Form.Item>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    To display the label to the right of the input field, you can use the labelCol and wrapperCol properties to adjust the columns. This also includes the style attribute, where you can set the CSS property order: 2 to the labelCol to change the order in the flex row that the Form.Item creates.

    For example:

    <Form.Item
  name={"isPickup"}
  label={t("booking.field.isPickup")}
  colon={false}
  valuePropName="checked"
  labelCol={{ style: { order: 2 } }}
>
  <Switch />
</Form.Item>

  2. 0

    To display the label of an Antd Form.Item to the right of the input field, you can make use of the Antd Grid system.

    <Form.Item
  name={"isPickup"}
  label={t("booking.field.isPickup")}
  colon={false}
  wrapperCol={{ sm: { offset: 8 } }} // Adjust the offset value according to your requirements
  valuePropName="checked"
>
  <Row>
    <Col flex="auto">
      <Switch />
    </Col>
    <Col style={{ marginLeft: 10 }}>
      {t("booking.field.isPickup")} {/* Display the label to the right */}
    </Col>
  </Row>
</Form.Item>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search