---
title: "input · RUAL Documentation"
description: "Generates a basic input. The field will be used as state key, prefixed with the form."
canonical: https://docs.rual.nl/block-types/state%20ui/state_input
language: en
---

[Cluster](https://docs.rual.nl/cluster)

[Blocks](https://docs.rual.nl/block-types)

[Interfaces](https://docs.rual.nl/interfaces)

[Blueprints](https://docs.rual.nl/blueprints)

[Tutorials](https://docs.rual.nl/tutorials)

[Home automation](https://docs.rual.nl/home-automation)

[Examples](https://docs.rual.nl/examples)

[Reference](https://docs.rual.nl/reference)

[Architecture](https://docs.rual.nl/architecture)

[Troubleshooting](https://docs.rual.nl/troubleshooting)

Other

# input

This block is part of the [`state ui`](https://docs.rual.nl/block-types/state%20ui) group and was last modified in core [`v14.0.1`](https://docs.rual.nl/core-versions/140001).

## Field Selection Required

This block relies on a field that you select to perform its data actions. You must manually select the field you want to use in your flow using the field selector modal. To access the modal, click the white button on the block.

Generates a basic input. The field will be used as state key, prefixed with the `form`.

- form id required `value` A unique ID for the form this field is used in.

- type `value` The type of input to display, can be any regular type like `text` or `password`.

Default `text`

- class `uiclass` Assigns a CSS class to the element. • Hidden when unused

- style `uistyle` Applies inline CSS style to the element • Hidden when unused

- attributes `uiattributes` Adds custom attributes to the element. • Hidden when unused

- events `v14.0.1` `stateevents` Adds event support to the element • Hidden when unused

- state `state` Returns the element to the frontend state.

A typical wiring for [input](https://docs.rual.nl/block-types/state%2520ui/state_input): [value](https://docs.rual.nl/block-types/value/value_default) feeds the `form_id` pin; [placeholder](https://docs.rual.nl/block-types/attributes/uiattributes_placeholder) feeds the `uiattributes` pin; [custom](https://docs.rual.nl/block-types/ui%2520class/uiclass_custom) feeds the `uiclass` pin; the `state` out pin feeds [div](https://docs.rual.nl/block-types/state%2520ui/state_div).

[![Studio canvas example for the input block: typical wiring for input.](https://docs.rual.nl/canvas-examples/state_input.png)](https://docs.rual.nl/canvas-examples/state_input.png?v=3)

## Commonly used with

In production blueprints, this block is most often wired together with:

- [div](https://docs.rual.nl/block-types/state%20ui/state_div): this block feeds into it. Creates a dynamic and customizable div element on your web page.

- [value](https://docs.rual.nl/block-types/value/value_default): feeds into this block. Simply returns the provided value.

- [placeholder](https://docs.rual.nl/block-types/attributes/uiattributes_placeholder): feeds into this block. Set the placeholder of the element.

- [custom](https://docs.rual.nl/block-types/ui%20class/uiclass_custom): feeds into this block. Custom class input.

## Used in these guides

These documentation pages use or explain this block:

- [Building a Login Page](https://docs.rual.nl/tutorials/login-page)

## Version history

Introduced in [`v13.0.1`](https://docs.rual.nl/core-versions/130001).

Last modified in [`v14.0.1`](https://docs.rual.nl/core-versions/140001).

- [v13.0.6](https://docs.rual.nl/core-versions/130006): This block or one of its pins was updated in `v13.0.6`, click here to see the release notes.

- [Back to `state ui`](https://docs.rual.nl/block-types/state%20ui): Return to the main group to view all sub-groups

- [Back to `state elements`](https://docs.rual.nl/block-types/state%20ui?group=state%20elements): Return to the group to view all blocks within this group

Was this page helpful? [Tell us what to improve](https://docs.rual.nl/support) · RUAL Docs is an integral component of the [RUAL ecosystem](https://rual.nl)