Skip to main content
Field wraps a form control in a bordered card with a title and optional description. The entire card is clickable — clicking anywhere activates the wrapped control. When the control is checked, the card highlights with a subtle border and background tint.

​
Basic Usage

Wrap any toggle-like control (Switch, Checkbox) inside a Field to get the choice card layout.

​
With Checkbox

Field works with any toggle control.

​
Disabled

A disabled Field dims the card and prevents interaction.

​
API Reference

Field Parameters

​
title
str
required
Card heading text.
​
description
str | None
default:"None"
Secondary text below the title.
​
disabled
bool
default:"False"
Whether the field is dimmed and non-interactive.
​
css_class
str | None
default:"None"
Additional Tailwind CSS classes.

​
Protocol Reference

Field
{
  "type": "Field",
  "children?": "[Component]",
  "title": "string (required)",
  "description?": "string",
  "disabled?": false,
  "cssClass?": "string"
}
For the complete protocol schema, see Field.