# Input forms

Shimoku provides multiple input fields and these can be linked to different logics to produce real-time outcomes. The Input form allows a rich variety of input components. You can use a rich variety of inputs and combine them passing it to `s.plt.input_form()`.

An example on how to use the function:

```python
input_data: Dict = {
  'fields': [
    {
      'title': 'Personal information',
      'fields': [
        {
          'mapping': 'name',
          'fieldName': 'name',
          'inputType': 'text',
        },
        {
          'mapping': 'surname',
          'fieldName': 'surname',
          'inputType': 'text',
        },
        {
          'mapping': 'age',
          'fieldName': 'age',
          'inputType': 'number',
        },
        {
          'mapping': 'tel',
          'fieldName': 'phone',
          'inputType': 'tel',
        },
        {
          'mapping': 'gender',
          'fieldName': 'Gender',
          'inputType': 'radio',
          'options': ['Male', 'Female', 'No-binary', 'Undefined'],
        },
        {
          'mapping': 'email',
          'fieldName': 'email',
          'inputType': 'email',
        }
      ]
    },
    {
      'title': 'Other data',
      'fields': [
        {
          'mapping': 'skills',
          'fieldName': 'Skills',
          'options': ['Backend', 'Frontend', 'UX/UI', 'Api Builder', 'DevOps'],
          'inputType': 'checkbox',
        },
        {
          'mapping': 'birthDay',
          'fieldName': 'Birthday',
          'inputType': 'date',
        },
        {
          'mapping': 'onCompany',
          'fieldName': 'Time on Shimoku',
          'inputType': 'dateRange',
        },
        {
          'mapping': 'hobbies',
          'fieldName': 'Hobbies',
          'inputType': 'select',
          'options': ['Make Strong Api', 'Sailing to Canarias', 'Send Abracitos'],
        },
        {
          'mapping': 'textField2',
          'fieldName': 'Test Text',
          'inputType': 'text',
        }
      ]
    }
  ]
}

s.plt.input_form(
    order=0, options=input_data
)
```

<figure><img src="/files/XlzjIMrVW9EDZ0bpsLKy" alt=""><figcaption><p>Resulting forms</p></figcaption></figure>

As shown in the previous image the default size of each form component is 12 columns. To set a custom value for each one the `sizeColumns` must be specified:

```python
input_data: Dict = {
  'fields': [
    {
      'title': 'Personal information',
      'fields': [
        {
          'mapping': 'name',
          'fieldName': 'name',
          'inputType': 'text',
          'sizeColumns': 4,
        },
        {
          'mapping': 'surname',
          'fieldName': 'surname',
          'inputType': 'text',
          'sizeColumns': 4,
        },
        {
          'mapping': 'age',
          'fieldName': 'age',
          'inputType': 'number',
          'sizeColumns': 4,
        },
        {
          'mapping': 'tel',
          'fieldName': 'phone',
          'inputType': 'tel',
          'sizeColumns': 4,
        },
        {
          'mapping': 'gender',
          'fieldName': 'Gender',
          'inputType': 'radio',
          'options': ['Male', 'Female', 'No-binary', 'Undefined'],
          'sizeColumns': 8,
        },
        {
          'mapping': 'email',
          'fieldName': 'email',
          'inputType': 'email',
          'sizeColumns': 12,
        }
      ]
    },
    {
      'title': 'Other data',
      'fields': [
        {
          'mapping': 'skills',
          'fieldName': 'Skills',
          'options': ['Backend', 'Frontend', 'UX/UI', 'Api Builder', 'DevOps'],
          'inputType': 'checkbox',
          'sizeColumns': 6,
        },
        {
          'mapping': 'birthDay',
          'fieldName': 'Birthday',
          'inputType': 'date',
          'sizeColumns': 6,
        },
        {
          'mapping': 'onCompany',
          'fieldName': 'Time on Shimoku',
          'inputType': 'dateRange',
          'sizeColumns': 4,
        },
        {
          'mapping': 'hobbies',
          'fieldName': 'Hobbies',
          'inputType': 'select',
          'options': ['Make Strong Api', 'Sailing to Canarias', 'Send Abracitos'],
          'sizeColumns': 8,
        },
        {
          'mapping': 'textField2',
          'fieldName': 'Test Text',
          'inputType': 'text',
          'sizeColumns': 12,
        }
      ]
    }
  ]
}

s.plt.input_form(
    order=0, options=input_data
)
```

<figure><img src="/files/2C691UPGlYB2tSaS0b0A" alt=""><figcaption><p>Forms specifying the 'sizeColumns' field for each component</p></figcaption></figure>

### Retrieve input forms data

```python
s.set_menu_path('input form')

input_data: List[Dict] = s.plt.get_input_forms()
```

<figure><img src="/files/8neS5hORRROuW4eSJSIo" alt=""><figcaption></figcaption></figure>


---

# 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.shimoku.com/dev/elements/charts/input-forms.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.