Custom Question Renderer

Each SurveyJS question type comes with a predefined renderer—a component that specifies the question's markup. If you want to customize a question's appearance, you can implement a custom renderer and use it instead of the predefined renderer, as shown in this demo for Radio Button Group questions.

Follow the instructions below to implement a custom renderer in your survey:

1. Create a component that renders your custom markup.
   If the component reuses a predefined renderer, its class should extend one of the predefined classes. For example, in this demo, a custom component adds an image to a predefined Radio Button Group question. The component's class extends Radio Button Group's class (see the RadiogroupWithImageQuestion class).

2. Register your component under a custom name in the component collection.
   In HTML/CSS/JavaScript projects, register the component in ReactElementFactory as shown in the index.js file.
   In React, register the component in ReactElementFactory as shown in the SurveyComponent.jsx file.
   In Angular, register the component in AngularComponentFactory as shown in the custom-radiogroup.component.ts file.
   In Vue 3 and Knockout, use techniques native to these libraries:

   • Component Registration in Vue 3
   • Component Registration in Knockout

3. Register your component as a renderer for a selected question type.
   Use the RendererFactory.Instance.registerRenderer(questionType, renderAs, rendererName, useAsDefault) method that accepts the following parameters:

   • questionType: string - A question type for which this renderer can be used.
   • renderAs: string - A name that activates this renderer. This name should be assigned to the renderAs property in JSON.
   • rendererName: string - The custom renderer's name under which you registered it in step 2.
   • useAsDefault: boolean - A flag that defines whether to use the custom component as a default renderer for all questions of the specified questionType. Default value: false.

4. Specify the renderAs property in the survey JSON schema.
   Set this property to the renderAs name under which you register the custom renderer in step 3. Specify the renderAs property only for those questions that should use the custom renderer. You can skip this step if you pass true as the useAsDefault parameter in the previous step.