# Dynamic Radio and Select Box Values The Radio / Select Box component presents a set of values for end-users to select from within a form. Typically, these components are configured with static values, requiring manual adjustment of the component settings whenever new options need to be added or modified. This documentation will illustrate the process of setting up the Select Box and Radio components to retrieve dynamic values from an external source, specifically a Form.io Resource. This functionality enables the Form Builder to effortlessly update numerous Radio or Select Box components across various forms embedded within your application by simply modifying the Data Source connected to these components ## Use Case This example will utilize two different forms, an HR Employee form and a Job application form. The HR employee form contains a Radio component with different contact value options. Similarly, the Job application form contains a Select Box with the same type of values. Keeping the Use Case in mind, imagine that these components are not limited to just two forms but are utilized in a multitude of forms throughout your application. With this static value configuration, the form builder must manually update the values for each component incorporated into the forms. Manually updating these values also presents the potential for the Form Builder to make a mistake while updating the values. This could cause issues for workflows such as server-side logic or specific database configurations that rely on specific IDs or Value names from the components. Utilizing a Dynamic Data Source alleviates these potential issues and ensures a quick update while maintaining component continuity across all of the forms. {% embed url="" %} ## Create a Resource (Value Database) Create a Resource to store the data values from which the Radio and Select Box components can retrieve their information. 1. Within your Project, create a new **Resource**. \ For this example, we will be using a Contact Method Resource to provide values for the Radio and Select Box components within the example forms. 2. Add a **TextField** to the Resource that will support the values

3. Click the **Use** tab to make **submissions** against the Resource establishing the Contact Method values. These values will be changed later in the workflow. \ E.G. Home Phone | Email | Fax

4. Within the **Resource**, click the more settings tab (**...**) and select the **Form API** button 5. Copy the **Submission API** endpoint for the Resource

6. Click the **Access** tab for the Resource 7. Set the **Everyone** Role to the **Read All** permission\ This will ensure that the Resource values can be retrieved when the Form is interacted with externally.

## Configuring Radio/Select Box Data Source Two forms will be created that will contain the Radio and Select Box components. These will be configured to support Dynamic Values from the Resource created in the previous step. 1. Create a **form** called **Job Application** 2. Add a **Select Box** component called Contact Method * Within the component settings, click the **Data** tab * Click the **Data Source Type** and set it to **URL** * Add the **Resource Submission Endpoint** to the URL field\ `https://myproject.form.io/contactmethod/submission` * Modify the **Item Template** and ensure the API property name of the Contact Method field is set. It should look something like this:\ `{{ item.data.contactMethod }}`

3. Create another **Form** called **Employee Information** 4. Add a **Radio** called **Contact Method** and follow the same workflow * Within the component settings, click the **Data** tab * Click the **Data Source Type** and set it to **URL** * Add the **Resource Submission Endpoint** to the URL field\ `https://myproject.form.io/contactmethod/submission` * Modify the **Item Template** and ensure the API property name of the Contact Method field is set. It should look something like this:\ `{{ item.data.contactMethod }}` 5. View the Forms within your application to

## Updating Resource Values Back to the original use case, let's pretend instead of 2 forms, we have 50 forms with these components. As the Form Builder, we are tasked with removing a Value, modifying a value, and adding a value to all Contact Method fields. Instead of modifying these values manually, we can update the values directly within the Data Source, causing all connected instances of components to dynamically update. 1. Navigate back to the **Contact Method** Resource 2. Click the **Data** tab and make the following modifications to the submissions * **Update** the Home Phone value to Cell Phone * **Delete** the Fax submission * **Create** a new value called Text Message by using the Resource

3. Navigate back to your application and refresh your form to pull in the changes. Job Application Form Dynamically updates dynamically

Employee Information Form dynamically updates dynamically

## Alternative Data Sources Alternative API JSON endpoints can also be utilized as the Data Source. In this example, a second Select Box component is added Job Application form that will retrieve data from an API endpoint containing a JSON data object of US States. 1. Add a **Select Box** component called Contact Method * Within the component settings, click the **Data** tab * Click the **Data Source Type** and set it to **URL** * Add the **API Endpoint** containing the JSON object of US States to the URL field. Copy the link location of [states.json](https://3305536326-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MPHoF2HwOA0s5HV_AIB%2Fuploads%2FwmAq91bwK86ah0TVWHFb%2Fstates.json?alt=media\&token=bcf83383-f5e4-48b4-b977-4a0ad22b044e) and paste it into the field. * Modify the **Item Template** and ensure the name property of the JSON object is included\ `{{ item.name }}`

* Alternatively, you can set the Item Template to pull in the State abbreviation by configuring the Item Template to include the abbreviation property of the State instead of the name \ `{{ item.abbreviation }}` 2. Navigate back to your application and refresh your form to pull in the changes.

--- # 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://help.form.io/faq/tutorials-and-workflows/dynamic-radio-and-select-box-values.md?ask= ``` 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.