{"id":19976627,"url":"https://github.com/erossini/blazorsurvey","last_synced_at":"2026-06-11T15:31:04.410Z","repository":{"id":213304556,"uuid":"733541208","full_name":"erossini/BlazorSurvey","owner":"erossini","description":"Survey generator for Blazor WebAssembly and Blazor Server. Working with NET8","archived":false,"fork":false,"pushed_at":"2023-12-20T11:57:18.000Z","size":1211,"stargazers_count":3,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-01T19:13:11.929Z","etag":null,"topics":["blazor","blazor-component","blazor-components","blazor-server","blazor-webassembly","net8"],"latest_commit_sha":null,"homepage":"https://puresourcecode.com/dotnet/blazor/create-form-dynamically-with-blazor","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/erossini.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":"FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"erossini"}},"created_at":"2023-12-19T15:00:36.000Z","updated_at":"2024-03-03T17:43:46.000Z","dependencies_parsed_at":null,"dependency_job_id":"5fddd503-643b-429c-a9bd-f1ca39355801","html_url":"https://github.com/erossini/BlazorSurvey","commit_stats":null,"previous_names":["erossini/blazorsurvey"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/erossini/BlazorSurvey","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erossini%2FBlazorSurvey","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erossini%2FBlazorSurvey/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erossini%2FBlazorSurvey/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erossini%2FBlazorSurvey/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/erossini","download_url":"https://codeload.github.com/erossini/BlazorSurvey/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erossini%2FBlazorSurvey/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34206487,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-11T02:00:06.485Z","response_time":57,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["blazor","blazor-component","blazor-components","blazor-server","blazor-webassembly","net8"],"created_at":"2024-11-13T03:24:46.057Z","updated_at":"2026-06-11T15:31:04.372Z","avatar_url":"https://github.com/erossini.png","language":null,"funding_links":["https://github.com/sponsors/erossini"],"categories":[],"sub_categories":[],"readme":"# Survey components for Blazor\n\n![image](https://github.com/erossini/BlazorSurvey/assets/9497415/4cb8e86c-aaf8-4d17-bf56-203a42397e12)\n\nThis component is a survey generator for [Blazor WebAssembly](https://www.puresourcecode.com/tag/blazor-webassembly/) and [Blazor Server](https://www.puresourcecode.com/tag/blazor-server/). The component is built with .NET6 but it is working also with NET8.\n\n\u003e The source code is not publicly available. If you make a donation, please use the [Sponsor](https://github.com/sponsors/erossini) button at the top of the [GitHub repository](https://github.com/erossini/BlazorSurvey) and I will give you access to the NuGet feed. Alternatively, you can contact me on [PureSourceCode](http://www.puresourcecode.com/) for more info, licence and donation.\n\nThe source code of the demo project is not working if you don't have access to the private NuGet feed. You can check the demo [here](https://survey.puresourcecode.com).\n\nIf you are interested in using it or like to have the source code, please contact me.\n\n## Components\n\n### Basic components\n\n- [x] Textbox\n- [x] Checkbox\n- [x] Slider\n- [x] Radiobutton\n- [x] DropdownList\n- [x] Comment\n- [x] Boolean\n- [x] ImagePicker\n- [ ] UploadFile\n- [X] HTML\n\n### Group of components\n\n- [x] Matrix (Single choice)\n- [ ] Matrix (Multiple choices)\n- [ ] Matrix Dynamic rows\n- [ ] Multiple Textbox\n\n### Custom components\n\n- [x] NPS (Net Promoter Score)\n- [x] Likert Skill\n- [ ] Multiselect\n- [ ] Semantic differential\n- [x] Rating\n- [ ] Ranking\n\n### Group of elements\n\n- [x] Panel\n- [ ] Page\n- [x] Repeater\n\n## Components\n\nHere is the description of all the elements in the `Survey` component.\n\n### Checkbox\n\nA checkbox is a small interactive box that can be toggled by the user to indicate an affirmative or negative choice.\nThe user can select one or more than one choice in the list. If you want to allow the user to select only one choice for the list,\nit is better to use the _Radiobutton_.\n    \n![image](https://github.com/erossini/BlazorSurvey/assets/9497415/12666728-a569-4bc7-958e-a6bed3b3a5ff)\n\n```csharp\nForm form = new Form()\n{\n    Elements = new List\u003cIElement\u003e()\n    {\n        new Checkbox()\n        {\n            Title = \"This is a checkbox\",\n            Description = \"Try to check more than one option\",\n            Choices = new List\u003cobject\u003e()\n            {\n                \"One\",\n                \"Two\",\n                \"Three\",\n                new CheckboxChoice()\n                {\n                    Label = \"Four\"\n                }\n            }\n        },\n        new Checkbox()\n        {\n            Title = \"This is another checkbox\",\n            Description = \"Try to check more than one option\",\n            Orientation = PSC.Survey.Shared.Enums.Orientation.Horizontal,\n            Choices = new List\u003cobject\u003e()\n            {\n                \"One\",\n                \"Two\",\n                \"Three\",\n                new CheckboxChoice()\n                {\n                    Label = \"Four\"\n                }\n            }\n        }\n    }\n};\n```\n\nThis is an example of the resulting `json`:\n\n```\n{\n  \"chk_1\": [\n    {\n      \"value\": 1,\n      \"text\": \"One\"\n    }\n  ],\n  \"chk_2\": [\n    {\n      \"value\": 2,\n      \"text\": \"Two\"\n    }\n  ]\n}\n```\n\n### Comment\n\nA comment is a big _Textbox_ where the user can type any kind of text. Multilines are supported.\n\n![image](https://github.com/erossini/BlazorSurvey/assets/9497415/feae3ac0-e6d9-4343-9aa5-4e89e566eaff)\n\n```csharp\nForm form = new Form()\n    {\n        Elements = new List\u003cIElement\u003e()\n        {\n            new Comment()\n            {\n                Title = \"This is a comment\",\n                Description = \"Type everything you want to say\"\n            },\n            new Comment()\n            {\n                Title = \"Comment required\",\n                Description = \"This comment must be have a value but max 50 characters\",\n                IsRequired = true,\n                MaxLength = 50\n            }\n        }\n    };\n```\n\nThis is an example of the generated `json`:\n\n```\n{\n  \"cmt_1\": \"This is my first comment\",\n  \"cmt_2\": \"This comment is required with a maximum of 50 char\"\n}\n```\n\n### Dropdown\n\nA dropdown listis a graphical control element that allows the user to choose one or more value from a list.\n\n![image](https://github.com/erossini/BlazorSurvey/assets/9497415/293b54e9-0857-4345-813a-7892b088d165)\n\n```csharp\nForm form = new Form()\n    {\n        Elements = new List\u003cIElement\u003e()\n        {\n            new DropdownList()\n            {\n                Title = \"This is a dropdown list\",\n                Choices = new List\u003cobject\u003e()\n                {\n                    \"First option\",\n                    new DropdownListChoice()\n                    {\n                            Value = \"Second\",\n                            Label = \"Second option\"\n                    },\n                    \"Third option\"\n                }\n            },\n            new DropdownList()\n            {\n                Title = \"This is a dropdown list\",\n                IsMultiselect = true,\n                Choices = new List\u003cobject\u003e()\n                {\n                    \"First option\",\n                    new DropdownListChoice()\n                    {\n                            Value = \"Second\",\n                            Label = \"Second option\"\n                    },\n                    \"Third option\"\n                }\n            }\n        }\n    };\n```\n\nThis is an example of the generated `json`:\n\n```\n{\n  \"ddl_1\": [\n    {\n      \"value\": \"Second\",\n      \"text\": \"Second option\"\n    }\n  ],\n  \"ddl_2\": [\n    {\n      \"value\": \"3\",\n      \"text\": \"Third option\"\n    }\n  ]\n}\n```\n\n### HTML\n\nThis component displays a HTML text and it is not related to a question. It can be used to display information in any part of the survey.\n\n```csharp\nForm form = new Form()\n    {\n        Elements = new List\u003cIElement\u003e()\n        {\n            new HTML()\n            {\n                Title = \"This is a HTML component\",\n                Description = \"Display HTML code\",\n                Body = \"\u003ch1\u003eThis is a title\u003c/h1\u003e\u003cp\u003eThis is a paragraph\u003c/p\u003e\"\n            }\n        }\n    };\n```\n\n### ImagePicker\n\nThis component displays a list of images and the user has to select one or more of them.\n\n![image](https://github.com/erossini/BlazorSurvey/assets/9497415/17d6dd7a-815f-4208-9860-bd956b2426aa)\n\n```csharp\nForm form = new Form()\n    {\n        Elements = new List\u003cIElement\u003e()\n        {\n            new ImagePicker()\n            {\n                Title = \"This is an ImagePicker\",\n                Description = \"Select one image from the following\",\n                Choices = new List\u003cImagePickerChoice\u003e()\n                {\n                    new ImagePickerChoice() { ImageUrl = \"http://placekitten.com/220/200\", Text = \"Kitten 1\", Value = \"1\" },\n                    new ImagePickerChoice() { ImageUrl = \"http://placekitten.com/180/200\", Text = \"Kitten 2\", Value = \"2\" },\n                    new ImagePickerChoice() { ImageUrl = \"http://placekitten.com/130/200\", Text = \"Kitten 3\", Value = \"3\" },\n                    new ImagePickerChoice() { ImageUrl = \"http://placekitten.com/270/200\", Text = \"Kitten 4\", Value = \"4\" }\n                }\n            },\n            new ImagePicker()\n            {\n                Title = \"Where do you like to live?\",\n                Description = \"Select all the images you like from the following\",\n                IsMultiselect = true,\n                Choices = new List\u003cImagePickerChoice\u003e()\n                {\n                    new ImagePickerChoice() { ImageUrl = \"https://www.w3schools.com/css/img_5terre.jpg\", Text = \"5 terre\", Value = \"1\" },\n                    new ImagePickerChoice() { ImageUrl = \"https://www.w3schools.com/css/img_forest.jpg\", Text = \"Forest\", Value = \"2\" },\n                    new ImagePickerChoice() { ImageUrl = \"https://www.w3schools.com/css/img_lights.jpg\", Text = \"Lights\", Value = \"3\" },\n                    new ImagePickerChoice() { ImageUrl = \"https://www.w3schools.com/css/img_mountains.jpg\", Text = \"Mountains\", Value = \"4\" },\n                    new ImagePickerChoice() { ImageUrl = \"https://www.w3schools.com/css/paris.jpg\", Text = \"Paris\", Value = \"5\" }\n                }\n            }\n        }\n    };\n```\n\nThis is an example of the generated `json`:\n\n```\n{\n  \"imp_1\": [\n    {\n      \"text\": \"Kitten 2\",\n      \"value\": \"2\"\n    }\n  ]\n}\n```\n\n### LikertSkill\n\nA Likert scale is a close-ended, forced-choice scale used in a questionnaire that provides a series of answers that go from one extreme to another.\n\n- A Likert scale enables respondents to choose from a linear set of responses that increase or decrease in intensity or strength. It is a close-ended, forced-choice scale.\n- Widely used in psychological and other social science research today, Likert scales enable researchers to collect data that provides nuance and insight into participants’ opinions. This data is quantitative and can easily be analyzed statistically.\n- Likert items often offer response categories on a 1-to-5 scale, but a range of options is possible, including 1-to-7 and 0-to-4 scales or even-numbered scales that typically range from 1-to-4 or 1-to-6.\n    \n![image](https://github.com/erossini/BlazorSurvey/assets/9497415/94e67e0d-c11e-4c29-9610-8ea6a2bfd3b0)\n\n```csharp\nForm form = new Form()\n    {\n        Elements = new List\u003cIElement\u003e()\n        {\n            new LikertSkill() { \n                Name = \"lsk_1\", Title = \"Liker Skill Type 1\", \n                LikertSkirtType = PSC.Survey.Shared.Enums.LikertSkillType.Agree \n            },\n            new LikertSkill() { \n                Name = \"lsk_2\", Title = \"Liker Skill Type 2\", \n                LikertSkirtType = PSC.Survey.Shared.Enums.LikertSkillType.Helpful \n            },\n            new LikertSkill() { \n                Name = \"lsk_3\", Title = \"Liker Skill Type 3\", \n                LikertSkirtType = PSC.Survey.Shared.Enums.LikertSkillType.Satisfied\n            }\n        }\n    };\n```\n\nThis is an example of the generated `json`:\n\n```\n{\n  \"lsk_1\": {\n    \"value\": 2,\n    \"text\": \"Agree\"\n  },\n  \"lsk_2\": {\n    \"value\": 3,\n    \"text\": \"Somewhat helpful\"\n  },\n  \"lsk_3\": {\n    \"value\": 4,\n    \"text\": \"Somewhat disatisfied\"\n  }\n}\n```\n\n### Matrix\n\nIn a survey, a matrix question is a type of closed-ended question that offers respondents a selection of multiple answers to choose from within a single question. Unlike other closed-ended questions, a matrix question comprises a series of different questions that all share the same set of answer options.\n\nThe purpose of a matrix question is to efficiently gather information from respondents about a specific topic by providing them with a comprehensive range of answer options to choose from. This approach to questioning can help to reduce survey length and increase survey response rates, as respondents can quickly provide their answers to a series of related questions.\n\nOverall, the use of matrix questions in surveys can be an effective way to gather detailed information from respondents in a streamlined and efficient manner.\n\n![image](https://github.com/erossini/BlazorSurvey/assets/9497415/2df09720-756a-40c1-8bf0-7138b7eb8771)\n\n```csharp\nForm form = new Form()\n    {\n        Elements = new List\u003cIElement\u003e()\n        {\n            new Matrix()\n            {\n                Title = \"This is a matrix\",\n                Description = \"Select the appropriate option\",\n                Columns = new List\u003cstring\u003e()\n                {\n                    \"Strongly agree\", \"Agree\", \"Neither agree or disagree\", \"Disagree\", \"Strongly disagree\"\n                },\n                Rows = new List\u003cstring\u003e()\n                {\n                    \"I like to work\", \"I like staying at home\", \"I like to go on holidays\" \n                }\n            }\n        }\n    };\n```\n\nThis is an example of the resulting `json`:\n\n```\n{\n  \"mtx_1\": [\n    {\n      \"column\": 2,\n      \"text\": \"Neither agree or disagree\"\n    },\n    {\n      \"row\": 1,\n      \"column\": 1,\n      \"text\": \"Agree\"\n    },\n    {\n      \"row\": 2,\n      \"column\": 4,\n      \"text\": \"Strongly disagree\"\n    }\n  ]\n}\n```\n\n### NPS\n\nNet Promoter Score (NPS) is a customer loyalty and satisfaction measurement taken by asking customers how likely they are to recommend your product or service to others on a scale of 1-11 (or 0-10).\n\nNPS can be used as a predictor of business growth. When your company’s NPS is high (or, at least, higher than the industry average), you know that you have a healthy relationship with customers who are likely to act as evangelists for the brand, fuel word of mouth, and generate a positive growth cycle.\n\n![image](https://github.com/erossini/BlazorSurvey/assets/9497415/06c6a9d1-4a65-4bb3-91f6-e16b8b278317)\n\n```csharp\nForm form = new Form()\n    {\n        Elements = new List\u003cIElement\u003e()\n        {\n            new NPS() { \n                Name = \"nps1\", \n                Title = \"This is an example of NPS\", \n                Description = \"Select a value between 1 and 11\" \n            }\n        }\n    };\n```\n\nThis is an example of the resulting `json`:\n\n```\n{\n  \"nps_1\": {\n    \"value\": 7,\n    \"text\": \"7\"\n  }\n}\n```\n\n### Panel\n\nThe panel defines a group of elements that need to be highlighted.\n\n```csharp\nForm form = new Form()\n    {\n    Elements = new List\u003cIElement\u003e()\n    {\n        new Panel() {\n            Name=\"pnl1\",\n            Title = \"This is a panel\",\n            Description = \"Panel example that conains other elements\",\n            PanelElements = new List\u003cIElement\u003e()\n            {\n                new Textbox() { Title = \"Username\", PlaceHolder = \"Enter your new name\", Name = \"txtNewName\",\n                    Description = \"Insert your new name\", IsRequired = true },\n                new Textbox() {\n                    Title = \"Password\", PlaceHolder = \"Enter your password\", Name = \"txtPassword\", IsRequired = true,\n                    TextboxType = PSC.Survey.Shared.Enums.TextboxType.Password\n                },\n                new LikertSkill() { Name = \"lsk1\", Title = \"Liker Skill\", LikertSkirtType = PSC.Survey.Shared.Enums.LikertSkillType.Agree }\n            }\n        },\n        new Panel() {\n            Name=\"pnl1\",\n            Title = \"This is a second panel\",\n            Description = \"Panel example that conains other elements\",\n            BackgroundColor = \"#c0c0c0\",\n            PanelElements = new List\u003cIElement\u003e()\n            {\n                new Textbox() { Title = \"Username\", PlaceHolder = \"Enter your new name\", Name = \"txtNewName\",\n                    Description = \"Insert your new name\", IsRequired = true },\n                new Textbox() {\n                    Title = \"Password\", PlaceHolder = \"Enter your password\", Name = \"txtPassword\", IsRequired = true,\n                    TextboxType = PSC.Survey.Shared.Enums.TextboxType.Password\n                }\n            }\n        }\n\n    }\n};\n```\n\n### Radiobutton\n\nA radio button is one type of selection indicator in a list of options. If an option is selected, the circle is filled. If the option is not selected, the circle is empty.\nWhen one circle is selected, the others are deselected, so that only one option may be selected at any time.\n\n![image](https://github.com/erossini/BlazorSurvey/assets/9497415/364076da-b596-4b2e-a444-6aba3c8b8be2)\n\n```csharp\nForm form = new Form()\n    {\n        Elements = new List\u003cIElement\u003e()\n        {\n            new Radiobutton() { Title = \"This is a radiobutton\", Description = \"Select one of the following options\",\n                Name = \"radio1\", Choices = new List\u003cobject\u003e() {\n                    \"One\", \"Two\", \"Three\",\n                    new RadiobuttonChoice() { Label = \"Four\" }\n                }, IsRequired = true },\n            new Radiobutton() { \n                Title = \"This is a radiobutton\", \n                Description = \"Select one of the following options\",\n                Name = \"radio12\", \n                Choices = new List\u003cobject\u003e() {\n                    \"One\", \"Two\", \"Three\",\n                    new RadiobuttonChoice() { Label = \"Four\" }\n                }, \n                VisibleIf = \"radio1 = 1\",\n                IsRequired = true },\n            new Radiobutton() { Title = \"This is a second radiobutton\", Description = \"Select one of the following options\",\n                Name = \"radio2\", Choices = new List\u003cobject\u003e() {\n                    \"21\", \"22\", \"23\",\n                    new RadiobuttonChoice() { Label = \"24\" }\n                }, IsRequired = true, Orientation = PSC.Survey.Shared.Enums.Orientation.Horizontal },\n            new Radiobutton() { Title = \"This is a second radiobutton\", Description = \"Select one of the following options\",\n                Name = \"radio3\", Choices = new List\u003cobject\u003e() {\n                    \"31\", \"32\", \"33\",\n                    new RadiobuttonChoice() { Label = \"34\" }\n                }, \n                IsRequired = true,\n                Orientation = PSC.Survey.Shared.Enums.Orientation.Horizontal,\n                Theme = PSC.Survey.Shared.Enums.RadioTheme.Boxed }\n            }\n    };\n```\n\nThis is an example of the resulting `json`\n\n```\n{\n  \"radio1\": {\n    \"value\": 1,\n    \"text\": \"One\"\n  },\n  \"radio2\": {\n    \"value\": 2,\n    \"text\": \"22\"\n  },\n  \"radio3\": {\n    \"value\": 3,\n    \"text\": \"33\"\n  }\n}\n```\n\n### Rating\n\nA radio button is one type of selection indicator in a list of options. If an option is selected, the circle is filled. If the option is not selected, the circle is empty.\nWhen one circle is selected, the others are deselected, so that only one option may be selected at any time.\n\nA radio button is one type of selection indicator in a list of options. If an option is selected, the circle is filled. If the option is not selected, the circle is empty.\nWhen one circle is selected, the others are deselected, so that only one option may be selected at any time.\n\n![image](https://github.com/erossini/BlazorSurvey/assets/9497415/b30db8b0-a98a-4fd0-9a3a-ae3f6430d764)\n\n```csharp\nForm form = new Form()\n    {\n        Elements = new List\u003cIElement\u003e()\n        {\n            new Rating() {\n                Title = \"How was your experience?\",\n                Description = \"Select a value between 1 and 5\"\n            }\n        }\n    };\n```\n\nThis is an example of the generated `json`:\n\n```\n{\n  \"rtn_1\": {\n    \"value\": 3,\n    \"text\": \"3\"\n  }\n}\n```\n\n### Repeater\n\n### Slider\n\nThe slider can be used when allowing users to specify any numeric value within a preset range.\nIt is also known as the range slider because you are supposed to create a minimal and maximal value the user can choose from.\n\n![image](https://github.com/erossini/BlazorSurvey/assets/9497415/50fcfd7f-8312-4cfb-a00c-ce52183bb880)\n\n```csharp\nForm form = new Form()\n    {\n        Elements = new List\u003cIElement\u003e()\n        {\n            new Slider() {\n                Name = \"sld1\",\n                Title = \"Slider\",\n                Description = \"This is an example of a slider\",\n                MinValue = 1,\n                MaxValue = 6,\n                IsVisible = true,\n                Choices = new List\u003cSliderChoice\u003e()\n                {\n                    new SliderChoice() { Value = 1, Label = \"One\" },\n                    new SliderChoice() { Value = 3, Label = \"Three\" },\n                    new SliderChoice() { Value = 6, Label = \"Six\" }\n                },\n                ShowAllTicks = true\n            },\n            new Slider() {\n                Name = \"sld2\",\n                Title = \"Slider\",\n                Description = \"This is an example of a slider\",\n                MinValue = 1,\n                MaxValue = 11,\n                IsVisible = true,\n                Choices = new List\u003cSliderChoice\u003e()\n                {\n                    new SliderChoice() { Value = 1, Label = \"One\" },\n                    new SliderChoice() { Value = 6, Label = \"Six\" },\n                    new SliderChoice() { Value = 11, Label = \"Eleven\" }\n                },\n                ShowAllTicks = true\n            },\n        }\n    };\n```\n\nThis is an example of the generated `json`:\n\n```\n{\n  \"sld_1\": 3\n}\n```\n\n### Switch\n\nThe toggle switch represents a physical switch that allows users to turn things on or off, like a light switch. \nUse toggle switch controls to present users with two mutually exclusive options (such as on/off), \nwhere choosing an option provides immediate results.\n\n![image](https://github.com/erossini/BlazorSurvey/assets/9497415/ec348b5a-2c5b-458e-8b5a-54e58d46c055)\n\n```csharp\nForm form = new Form()\n    {\n        Elements = new List\u003cIElement\u003e()\n        {\n            new Switch()\n            {\n                Title = \"This is a switch\",\n                Description = \"The switch can be on or off\"\n            }\n        }\n    };\n```\n\nThis is an example of the generated `json`:\n\n```\n{\n  \"swc_1\": [\n    {\n      \"value\": 1,\n      \"text\": \"\"\n    }\n  ]\n}\n```\n\n### TextBox\n\nA text box is a rectangular area on the screen where you can enter text. \nIt is a common user interface element found in many types of software programs, such as web browsers, email clients, and word processors. \nWhen you click in a text box, a flashing cursor is displayed, indicating you can begin typing. \nIf you are using a tablet, tapping inside a text box may automatically display the on-screen keyboard.\n\nA `TextBox` is a place where the user can type some text like the following screenshot:\n\n![image](https://github.com/erossini/BlazorSurvey/assets/9497415/399cdf31-3934-4691-91d0-de51e91a5bb0)\n\nThe available types of `TextBox` are:\n\n- Color\n- Date\n- DateTime\n- Email\n- Month\n- Number\n- Password\n- Telephone\n- Text\n- Week\n- URL\n\nTo create a `Survey` with all types, here a full example:\n\n```\n@if(form == null)\n{\n    \u003cp\u003eGenerating form...\u003c/p\u003e\n}\nelse {\n    \u003cSurvey Form=\"form\" ShowDebug=\"true\" OnFormValuesChanged=\"OnFormValuesChanges\"\n            OnFormSubmitted=\"OnFormSubmitted\" OnFormSubmittedError=\"OnFormSubmittedError\" /\u003e\n}\n```\nand here the code\n\n```csharp\n@code {\n    Form form;\n\n    protected override async Task OnInitializedAsync()\n    {\n        form = new Form()\n            {\n                Elements = new List\u003cIElement\u003e()\n                {\n                    new Textbox() {\n                        Title = \"Normal textbox\",\n                        Description = \"This is a normal textbox\",\n                        PlaceHolder = \"Enter your name\",\n                        IsRequired = true },\n                    new Textbox() {\n                        Title = \"Password\",\n                        PlaceHolder = \"Enter your future password\",\n                        Name = \"txtPassword\",\n                        TextboxType = PSC.Survey.Shared.Enums.TextboxType.Password,\n                        IsRequired = true },\n                    new Textbox() {\n                        Title = \"Textbox max length 10\",\n                        PlaceHolder = \"Enter your name\",\n                        Name = \"txtMaxLength\",\n                        MaxLength = 10,\n                        IsRequired = true },\n                    new Textbox() {\n                        Title = \"Email validation\",\n                        PlaceHolder = \"Enter your email\",\n                        Name = \"txtEmail\",\n                        TextboxType = PSC.Survey.Shared.Enums.TextboxType.Email },\n                    new Textbox() {\n                        Title = \"Number validation\",\n                        PlaceHolder = \"Enter a number\",\n                        Name = \"txtNumber\",\n                        TextboxType = PSC.Survey.Shared.Enums.TextboxType.Number },\n                    new Textbox() {\n                        Title = \"Your favorite color\",\n                        PlaceHolder = \"Pick up a color\",\n                        Name = \"txtColor\",\n                        TextboxType = PSC.Survey.Shared.Enums.TextboxType.Color },\n                    new Textbox() {\n                        Title = \"Your favorite website\",\n                        PlaceHolder = \"Enter the url\",\n                        Name = \"txtUrl\",\n                        TextboxType = PSC.Survey.Shared.Enums.TextboxType.URL },\n                    new Textbox() {\n                        Title = \"Phone number\",\n                        PlaceHolder = \"Enter your phone number\",\n                        Name = \"txtPhone\",\n                        TextboxType = PSC.Survey.Shared.Enums.TextboxType.Telephone },\n                    new Textbox() {\n                        Title = \"Select a date\",\n                        PlaceHolder = \"Pick up a date you like\",\n                        Name = \"txtDate\",\n                        TextboxType = PSC.Survey.Shared.Enums.TextboxType.Date },\n                    new Textbox() {\n                        Title = \"Select a date and time\",\n                        PlaceHolder = \"Pick up a date you like\",\n                        Name = \"txtDateTime\",\n                        TextboxType = PSC.Survey.Shared.Enums.TextboxType.DateTime },\n                    new Textbox() {\n                        Title = \"Select a week\",\n                        PlaceHolder = \"Pick up a week you like\",\n                        Name = \"txtWeek\",\n                        TextboxType = PSC.Survey.Shared.Enums.TextboxType.Week },\n                    new Textbox() {\n                        Title = \"Select a month\",\n                        PlaceHolder = \"Pick up a month you like\",\n                        Name = \"txtMonth\",\n                        TextboxType = PSC.Survey.Shared.Enums.TextboxType.Month },\n                    new Panel()\n                    {\n                        Title = \"This panel contains a Textbox\",\n                        PanelElements = new List\u003cIElement\u003e()\n                        {\n                            new Textbox() {\n                                Title = \"Normal textbox\",\n                                Description = \"This is a normal textbox in a Panel\",\n                                PlaceHolder = \"Enter your name\"\n                            }\n                        }\n                    }\n                }\n            };\n\n        StateHasChanged();\n    }\n\n    private void OnFormValuesChanges()\n    {\n    }\n\n    private async Task OnFormSubmitted(FormSubmittedEventArgs e)\n    {\n    }\n\n    private async Task OnFormSubmittedError()\n    {\n    }\n}\n```\n\nThe result is the following screenshot:\n\n![image](https://github.com/erossini/BlazorSurvey/assets/9497415/05077b14-f72f-4829-8517-cc171c374783)\n\nAnd this is the `json` that the `Survey` component generated when the user submits the form.\n\n```\n{\n  \"txt_1\": \"Enrico\",\n  \"txt_2\": \"Password\",\n  \"txt_3\": \"0123456789\",\n  \"txt_4\": \"info@puresourcecode.com\",\n  \"txt_5\": \"3\",\n  \"txt_6\": \"#5c2828\",\n  \"txt_7\": \"https://puresourcecode.com\",\n  \"txt_8\": \"077\",\n  \"txt_9\": \"2023-12-19\",\n  \"txt_10\": \"2023-12-19T16:19:00\",\n  \"txt_11\": \"2023-W51\",\n  \"txt_12\": \"2023-12\",\n  \"pnla346038ba8c34e0ab246bd0909e74984_txt_13.1\": \"Normal text\"\n}\n```\n\n## Events\n\nHere is the explanation of all the events a `Survey` component can raise and how to use them.\n\n### OnFormSubmitted\n\n\n\n### OnFormSubmittedError\n\n### OnFormValuesChanged\n\n## Properties\n\n### Name\n\nEach element has a property called `Name` that allows you to identify the element in the form. This property is required.\n\nApart from _panel_ and _repeater_ components, the element's name will be used to identify the element's value in the form.\nThe conventional name is formed by the prefix of the element and a progressive number.\n\nFor example, if you have in the form only one textbox, the conventional name will be `txt_1`, the value of the textbox will be stored in the form with the key `txt_1`.\n\nTo use custom a `Name`, in the `Survey` set to `False` the property `UseNamingComvention` of the survey component. For example:\n\n```html\n\u003cSurvey Form=\"form\"\n        ShowDebug=\"true\"\n        UseNamingComvention=\"false\"\n        OnFormValuesChanged=\"OnFormValuesChanges\"\n        OnFormSubmitted=\"OnFormSubmitted\"\n        OnFormSubmittedError=\"OnFormSubmittedError\" /\u003e\n```\n\nBy default the property `UseNamingComvention` is set to `True` and every component will be named based on the following convention\n\n| Component   | Convention |\n| ----------- | ---------- |\n| Checkbox    | chk        |\n| Comment     | cmt        |\n| Dropdown    | ddl        |\n| HTML        | htm        |\n| LikertSkill | lks        |\n| Matrix      | mtx        |\n| NPS         | nps        |\n| Panel       | pnl        |\n| Radiobutton | rdb        |\n| Rating      | rtn        |\n| Repeater    | rpt        |\n| Slider      | sld        |\n| Switch      | swc        |\n| TextBox     | txt        |\n\n### VisibleIf\n\nEach element has a property called `VisibleIf` that allows you to show or hide the element based on the value of another element.\n\nTo use this property, you must specify the `Name` of the element used to evaluate the condition and the `Value` that will be used to compare.\nAlso, you must set to `False` the property `UseNamingComvention` of the survey component.\n\n#### Refer to a TextBox\n\nWhen a field of the survey depends on a value on a `TextBox`, it is enough to write the condition with the name of the field and the value: the survey component will evaluate the condition and if the value of the `TextBox` is exactly the required value, the field will be displayed. For example:\n\n```csharp\nnew Textbox() {\n    Title = \"First name (insert 1 to test the filters)\",\n    PlaceHolder = \"Enter your name\",\n    Name = \"txt1\",\n    IsRequired = true\n},\nnew Textbox() {\n    Title = \"Middle name\",\n    PlaceHolder = \"Enter your middle name\",\n    Name = \"txt2\",\n    Description = \"Insert your middle name\",\n    VisibleIf = \"txt1 = '1'\" },\n```\n\nThe `TextBox` _txt2_ will be displayed if the value of the _txt1_ is equal to the string `1`. \n\n#### Refer to a Radiobutton\n\nWhen a field has to depend on a `Radiobutton`, the value to be specified is the index of the element. For example:\n\n```csharp\nnew Radiobutton() {\n    Title = \"This is a radiobutton\",\n    Description = \"Select one of the following options\",\n    Name = \"radio1\", Choices = new List\u003cobject\u003e() {\n        \"One\", \"Two\", \"Three\",\n        new RadiobuttonChoice() { Label = \"Four\" }\n    },\n    IsRequired = true\n},\nnew Radiobutton() { \n    Title = \"This is a radiobutton\", \n    Description = \"Select one of the following options\",\n    Name = \"radio12\", \n    Choices = new List\u003cobject\u003e() {\n        \"One\", \"Two\", \"Three\",\n        new RadiobuttonChoice() { Label = \"Four\" }\n    }, \n    VisibleIf = \"radio1 = 1\",\n    IsRequired = true },\n```\n\n### Show debug section\n\nThe component has a section for debugging the creation of the form and its result. To disable the debug set to `False` the property `ShowDebug`. By default, this property is set to `True` and 2 sections are displayed at the bottom of the form:\n\n- Json Form\n- Json Result\n\n#### Json Form\n\nIn this section, the `Survey` component displays the `json` to create the survey itself. This can be used to generate the form a run-time from a file or an API.\n\nAn example for the `json` is the following one:\n\n```\n{\n  \"elements\": [\n    {\n      \"type\": \"Checkbox\",\n      \"choices\": [\n        \"One\",\n        \"Two\",\n        \"Three\",\n        {\n          \"label\": \"Four\"\n        }\n      ],\n      \"orientation\": 1,\n      \"description\": \"Try to check more than one option\",\n      \"isRequired\": false,\n      \"isVisible\": true,\n      \"name\": \"chk_1\",\n      \"questionNumber\": \"1\",\n      \"title\": \"This is a checkbox\"\n    },\n    {\n      \"type\": \"Checkbox\",\n      \"choices\": [\n        \"One\",\n        \"Two\",\n        \"Three\",\n        {\n          \"label\": \"Four\"\n        }\n      ],\n      \"description\": \"Try to check more than one option\",\n      \"isRequired\": false,\n      \"isVisible\": true,\n      \"name\": \"chk_2\",\n      \"questionNumber\": \"2\",\n      \"title\": \"This is another checkbox\"\n    }\n  ]\n}\n```\n\nThe result is a survey like the following screenshot:\n\n![image](https://github.com/erossini/BlazorSurvey/assets/9497415/de93706c-3403-4afb-ad81-3436a8f0ec3a)\n\n#### Json Result\n\nIn debug and if the form is valid, the component shows the resulting `json`. Here an example:\n\n```\n{\n  \"chk_1\": [\n    {\n      \"value\": 1,\n      \"text\": \"One\"\n    }\n  ],\n  \"chk_2\": [\n    {\n      \"value\": 1,\n      \"text\": \"One\"\n    }\n  ]\n}\n```\n\n### Show question number\n\nIf `ShowQuestionNumber` is set to `True`, the `Survey` shows the number of the question in progression.\n\n![image](https://github.com/erossini/BlazorSurvey/assets/9497415/e099a636-f8ac-4883-8784-f724625a1f24)\n\nIf it is set to `False`, only the title and the description are displayed.\n\n![image](https://github.com/erossini/BlazorSurvey/assets/9497415/b787e655-ce0f-4246-a94c-cc26a3509f87)\n\nHere an example.\n\n```\n\u003cSurvey Form=\"form\" ShowQuestionNumber=\"false\" /\u003e\n```\n\n### Show separator\n\nThe property `ShowSeparator` allows you to show or hide the separator between the elements of the form. By default, the separator is not visible. To show it, set to `True` the property `ShowSeparator`. For example:\n\n```html\n\u003cSurvey Form=\"form\" ShowSeparator=\"true\" \n```\n\nThe separator is a `div` with the `class` set to `separator`. You can customize the separator using the `css` file.\n\n### SubmitButtonText\n\nThis is the text displayed on the button at the bottom of the survey to run the validation and generate the json. By default, the text of the button is `Submit`. To change the text, use the property `SubmitButtonText`. For example:\n\n```\n\u003cSurvey Form=\"form\" SubmitButtonText=\"Send\" /\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ferossini%2Fblazorsurvey","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ferossini%2Fblazorsurvey","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ferossini%2Fblazorsurvey/lists"}