# Widgets

Widgets answer types are small user interface modules that runs client side on the browser and that can be build using javascript, css and html. 

Using widget you can fully extend ngSurvey with your own functionalities as you can develop any kind of functionality that you would be normally be able to do using plain javascript, css and html. 

Widgets can be divided into 2 categories

* **Selection widgets** are providing a functionality related to the [selection](/form-management/form-designer/answers/answer-types/selection-answers.md) of an answer like for example a radio button and when used in a question will set its current selected answer value. In the [example](/form-management/form-designer/answers/answer-types/creating-new-type/widget/widget-samples.md) below we developed a small widget that replaces the out of the box radio button selection answer type with a more fancy alternative. 

![](/files/-MC1A_libUdIgAqUGvM2)

* **Value widgets** are providing a value that will be saved along respondents answers. In the [example](/form-management/form-designer/answers/answer-types/creating-new-type/widget/widget-samples.md) below we integrate a third party javascript calendar component that already existed on the market.

![](/files/-MC1C5IjQe4hvdvAneow)

{% hint style="info" %}
While developing widget you may use the *propertysDef* property of your widget to define custom properties that you can use in your code and let the survey manager set their values dynamically from the [answer properties](/form-management/form-designer/answers/answer-properties.md) page.
{% endhint %}

## 🔅 Widget development

Widgets can be developed and tested using the answer type editor user interface. Using the **Widget preview / test** feature we can see in real-time how our new widget would look like if it was used within a survey.

![](/files/-MC1EBTv8zgtnfelsMvx)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.ngsurvey.com/form-management/form-designer/answers/answer-types/creating-new-type/widget.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.