> For the complete documentation index, see [llms.txt](https://docs.ninox.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.ninox.com/builder-hub/visualize-and-organize-your-data/create-and-customize-pages/input-component.md).

# Input component

Enter and use values on a page for further processing.

The Input component lets you collect data or guide users from a single page, without opening separate tables. Values are stored temporarily on the device or in the browser. You can pass them to relevant parts of your app or process them directly with automations.

## Add an Input component

{% stepper %}
{% step %}
**Open the Add tab**

In the **Settings** panel, open **Add**.
{% endstep %}

{% step %}
**Add the component**

Under **Basic components** drag **Input component** onto the page.
{% endstep %}

{% step %}
**Label the component**

Enter a **Label**. Ninox autogenerates the **Internal name**.\
Change the internal name carefully if needed. Logic that uses it may not update automatically.
{% endstep %}

{% step %}
**Define the input data type**

Choose the required **Data type**. Ninox provides the same data types as for data fields in tables.
{% endstep %}

{% step %}
**Select where to store the value**

Under **Remember value**, choose one option:

* **While the page is open** clears the value when you leave the page.
* **In the page's URL** saves the value in the page URL until you leave the page.
* **On this device** keeps the value on the current device, until you log out of Ninox.
  {% endstep %}

{% step %}
**Add the component**

Click **Create** to place the component on your page.
{% endstep %}
{% endstepper %}

## Input component settings

Under **General**, options are dependent on the chosen field type.

Choose an input data type, then configure the applicable **General** settings:

* Standard fields: [Text](/builder-hub/design-your-app/add-and-edit-data-fields-in-your-tables/all-data-fields/text.md), [Multi-line text](/builder-hub/design-your-app/add-and-edit-data-fields-in-your-tables/all-data-fields/multi-line-text.md), [Number](/builder-hub/design-your-app/add-and-edit-data-fields-in-your-tables/all-data-fields/number.md), [Yes/no](/builder-hub/design-your-app/add-and-edit-data-fields-in-your-tables/all-data-fields/yes-no-boolean.md), [Single-choice](/builder-hub/design-your-app/add-and-edit-data-fields-in-your-tables/all-data-fields/single-choice-choice.md), [Multi-choice](/builder-hub/design-your-app/add-and-edit-data-fields-in-your-tables/all-data-fields/multi-choice-multi.md), [Dynamic choice](/builder-hub/design-your-app/add-and-edit-data-fields-in-your-tables/all-data-fields/dynamic-choice-dchoice.md), [Dynamic multi-choice](/builder-hub/design-your-app/add-and-edit-data-fields-in-your-tables/all-data-fields/dynamic-multi-choice-dmulti.md), [File](/builder-hub/design-your-app/add-and-edit-data-fields-in-your-tables/all-data-fields/file.md), and [Logic](/builder-hub/design-your-app/add-and-edit-data-fields-in-your-tables/all-data-fields/logic-function.md)
* Contact fields: [Email](/builder-hub/design-your-app/add-and-edit-data-fields-in-your-tables/all-data-fields/email.md), [Phone](/builder-hub/design-your-app/add-and-edit-data-fields-in-your-tables/all-data-fields/phone.md), [URL](/builder-hub/design-your-app/add-and-edit-data-fields-in-your-tables/all-data-fields/url.md), and [Location](/builder-hub/design-your-app/add-and-edit-data-fields-in-your-tables/all-data-fields/location.md)
* Date and time fields: [Date](/builder-hub/design-your-app/add-and-edit-data-fields-in-your-tables/all-data-fields/date.md), [Date and time](/builder-hub/design-your-app/add-and-edit-data-fields-in-your-tables/all-data-fields/date-and-time-timestamp.md), [Appointment](/builder-hub/design-your-app/add-and-edit-data-fields-in-your-tables/all-data-fields/appointment.md), [Time](/builder-hub/design-your-app/add-and-edit-data-fields-in-your-tables/all-data-fields/time.md), and [Duration](/builder-hub/design-your-app/add-and-edit-data-fields-in-your-tables/all-data-fields/duration-timeinterval.md)
* Special fields: [Rich text](/builder-hub/design-your-app/add-and-edit-data-fields-in-your-tables/all-data-fields/rich-text-html.md), [Color](/builder-hub/design-your-app/add-and-edit-data-fields-in-your-tables/all-data-fields/color.md), [Icon](/builder-hub/design-your-app/add-and-edit-data-fields-in-your-tables/all-data-fields/icon.md), [Signature](/builder-hub/design-your-app/add-and-edit-data-fields-in-your-tables/all-data-fields/signature.md), and [User](/builder-hub/design-your-app/add-and-edit-data-fields-in-your-tables/all-data-fields/user.md)
* Relationship fields: [Link one record](/builder-hub/design-your-app/add-and-edit-data-fields-in-your-tables/all-data-fields/link-one-record-reference.md) and [Link many records](/builder-hub/design-your-app/add-and-edit-data-fields-in-your-tables/all-data-fields/link-many-records-reverse.md)

Under **Display**, control how the input appears on the page:

* Set the **Label position**.
* Add a **Placeholder** that appears for applicable data types when the input component is empty.
* Add a **Left icon** or **Right icon** for applicable data types.
* Add a **Tooltip** or **Description** to guide users.

For example, you can display a Single-choice input as tabs. Use the label and **Tooltip** to explain what each option controls.

Under **Behavior**, configure how users interact with the input:

* Change **Remember value** after creating the component.
* Enable **Disabled** to prevent editing. Set up a logic to allow only specific users to enter values.
* Add **On change** logic to react when the value changes.
* Enable **Required** to require a value before users can submit the form.

Under **Visibility**, choose whether the component is shown on the page:

* **Visible**: shows the component on the page.
* **Hidden**: hides the component on the page.
* **Conditional**: defines a **Visibility condition** that controls when the component is shown or hidden.

  Use **Conditional** when the component should appear only in specific cases.

  Build the condition based on user roles, **Tables**, or **Fields**.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

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

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.ninox.com/builder-hub/visualize-and-organize-your-data/create-and-customize-pages/input-component.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.