Customization
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
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. You can enforce your own rules directly in JavaScript: Event-based client-side validation Expression-based client-side 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 Expressions with async functions Both approaches keep your business rules secure, because respondents cannot bypass or disable server-side validation.Client-side custom 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.
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
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.
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.
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: Create a new custom field Extend an existing question type Composite questions Integrate third-party components
Build a completely new input field with custom behaviour.
Start from a built-in question (like Dropdown or Checkbox) and add your own properties or logic.
Combine several inputs into one reusable field (for example, an Address field made of street, city, and zip code).
Use React, Angular, or Vue 3 widgets to plug in specialised inputs.
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.
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: 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