---
title: "form · RUAL Documentation"
description: "Generates a basic form element using state UI. All fields within this form will be prefixed if a prefix is given."
canonical: https://docs.rual.nl/block-types/state%20ui/state_form
language: en
---

# form

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

Generates a basic form element using state UI. All fields within this form will be prefixed if a prefix is given.

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

- content required `state` Content to be shown within this form.

- 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

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

A typical wiring for [form](https://docs.rual.nl/block-types/state%2520ui/state_form): [div](https://docs.rual.nl/block-types/state%2520ui/state_div) feeds the `content` pin; [value](https://docs.rual.nl/block-types/value/value_default) feeds the `form_id` pin; the `state` out pin feeds [div](https://docs.rual.nl/block-types/state%2520ui/state_div).

![Studio canvas example for the form block: typical wiring for form.](https://docs.rual.nl/canvas-examples/state_form.png)

### 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): wired in both directions with this block. 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.

### Used in these guides

These documentation pages use or explain this block:

- [Build Your First CRUD App](https://docs.rual.nl/getting-started/first-crud-app)

### Version history

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

Last modified in [`v13.0.6`](https://docs.rual.nl/core-versions/130006).

- [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