custom component not visible in basic group

[rajkumarrathod404]

Describe the bug A clear and concise description of what the bug is. dependencies : "@formio/js": "5.0.0-dev.5621.91bd945", "@formio/react": "6.0.0-dev.568.ced0fbd",

To Reproduce Steps to reproduce the behavior:

1. add custom component :

  value,
  onChange,
  labels,
}: {
  value: string;
  onChange: (value: string) => void;
  labels: { label: string; value: string }[]; // Accept label and value pairs
}) => {
  return `
        <div class="custom-checkbox-component">
            ${labels
              .map(
                (item) => `
                <label>
                    <input 
                        type="checkbox" 
                        checked="${value === item.value}" 
                        onChange="javascript:(${onChange})('${item.value}')" 
                    />
                    ${item.label}
                </label>
            `
              )
              .join("")}
        </div>
    `;
}```

2. register custom component : 
```import { Components } from "formiojs";
import SingleChoiceQnRender from "../renderComponents/singleChoiceQnRender";

// Register the custom component with Form.io
Components.addComponent("customcomponent", SingleChoiceQnRender);

3. render component :

const FieldComponent = Components.components.field;
import { getSingleChoiceQn } from "../customComponents/getSingleChoiceQn";

class SingleChoiceQnRender extends FieldComponent {
  // Define the schema for the custom component
  static schema(...extend) {
    return FieldComponent.schema({
      type: "customcomponent", // The type identifier for this component
      key: "customComponent",
      inputType: "select",
      input: true,
      data: {
        values: [
          { label: "Yes", value: "yes" },
          { label: "No", value: "no" },
        ],
        options: [],
      },
      ...extend,
    });
  }

  // Define the information for the builder (drag and drop interface)
  static get builderInfo() {
    return {
      title: "Single Choice Question",
      group: "basic", // The group under which the component appears
      icon: "fa fa-toggle-on", // Icon for the component in the builder
      weight: 0, // Position in the list
      schema: SingleChoiceQnRender.schema(),
    };
  }

  // Render the select dropdown with "Yes" and "No" options
  render() {
    const labels = this.component.data.values; // Get the labels from the schema

    const SingleChoiceQnHtml = getSingleChoiceQn({
      value: this.dataValue,
      onChange: (event) => this.updateValue(event.target.value),
      labels: labels,
    });

    return super.render(SingleChoiceQnHtml);
  }

  // Attach event listeners to the select input
  attach(element) {
    this.loadRefs(element, { input: "single" });
    if (this.refs.input) {
      this.refs.input.addEventListener("change", (event) => {
        this.updateValue(event.target.value);
      });
    }
    return super.attach(element);
  }

  get defaultSchema() {
    return SingleChoiceQnRender.schema();
  }
}

export default SingleChoiceQnRender

4. form builder

import "formiojs/dist/formio.full.css";
import { useState } from "react";
// import ReactJson from "@microlink/react-json-view";
import "../../../../../../src/form-builder/style/Builder.css";
import "bootstrap/dist/css/bootstrap.min.css";
import CustomTitle from "../../../../../components/app/CustomTitle";
import { ScrollArea } from "../../../../../components/ScrollBar";
import "../../../../../form-builder/registerComponent/registerCustomComponents.js";

const Builder = () => {
  const [schema, setSchema] = useState<any>({
    display: "form",
    components: [
      {
        type: "button",
        action: "submit",
        label: "Submit",
        input: true,
        key: "submit",
      },
      
    ],
  });

  const onFormChange = (schema: any) => {
    setSchema(schema);
  };

  return (
    <ScrollArea height="calc(100vh - 138px)">
      <FormBuilder form={formConfig} onChange={onFormChange} />
      {/* <ReactJson src={schema} name={null} collapsed={true}></ReactJson> */}
      <CustomTitle>preview </CustomTitle>
      <Form src={schema} />
    </ScrollArea>
  );
};
export default Builder;

const formConfig = {
  components: [],
};

Expected behavior custom single select component should visible in the basic group components

Screenshots

Desktop (please complete the following information):

• OS: [linux]
• Browser [firefox]
• Version [22.0 lts]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context how we can add custom component in groups

[lane-formio]

Can you provide a code sandbox to help us reproduce?

[seeranjeeviramavel]

To resolve this, you can utilize the options prop in FormBuilder to explicitly enable your custom component. Here's how you can configure it:

const options = {
  builder: {
    basic: {
      components: {
        customcomponent: true, // Enable your custom component
      },
    },
  },
};


<FormBuilder options={options} />

If this configuration does not work, you might need to ensure that your custom component is properly registered. Make sure the Components.addComponent method is called before rendering the FormBuilder.

[lane-formio]

@seeranjeeviramavel Thanks again!