Skip to content
A Material Design survey that can be easily setup with JSON
Branch: master
Clone or download
Latest commit 63f4619 Dec 8, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
src fix for old import of slider Nov 8, 2019
.flowconfig checkpoint, some basic questions completed Dec 9, 2018
.gitignore fully compatible with workaround interview Dec 14, 2018
LICENSE Create LICENSE Dec 8, 2019
yarn.lock fix for old import of slider Nov 8, 2019

Material Survey

A material ui survey library for displaying and retrieving input from complex forms. Demo

This survey powers surveys on

import Survey from "material-survey/components/Survey"

const App = () => (
    onFinish={answers => {
      // Do something with the answers
      questions: [
          name: "favorite-fruit",
          title: "What is your favorite fruit?",
          type: "dropdown",
          choices: ["Apple", "Orange", "Watermelon"]

Want new features? Found a bug? Feel free to leave an issue or a pull request.

Interactive Demo

The entire storybook for Material Survey can be viewed here. Click the components on the left side of the page to see example components, at the bottom of the page shows the code to produce each component.

The most important component in Material Survey is the Survey component, click here to view the Survey component.

Survey Props

const App = () => (
    // See the "format" section, this is the SurveyJS/Material Survey format
        /* ... */
    // Optional: Invoked when the user clicks submit or finishes survey
    // AnswerObject => any
    onFinish={answers => null}
    // Optional: Required for file upload. Must handle uploading and return URL of file.
    // File => Promise<string>
    onFileUpload={file => ""}
    // Optional: Handles autocomplete requests, should return list of options for a given query
    // (requestUrl: string, queryValue: string) => Promise<Array<{ value: string, label: string, subLabel?: string }>>
    autocompleteRequest={(requestUrl, queryValue) => Promise.resolve([])}
    // Optional: Called anytime a question is changed
    // (questionId: string, newValue: any, answers: Object) => null
    onQuestionChange={(questionId, newValue, answers) => null}
    // Optional: default answers or previous answers to Survey
    // Object
    // Optional: Style variants for the survey
    // "flat" | "paper"
    // Optional: Whether or not to show complete/next/prev buttons
    // boolean
    // Optional: Customize complete text/content. Accepts React element.
    // string | React$Element


The MaterialSurvey format is based off the SurveyJS format. Check docs/

Developing / Testing

This project uses storybook. To develop features or create visual tests just run yarn install && yarn storybook in the cloned repository.

You can’t perform that action at this time.