[Forms] Fixed dead links (#72)

* Added textfield widget

* Added dropdown widget

* Added radio button

* Added pincode widget

* added slider and ratingbar widget

* added form validation

* Added form actions

* Added checkbox group widget

* Address review comments part 1

* Address review comments part 2

* Fixed all dead links

* Address review comments part 3

Author: pinkeshmars

docs/resources/control-flow/user-interactivity/forms/form-validation.md

@@ -55,10 +55,10 @@ Building and validating a *Form* includes the following steps:
 A form widget can only validate if there are any input fields. Here's an example of adding input fields for the signup form.
 
 1. First, add the **Form** widget itself from the **Form Elements**.
-2. Inside the form, add the [**Column**](#) widget from the **Layout Elements** tab.
-3. Now, add two [**TextFields**](form-widgets/textfield) (one for email and one for password).
-4. Add a [**Button**](#) widget and then add [Date/Time Picker](#) action to get the date of birth.
-5. Add one more [**Button**](#) to validate and submit the form.
+2. Inside the form, add the **Column** widget from the **Layout Elements** tab.
+3. Now, add two [**TextFields**](textfield) (one for email and one for password).
+4. Add a [**Button**](../../../../../resources/ui-building-blocks/widgets/built-in-widgets/button/) widget and then add [Date/Time Picker](#) action to get the date of birth.
+5. Add one more **Button** to validate and submit the form.
 
 Here's how it looks:
 

docs/resources/control-flow/user-interactivity/forms/form-widgets/dropdown.md

@@ -45,7 +45,7 @@ Let's see how to add a *DropDown* widget and build an example that shows the sel
 
 1. Add the **DropDown** widget, move to the **Properties Panel > Define Options >** click **Add Options** to add items.
 2. To display the default value, move to the **Initial Configuration** section and enter the value. Ensure it matches one of the options added in the previous step.
-3. The selected dropdown value can be accessed via *Widget State > DropDown*. To display it on the *Text* widget, add a [**Text**](#) widget, move to the properties panel, click on **Set from Variable** and choose the **Widget State > DropDown** (i.e., name of your dropdown).
+3. The selected dropdown value can be accessed via *Widget State > DropDown*. To display it on the *Text* widget, add a [**Text**](../../../../../resources/ui-building-blocks/widgets/built-in-widgets/text) widget, move to the properties panel, click on **Set from Variable** and choose the **Widget State > DropDown** (i.e., name of your dropdown).
 
 <div style={{
     position: 'relative',
@@ -116,7 +116,7 @@ To set an initial value:
 
 You might want to save the dropdown value as soon as the selection changes. This approach is useful when you want to ensure that the user's selection is immediately saved without having to wait for them to submit the form. By doing so, you can provide a better user experience and reduce the risk of data loss in case of any interruption.
 
-You can do so by adding an action such as [update app state](#), [update Firestore record](#) that [triggers when a selection changes](#) on this widget.
+You can do so by adding an action such as [update app state](../../../../../resources/data-representation/app-state#update-app-state-variable), [update Firestore record](../../../../../integrations/database/cloud-firestore/firestore-actions#update-document-action) that [triggers when a selection changes](../../../../../resources/ui-building-blocks/widgets/widget-commonalities#trigger-action-on-selection-change) on this widget.
 
 ![Saving *DropDown* value on selection change](../../imgs/saving-dp-value-on-selection-change.webp)
 
@@ -241,7 +241,7 @@ You might need to disable a dropdown when certain conditions are not yet met or
 To disable the dropdown:
 
 1. Select the **DropDown** widget, move to the **Properties Panel > DropDown Search >** enable **Disable Dropdown** option.
-2. Click on **Unset** and select the source that returns the boolean value (i.e., True or False), such as boolean variable, [Conditions](../../../functions/control-flow-actions/conditional-logic), [Code Expression](#).
+2. Click on **Unset** and select the source that returns the boolean value (i.e., True or False), such as boolean variable, [Conditions](../../../../../resources/functions/conditional-logic), [Code Expression](../../../../../resources/functions/utility#code-expressions).
 
 ![Disabling dropdown](../../imgs/disabling-dropdown.png)
 

docs/resources/control-flow/user-interactivity/forms/form-widgets/radiobutton.md

@@ -18,7 +18,7 @@ You can use the RadioButton widget for implementing a single selection such as g
 
 Here's an example of how you can use the RadioButton widget in your project:
 
-1. First, drag the [**Column**](#) widget from the **Layout Elements** tab (in the Widget Panel) or add it directly from the widget tree. Set its **Cross Axis Alignment** to **Stretch**.
+1. First, drag the **Column** widget from the **Layout Elements** tab (in the Widget Panel) or add it directly from the widget tree. Set its **Cross Axis Alignment** to **Stretch**.
 2. Now add the **RadioButton** widget from the **Form Elements** tab or add it directly from the widget tree.
 
 :::info
@@ -229,7 +229,7 @@ For simplification purposes, the selected option is shown in the Text widget. In
 
 To retrieve the user's selection:
 
-1. Add the [**Text**](#) widget to your page.
+1. Add the [**Text**](../../../../../resources/ui-building-blocks/widgets/built-in-widgets/text/) widget to your page.
 2. Move to property editor and click on the **Set from Variable** text. (This will open a new panel)
 3. Set the **Source** to **Widget State**.
 4. Set the **Available Options** to **RadioButton**.
@@ -342,7 +342,7 @@ Use the Lock button to change the Left, Top, Right and Bottom padding all at the
 
 ### Showing Options Horizontally
 
-By default, all options are shown as if they were inside the [Column](#) widget. Using *Axis* property, you can change this behavior to display all options horizontally as if they are inside the [Row](#) widget.
+By default, all options are shown as if they were inside the Column widget. Using *Axis* property, you can change this behavior to display all options horizontally as if they are inside the Row widget.
 
 To display all options horizontally:
 

docs/resources/control-flow/user-interactivity/forms/form-widgets/text-field.md

@@ -134,7 +134,7 @@ To set the label, move to the **Properties Panel > Label Properties >** enter th
 
 ![adding-label](../../imgs/adding-label.avif)
 
-When the TextField is set to [Multiline](#making-textfield-multiline-auto-expand) the label appears in the center. To get it closer to the hint text, switch on the **Align Label With Hint** property.
+When the TextField is set to [Multiline](#adding-multilineauto-expand-support) the label appears in the center. To get it closer to the hint text, switch on the **Align Label With Hint** property.
 
 <div style={{
     position: 'relative',
@@ -307,7 +307,7 @@ To reduce TextField's height to as minimum as possible, select the TextField wid
 
 ### Changing error message styling
 
-You can also change the text styling for the error message. To do so, head over to **Properties Panel > Input Decoration Properties >** enable **Custom Error Style** and [change the text styling](#).
+You can also change the text styling for the error message. To do so, head over to **Properties Panel > Input Decoration Properties >** enable **Custom Error Style** and [change the text styling](../../../../../resources/ui-building-blocks/widgets/built-in-widgets/text#common-text-properties).
 
 ![changing-error-message-styling](../../imgs/changing-error-message-styling.avif)
 
@@ -317,7 +317,7 @@ You might want to add an icon inside the TextField, either at the start or end.
 
 To add a leading or trailing icon, move to the **Properties Panel >** find the **Leading** and **Trailing Icon** property > Click on the **None** button **>** search and select the icon.
 
-You can also [customize the icon's size and color](#).
+You can also [customize the icon's size and color](../../../../../resources/ui-building-blocks/widgets/built-in-widgets/icons#common-icon-properties).
 
 ![adding-icon](../../imgs/adding-icon.avif)
 
@@ -651,10 +651,6 @@ You might want to restrict the type of characters that can be entered into a Tex
 
 To filter the user input, select the TextField widget, move to the **Properties Panel** **> Additional Properties >** set the **Filter** dropdown to the one you need.
 
-:::info
-To check user input for certain criteria or requirements (e.g., email), see *step 3* on how to [add validation](#).
-:::
-
 <div style={{
     position: 'relative',
     paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
@@ -836,8 +832,8 @@ Let's see an example of controlling the visibility of a Text widget based on the
 
 To do so:
 
-1. On a Text widget, add a [Conditional Visibility](#) based on the TextField's Focus state. You can access via **Set from Variable** menu **> Widget Focus State > [TextField name]**.
-2. Now, on a TextField widget, under the [On Focus Change](#trigger-action--listen-callback) callback, simply add an action to refresh the page by adding the [update app state](#) variable.
+1. On a Text widget, add a [Conditional Visibility](../../../../../resources/ui-building-blocks/widgets/widget-commonalities#conditional) based on the TextField's Focus state. You can access via **Set from Variable** menu **> Widget Focus State > [TextField name]**.
+2. Now, on a TextField widget, under the [On Focus Change](#trigger-action--listen-callback) callback, simply add an action to refresh the page by adding the update app state variable.
 
 <div style={{
     position: 'relative',

docs/resources/control-flow/user-interactivity/forms/forms.md

@@ -12,5 +12,5 @@ sidebar_position: 0
 Forms are a fundamental part of many applications, serving as the primary method for users to input and submit data. Whether you're building a simple contact form or a complex multi-step survey, FlutterFlow provides a comprehensive set of tools to create, validate, and manage forms effectively.
 
 :::tip
-In this section, you'll learn how to add form widgets such as [**TextField**](forms/textfield), [**Dropdown**](forms/dropdown), [**RadioButton**](forms/radiobutton), [**CheckboxGroup**](forms/checkboxgroup), add [**set**](forms/set-form-field)/[**reset**](forms/reset-form-field) actions on these widgets and add [**Validations**](forms/form-validation) to forms.
+In this section, you'll learn how to add form widgets such as [**TextField**](forms/textfield), [**Dropdown**](forms/dropdown), [**RadioButton**](forms/radiobutton), [**CheckboxGroup**](forms/checkboxgroup) and add [**Validations**](forms/form-validation) and [**set**](forms/set-form-field)/[**reset**](forms/reset-form-field) actions on these widgets.
 :::

docs/resources/ui-building-blocks/components/built-in-components/pincode.md

@@ -174,7 +174,7 @@ Here is an example of displaying a snackbar message when a user enters a non-num
 
 ## Validation
 
-You can validate the Pincode widget to see if a user has entered any value. To do so, wrap the Pincode widget inside the [**Form**](#) widget, In the *Form* widget, enter the error message you want to display and then trigger the [**Validate Form**](#) action. This will display an error message when a user tries to submit the form without a pincode value.
+You can validate the Pincode widget to see if a user has entered any value. To do so, wrap the Pincode widget inside the [**Form**](../../../../resources/forms/form-validation#adding-form-widget) widget, In the *Form* widget, enter the error message you want to display and then trigger the [**Validate Form**](../../../../resources/forms/form-validation#3-adding-validate-action) action. This will display an error message when a user tries to submit the form without a pincode value.
 
 
 <div style={{

docs/resources/ui-building-blocks/components/built-in-components/slider.md

@@ -115,7 +115,7 @@ You can customize the appearance and behavior of the widget using the various pr
 
 ### Setting platform type
 
-You can set the platform type to *Adaptive or Android* for **this widget. Selecting the Adaptive type will display the widget in its native style. That means the widget will show iOS-style rendering when running on iOS devices and Android-style rendering when running on Android devices.
+You can set the platform type to *Adaptive or Android* for this widget. Selecting the Adaptive type will display the widget in its native style. That means the widget will show iOS-style rendering when running on iOS devices and Android-style rendering when running on Android devices.
 
 To set the platform type:
 
@@ -233,8 +233,8 @@ To change the slider colors:
 
 1. Select the **Slider** widget from the widget tree or the canvas area.
 2. Move to the properties panel and scroll down to the **Slider Properties** section.
-3. To change the active color, find the **Active Color** property, click on the box next to the already selected color, select the color, and then click **Use Color** or click on an already selected color ****and enter a Hex Code directly. You can also choose the color by clicking the **Palette** and **Simple** button.
-4. To change the inactive color, find the **Inactive Color** property, click on the box next to the already selected color, select the color, and then click **Use Color** or click on an already selected color ****and enter a Hex Code directly. You can also choose the color by clicking the **Palette** and **Simple** button.
+3. To change the active color, find the **Active Color** property, click on the box next to the already selected color, select the color, and then click **Use Color** or click on an already selected color and enter a Hex Code directly. You can also choose the color by clicking the **Palette** and **Simple** button.
+4. To change the inactive color, find the **Inactive Color** property, click on the box next to the already selected color, select the color, and then click **Use Color** or click on an already selected color and enter a Hex Code directly. You can also choose the color by clicking the **Palette** and **Simple** button.
 
 <div style={{
     position: 'relative',