show form with multiple columns in a single row

[muddana-harini]

const ExampleFormPage = () => {
    const schema = {
        title: "User Registration",
        type: "object",
        required: ["firstName", "lastName", "email"],
        properties: {
            firstName: { type: "string", title: "First Name", default: "" },
            lastName: { type: "string", title: "Last Name", default: "" },
            email: { type: "string", title: "Email", format: "email" },
            age: { type: "integer", title: "Age", minimum: 18 },
            password: { type: "string", title: "Password", minLength: 6 }
        }
    };

    const uiSchema = {
        password: {
            "ui:widget": "password",
            "ui:help": "Must be at least 6 characters long."
        }
    };



    const onSubmit = ({ formData }) => {
        console.log("Form data submitted:", formData);
    };

    const onError = (errors) => {
        console.log("Errors in form:", errors);
    };

    return (
        <div className="container">
            <BreadCrumb breadCrumbs={breadCrumbsCreateBP} />
            <div className="d-flex justify-content-between align-items-center">
                <h3 className="page-heading mb-0">User Registration</h3>
                <button
                    type="button"
                    className="btn btn-danger btn-min-width"
                    onClick={() => window.history.back()} // Assuming a back button functionality
                >
                    <i className="bi bi-arrow-left"></i> Back
                </button>
            </div>
            <div className="create-content-container">
                <Form
                    schema={schema}
                    uiSchema={uiSchema}
                    onSubmit={onSubmit}
                    onError={onError}
                    validator={validator}
                />
            </div>
        </div>
    );
};

export default ExampleFormPage;

How to get multiple fields in a single row?

[heath-freenome]

There really isn't an out-of-the-box solution for this yet. Sorry. See #3503