Update readme.md

readme.md

@@ -11,9 +11,55 @@ npm install -g ha-editor-formbuilder
 
 Once the installation is complete, you can use the tool to create and customize card forms.
 
+# Form field types
+
+In the provided code example, several form controls are used, each with its corresponding `FormControlType`. These control types determine the input fields and their behavior in the generated form. Here's an explanation of the different `FormControlType` values used in the example:
+
+1. **Dropdown (FormControlType.Dropdown)**:
+   - Description: Dropdown or select list.
+   - Example Usage: Allows users to select an option from a list of predefined choices.
+   - Example Configuration:
+     ```typescript
+     { label: "Card Type (Required)", configValue: "card_type", type: FormControlType.Dropdown, items: this.getDropdownOptionsFromEnum(FormulaOneCardType) }
+     ```
+
+2. **Textbox (FormControlType.Textbox)**:
+   - Description: Single-line text input field.
+   - Example Usage: Allows users to enter a single line of text, such as a title or API key.
+   - Example Configuration:
+     ```typescript
+     { label: "Title", configValue: "title", type: FormControlType.Textbox }
+     ```
+
+3. **Switch (FormControlType.Switch)**:
+   - Description: A toggle switch or checkbox.
+   - Example Usage: Provides an on/off or true/false option.
+   - Example Configuration:
+     ```typescript
+     { label: "Use F1 font", configValue: "f1_font", type: FormControlType.Switch }
+     ```
+
+4. **Checkboxes (FormControlType.Checkboxes)**:
+   - Description: Multiple checkboxes for selecting one or more options.
+   - Example Usage: Allows users to choose from a list of options by checking one or more checkboxes.
+   - Example Configuration:
+     ```typescript
+     { configValue: "countdown_type", type: FormControlType.Checkboxes, items: this.getDropdownOptionsFromEnum(CountdownType) }
+     ```
+
+5. **Filler (FormControlType.Filler)**:
+   - Description: Empty space or filler.
+   - Example Usage: Typically used for adding spacing or visual separation between form elements.
+   - Example Configuration:
+     ```typescript
+     { type: FormControlType.Filler }
+     ```
+
+These `FormControlType` values help define the type of input controls and their behavior in the form generated by the `EditorForm`. They provide a user-friendly way to specify the desired input fields and their properties when designing the custom editor form for a Home Assistant card. Depending on the use case, you can choose the appropriate control type to collect the necessary configuration data from users.
+
 ## Example usage
 
-```
+```typescript
 @customElement(CARD_EDITOR_NAME)
 export class FormulaOneCardEditor extends EditorForm {