Skip to main content
Field groups a label, control, and error message into a single unit. Its main job is validation styling — when invalid is set, all text inside the Field turns red automatically, so the label, description, and error message all respond without wiring each one individually.

​
Basic Usage

At its simplest, Field is a vertical container that groups a Label with a control.

​
Validation

Set invalid to highlight a field as having an error. Since invalid accepts reactive expressions, you can tie it to state. Toggle the checkbox below — the label turns red and the error message appears automatically when the field becomes invalid. The data-invalid attribute on the Field cascades via CSS to all text descendants — the label turns red automatically. FieldError is hidden by default and only appears when its parent Field is invalid, so you don’t need to wrap it in a conditional.

​
Choice Cards

ChoiceCard is a Field subclass that renders as a bordered, clickable card — useful for settings pages where each row has a toggle. See the ChoiceCard docs for details.

​
API Reference

Field

​
invalid
bool | str
default:"False"
Whether the field is in an error state. Accepts a reactive expression like Rx("!email") to tie validation to state.
​
disabled
bool | str
default:"False"
Whether the field is dimmed and non-interactive. Accepts reactive expressions.
​
css_class
str | None
default:"None"
Additional Tailwind CSS classes.

FieldError

​
content
str
required
Error message text, always rendered in destructive (red) styling.

​
Protocol Reference

Field
{
  "type": "Field",
  "children?": "[Component]",
  "let?": "object",
  "invalid?": false,
  "disabled?": false,
  "cssClass?": "string"
}
FieldError
{
  "type": "FieldError",
  "content": "string (required)"
}
For the complete protocol schema, see Field.