> This page is for Flowkit CSS Framework, version v1.
> For other versions, use one of these documentation indexes:
> - v2 (default): https://developers.webflow.com/flowkit/v2.0.0/llms.txt
> - v1: https://developers.webflow.com/flowkit/v1.0.0/llms.txt

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://developers.webflow.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://developers.webflow.com/_mcp/server.

# Forms

> Forms consist of modular components with consistent styling patterns.

## Class Naming

Forms consist of modular components with consistent styling patterns. Each element (labels, fields, toggles, and messages) is styled using reusable classes and combo modifiers to adapt to different contexts (inverse, accents, etc.).

**Form Components**

| Element Class        | Purpose                  |
| -------------------- | ------------------------ |
| Input                | For basic text fields    |
| Input Select         | For select fields        |
| Input Text Area      | For multiline input      |
| Checkbox             | Custom-styled checkbox   |
| Radio                | Custom-styled radio      |
| Button               | For submitting the form  |
| Form Success Message | Visible after submission |
| Form Error Message   | Shows validation errors  |

## Elements

**Input elements**

* Input Label
* Input Block - wrapper of the label and input field

**Checkbox elements:**

* Checkbox Toggle
* Checkbox Label

**Radio elements:**

* Radio Toggle
* Radio Label

## Surface Modifiers

To ensure proper contrast and accessibility, surface modifiers are applied as combo classes to individual form elements and following naming convention `Element` `Element` `Surface`

| Element                                   | Surface             |
| ----------------------------------------- | ------------------- |
| Input                                     | On Inverse          |
| Radio (Main class is  Radio Toggle)       | On Accent Primary   |
| Checkbox (Main class is  Checkbox Toggle) | On Accent Secondary |
|                                           | On Accent Tertiary  |

Example: Checkbox Toggle Checkbox On inverse