Customization

Last updated October 28, 2025

figma
ui kit

Do you have a Figma design kit for SurveyJS components?

Yes. SurveyJS provides a publicly available Figma design kit that includes all the main components used to build the Survey Creator and Form Library interfaces. It also contains color palettes, icon sets, templates for main screens, and other design assets. You can explore the kit here: https://www.figma.com/@surveyjs


validation

Can I add my own validation rules?

Yes. If the built-in validators don't cover your needs, SurveyJS lets you add custom validation both on the client and server side.

Client-side custom validation

You can enforce your own rules directly in JavaScript:

  • Event-based client-side validation
    Use the onValidateQuestion event to check a value and return an error message if it's invalid. For example, you might require that an email ends with @surveyjs.io or that a number meets a condition. Because this logic lives in your code, respondents can't turn it off. You also decide when it runs - right after typing, when leaving a field, or only at survey completion - via the checkErrorsMode property.

  • Expression-based client-side validation
    Write a small validator function in JavaScript, register it, and then call it inside survey JSON just like any built-in function. This makes your rules reusable across multiple surveys and easy to maintain.

Server-side custom validation

You can also run server-side validation in SurveyJS when you need to check answers against a database, API, or backend logic before accepting submissions. There are two ways to do this:

  • Event-based server-side validation
    The onServerValidateQuestions event sends answers to your server, where you can confirm them (for example, making sure a country exists). This runs when a user navigates forward or finishes the survey.

  • Expressions with async functions
    Register an asynchronous validator that queries your server in real time, for example to check whether an email or username is available. This approach allows you to run immediate validation while the respondent is still filling out the field.

Both approaches keep your business rules secure, because respondents cannot bypass or disable server-side validation.


custom inputs

Can I add custom input fields in SurveyJS?

Yes. SurveyJS lets you go beyond the built-in question types and add your own custom questions. You have a few options:


custom CSS

Can I customize SurveyJS forms with CSS?

Yes. SurveyJS forms can be customized using both themes and custom CSS.

The recommended approach is to start with the SurveyJS theming system first. SurveyJS themes are based on CSS variables (design tokens), which makes it easy to apply consistent branding and visual changes across the UI without manually overriding component styles.

SurveyJS includes a collection of predefined themes shared across the entire product family. You can apply these themes to your forms as-is or use them as a starting point for further customization.

A no-code Theme Editor allows you to create and modify themes visually. Integrated into Survey Creator, Theme Editor provides UI controls for adjusting colors, typography, spacing, and other appearance settings. Once configured, a theme can be exported as a reusable JSON object.

The Theme Editor tab is disabled by default. To make it available to your end users, enable Theme Editor in Survey Creator programmatically, or include it as part of a custom UI preset configuration.

If you prefer not to use Theme Editor, you can also copy a predefined theme object and modify its CSS variables manually. This approach provides maximum flexibility. However, it requires a stronger understanding of how SurveyJS design tokens and CSS variables work.


custom CSS

Can I change the appearance of Survey Creator? Can I apply completely custom branding?

Yes. Survey Creator supports extensive appearance customization, including fully custom branding.

Survey Creator UI styling is based on the same design token system used across all SurveyJS products. Its appearance is controlled through themes, which are JSON configuration objects built on top of CSS variables. You can apply one of the predefined UI themes, modify an existing theme, or create an entirely custom one. For more details, see the Themes guide.

SurveyJS includes the following predefined themes out of the box:

  • Default
  • Soft
  • Contrast
  • Borderless
  • Flat
  • Plain
  • Monochrome
  • 3D

Each theme supports dark mode and a more compact panelless layout (without question containers), which gives you a total of 32 theme variations out of the box.

Additional customization is available through design tokens mapped to CSS variables. You can apply anything from simple branding changes—such as colors, typography, spacing, and corner radius—to more advanced UI adjustments for specific interface elements. Semantic tokens control global visual patterns across the UI, while component tokens let you customize individual elements without affecting the rest of the design system.

Survey Creator themes can be applied at runtime, which makes it possible to support tenant-specific branding, light/dark modes, user-selectable themes, or organization-level UI preferences. User-made theme customizations can be persisted in localStorage and restored later.

Send feedback to the SurveyJS team

Need help? Visit our support page

figma
ui kit
validation
custom inputs
custom CSS

Your cookie settings

We use cookies to make your browsing experience more convenient and personal. Some cookies are essential, while others help us analyse traffic. Your personal data and cookies may be used for ad personalization. By clicking “Accept All”, you consent to the use of all cookies as described in our Terms of Use and Privacy Statement. You can manage your preferences in “Cookie settings.”

Your renewal subscription expires soon.

Since the license is perpetual, you will still have permanent access to the product versions released within the first 12 month of the original purchase date.

If you wish to continue receiving technical support from our Help Desk specialists and maintain access to the latest product updates, make sure to renew your subscription by clicking the "Renew" button below.

Your renewal subscription has expired.

Since the license is perpetual, you will still have permanent access to the product versions released within the first 12 month of the original purchase date.

If you wish to continue receiving technical support from our Help Desk specialists and maintain access to the latest product updates, make sure to renew your subscription by clicking the "Renew" button below.