> This page is for Flowkit CSS Framework, version v2 (default).
> 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 within a form, like 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\_field              | For basic text fields    |
| input\_field is-select    | For select fields        |
| input\_field is-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 - 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` on-`surface`

Surface options: `on-inverse`, `on-accent-primary`, `on-accent-secondary`, `on-accent-tertiary`

Example: checkbox\_toggle on-inverse