Component Catalog

CheckBox

Toggle input with label and boolean value.

A2UI → Nuxt UI Mapping

A2UI Property	Nuxt UI Result
`label`	`UCheckbox` label text
`value`	`UCheckbox` checked state

Example JSONL

{"version":"v0.10","createSurface":{"surfaceId":"cb_demo","catalogId":"standard"}}
{"version":"v0.10","updateComponents":{"surfaceId":"cb_demo","components":[
  {"id":"root","component":"Column","children":["terms","marketing"]},
  {"id":"terms","component":"CheckBox","label":"I agree to the terms and conditions","value":false},
  {"id":"marketing","component":"CheckBox","label":"Send me marketing emails","value":true}
]}}

Properties

Property	Type	Required	Default	Description
`label`	string	✅	—	Checkbox label text
`value`	boolean	✅	`false`	Whether the checkbox is checked

Rendering Details

Maps directly to Nuxt UI's UCheckbox component
Uses a ref for reactive checked state
Label renders inline next to the checkbox

Try It

Copy the JSONL above and paste it in the Playground Paste tab.

TextField

Text input — single-line or multi-line based on variant.

Slideover

A panel that slides in from the edge of the screen. Ideal for detail views, forms, and secondary content.