[{"data":1,"prerenderedAt":1794},["ShallowReactive",2],{"locale-alternates":3,"docs-nav-en":124,"api-none":352,"page-en-\u002Fcomponents\u002Fbb-form":353,"pt-showcase-BbForm":1769},{"\u002Fit\u002Fcomponenti\u002Fbb-accordion":4,"\u002Fen\u002Fcomponents\u002Fbb-accordion":5,"\u002Fit\u002Fcomponenti\u002Fbb-alert":6,"\u002Fen\u002Fcomponents\u002Fbb-alert":7,"\u002Fit\u002Fcomponenti\u002Fbb-asterisk":8,"\u002Fen\u002Fcomponents\u002Fbb-asterisk":9,"\u002Fit\u002Fcomponenti\u002Fbb-avatar":10,"\u002Fen\u002Fcomponents\u002Fbb-avatar":11,"\u002Fit\u002Fcomponenti\u002Fbb-badge":12,"\u002Fen\u002Fcomponents\u002Fbb-badge":13,"\u002Fit\u002Fcomponenti\u002Fbb-base-button":14,"\u002Fen\u002Fcomponents\u002Fbb-base-button":15,"\u002Fit\u002Fcomponenti\u002Fbb-breadcrumbs":16,"\u002Fen\u002Fcomponents\u002Fbb-breadcrumbs":17,"\u002Fit\u002Fcomponenti\u002Fbb-button":18,"\u002Fen\u002Fcomponents\u002Fbb-button":19,"\u002Fit\u002Fcomponenti\u002Fbb-checkbox":20,"\u002Fen\u002Fcomponents\u002Fbb-checkbox":21,"\u002Fit\u002Fcomponenti\u002Fbb-checkbox-group":22,"\u002Fen\u002Fcomponents\u002Fbb-checkbox-group":23,"\u002Fit\u002Fcomponenti\u002Fbb-collapsible":24,"\u002Fen\u002Fcomponents\u002Fbb-collapsible":25,"\u002Fit\u002Fcomponenti\u002Fbb-color-input":26,"\u002Fen\u002Fcomponents\u002Fbb-color-input":27,"\u002Fit\u002Fcomponenti\u002Fbb-color-palette":28,"\u002Fen\u002Fcomponents\u002Fbb-color-palette":29,"\u002Fit\u002Fcomponenti\u002Fbb-confirm":30,"\u002Fen\u002Fcomponents\u002Fbb-confirm":31,"\u002Fit\u002Fcomponenti\u002Fbb-date-picker":32,"\u002Fen\u002Fcomponents\u002Fbb-date-picker":33,"\u002Fit\u002Fcomponenti\u002Fbb-date-picker-input":34,"\u002Fen\u002Fcomponents\u002Fbb-date-picker-input":35,"\u002Fit\u002Fcomponenti\u002Fbb-dialog":36,"\u002Fen\u002Fcomponents\u002Fbb-dialog":37,"\u002Fit\u002Fcomponenti\u002Fbb-dropdown":38,"\u002Fen\u002Fcomponents\u002Fbb-dropdown":39,"\u002Fit\u002Fcomponenti\u002Fbb-dropdown-button":40,"\u002Fen\u002Fcomponents\u002Fbb-dropdown-button":41,"\u002Fit\u002Fcomponenti\u002Fbb-dropzone":42,"\u002Fen\u002Fcomponents\u002Fbb-dropzone":43,"\u002Fit\u002Fcomponenti\u002Fbb-form":44,"\u002Fen\u002Fcomponents\u002Fbb-form":45,"\u002Fit\u002Fcomponenti\u002Fbb-icon":46,"\u002Fen\u002Fcomponents\u002Fbb-icon":47,"\u002Fit\u002Fcomponenti\u002Fbb-indicator":48,"\u002Fen\u002Fcomponents\u002Fbb-indicator":49,"\u002Fit\u002Fcomponenti\u002Fbb-number-input":50,"\u002Fen\u002Fcomponents\u002Fbb-number-input":51,"\u002Fit\u002Fcomponenti\u002Fbb-off-canvas":52,"\u002Fen\u002Fcomponents\u002Fbb-off-canvas":53,"\u002Fit\u002Fcomponenti\u002Fbb-pagination":54,"\u002Fen\u002Fcomponents\u002Fbb-pagination":55,"\u002Fit\u002Fcomponenti\u002Fbb-popover":56,"\u002Fen\u002Fcomponents\u002Fbb-popover":57,"\u002Fit\u002Fcomponenti\u002Fbb-progress":58,"\u002Fen\u002Fcomponents\u002Fbb-progress":59,"\u002Fit\u002Fcomponenti\u002Fbb-radio":60,"\u002Fen\u002Fcomponents\u002Fbb-radio":61,"\u002Fit\u002Fcomponenti\u002Fbb-radio-group":62,"\u002Fen\u002Fcomponents\u002Fbb-radio-group":63,"\u002Fit\u002Fcomponenti\u002Fbb-rating":64,"\u002Fen\u002Fcomponents\u002Fbb-rating":65,"\u002Fit\u002Fcomponenti\u002Fbb-select":66,"\u002Fen\u002Fcomponents\u002Fbb-select":67,"\u002Fit\u002Fcomponenti\u002Fbb-select-popover":68,"\u002Fen\u002Fcomponents\u002Fbb-select-popover":69,"\u002Fit\u002Fcomponenti\u002Fbb-slider":70,"\u002Fen\u002Fcomponents\u002Fbb-slider":71,"\u002Fit\u002Fcomponenti\u002Fbb-smooth-height":72,"\u002Fen\u002Fcomponents\u002Fbb-smooth-height":73,"\u002Fit\u002Fcomponenti\u002Fbb-spinner":74,"\u002Fen\u002Fcomponents\u002Fbb-spinner":75,"\u002Fit\u002Fcomponenti\u002Fbb-switch":76,"\u002Fen\u002Fcomponents\u002Fbb-switch":77,"\u002Fit\u002Fcomponenti\u002Fbb-switch-group":78,"\u002Fen\u002Fcomponents\u002Fbb-switch-group":79,"\u002Fit\u002Fcomponenti\u002Fbb-table":80,"\u002Fen\u002Fcomponents\u002Fbb-table":81,"\u002Fit\u002Fcomponenti\u002Fbb-tabs":82,"\u002Fen\u002Fcomponents\u002Fbb-tabs":83,"\u002Fit\u002Fcomponenti\u002Fbb-tag":84,"\u002Fen\u002Fcomponents\u002Fbb-tag":85,"\u002Fit\u002Fcomponenti\u002Fbb-text-input":86,"\u002Fen\u002Fcomponents\u002Fbb-text-input":87,"\u002Fit\u002Fcomponenti\u002Fbb-textarea":88,"\u002Fen\u002Fcomponents\u002Fbb-textarea":89,"\u002Fit\u002Fcomponenti\u002Fbb-time-picker":90,"\u002Fen\u002Fcomponents\u002Fbb-time-picker":91,"\u002Fit\u002Fcomponenti\u002Fbb-time-picker-input":92,"\u002Fen\u002Fcomponents\u002Fbb-time-picker-input":93,"\u002Fit\u002Fcomponenti\u002Fbb-toast":94,"\u002Fen\u002Fcomponents\u002Fbb-toast":95,"\u002Fit\u002Fcomponenti\u002Fbb-tooltip":96,"\u002Fen\u002Fcomponents\u002Fbb-tooltip":97,"\u002Fit\u002Fcomponenti\u002Fbb-tree":98,"\u002Fen\u002Fcomponents\u002Fbb-tree":99,"\u002Fit\u002Fguide\u002Fai-agents":100,"\u002Fen\u002Fguides\u002Fai-agents":101,"\u002Fit\u002Fguide\u002Fcoherence":102,"\u002Fen\u002Fguides\u002Fcoherence":103,"\u002Fit\u002Fguide\u002Fdesign-language":104,"\u002Fen\u002Fguides\u002Fdesign-language":105,"\u002Fit\u002Fguide\u002Fdesign-tokens":106,"\u002Fen\u002Fguides\u002Fdesign-tokens":107,"\u002Fit\u002Fguide\u002Ffetching-data":108,"\u002Fen\u002Fguides\u002Ffetching-data":109,"\u002Fit\u002Fguide\u002Ficons":110,"\u002Fen\u002Fguides\u002Ficons":111,"\u002Fit\u002Fguide\u002Finertia":112,"\u002Fen\u002Fguides\u002Finertia":113,"\u002Fit\u002Fguide\u002Finstallation":114,"\u002Fen\u002Fguides\u002Finstallation":115,"\u002Fit\u002Fguide\u002Fmigration":116,"\u002Fen\u002Fguides\u002Fmigration":117,"\u002Fit\u002Fguide\u002Fnuxt":118,"\u002Fen\u002Fguides\u002Fnuxt":119,"\u002Fit\u002Fguide\u002Foptions-and-items":120,"\u002Fen\u002Fguides\u002Foptions-and-items":121,"\u002Fit\u002Fguide\u002Fvalidated-forms":122,"\u002Fen\u002Fguides\u002Fvalidated-forms":123},"\u002Fen\u002Fcomponents\u002Fbb-accordion","\u002Fit\u002Fcomponenti\u002Fbb-accordion","\u002Fen\u002Fcomponents\u002Fbb-alert","\u002Fit\u002Fcomponenti\u002Fbb-alert","\u002Fen\u002Fcomponents\u002Fbb-asterisk","\u002Fit\u002Fcomponenti\u002Fbb-asterisk","\u002Fen\u002Fcomponents\u002Fbb-avatar","\u002Fit\u002Fcomponenti\u002Fbb-avatar","\u002Fen\u002Fcomponents\u002Fbb-badge","\u002Fit\u002Fcomponenti\u002Fbb-badge","\u002Fen\u002Fcomponents\u002Fbb-base-button","\u002Fit\u002Fcomponenti\u002Fbb-base-button","\u002Fen\u002Fcomponents\u002Fbb-breadcrumbs","\u002Fit\u002Fcomponenti\u002Fbb-breadcrumbs","\u002Fen\u002Fcomponents\u002Fbb-button","\u002Fit\u002Fcomponenti\u002Fbb-button","\u002Fen\u002Fcomponents\u002Fbb-checkbox","\u002Fit\u002Fcomponenti\u002Fbb-checkbox","\u002Fen\u002Fcomponents\u002Fbb-checkbox-group","\u002Fit\u002Fcomponenti\u002Fbb-checkbox-group","\u002Fen\u002Fcomponents\u002Fbb-collapsible","\u002Fit\u002Fcomponenti\u002Fbb-collapsible","\u002Fen\u002Fcomponents\u002Fbb-color-input","\u002Fit\u002Fcomponenti\u002Fbb-color-input","\u002Fen\u002Fcomponents\u002Fbb-color-palette","\u002Fit\u002Fcomponenti\u002Fbb-color-palette","\u002Fen\u002Fcomponents\u002Fbb-confirm","\u002Fit\u002Fcomponenti\u002Fbb-confirm","\u002Fen\u002Fcomponents\u002Fbb-date-picker","\u002Fit\u002Fcomponenti\u002Fbb-date-picker","\u002Fen\u002Fcomponents\u002Fbb-date-picker-input","\u002Fit\u002Fcomponenti\u002Fbb-date-picker-input","\u002Fen\u002Fcomponents\u002Fbb-dialog","\u002Fit\u002Fcomponenti\u002Fbb-dialog","\u002Fen\u002Fcomponents\u002Fbb-dropdown","\u002Fit\u002Fcomponenti\u002Fbb-dropdown","\u002Fen\u002Fcomponents\u002Fbb-dropdown-button","\u002Fit\u002Fcomponenti\u002Fbb-dropdown-button","\u002Fen\u002Fcomponents\u002Fbb-dropzone","\u002Fit\u002Fcomponenti\u002Fbb-dropzone","\u002Fen\u002Fcomponents\u002Fbb-form","\u002Fit\u002Fcomponenti\u002Fbb-form","\u002Fen\u002Fcomponents\u002Fbb-icon","\u002Fit\u002Fcomponenti\u002Fbb-icon","\u002Fen\u002Fcomponents\u002Fbb-indicator","\u002Fit\u002Fcomponenti\u002Fbb-indicator","\u002Fen\u002Fcomponents\u002Fbb-number-input","\u002Fit\u002Fcomponenti\u002Fbb-number-input","\u002Fen\u002Fcomponents\u002Fbb-off-canvas","\u002Fit\u002Fcomponenti\u002Fbb-off-canvas","\u002Fen\u002Fcomponents\u002Fbb-pagination","\u002Fit\u002Fcomponenti\u002Fbb-pagination","\u002Fen\u002Fcomponents\u002Fbb-popover","\u002Fit\u002Fcomponenti\u002Fbb-popover","\u002Fen\u002Fcomponents\u002Fbb-progress","\u002Fit\u002Fcomponenti\u002Fbb-progress","\u002Fen\u002Fcomponents\u002Fbb-radio","\u002Fit\u002Fcomponenti\u002Fbb-radio","\u002Fen\u002Fcomponents\u002Fbb-radio-group","\u002Fit\u002Fcomponenti\u002Fbb-radio-group","\u002Fen\u002Fcomponents\u002Fbb-rating","\u002Fit\u002Fcomponenti\u002Fbb-rating","\u002Fen\u002Fcomponents\u002Fbb-select","\u002Fit\u002Fcomponenti\u002Fbb-select","\u002Fen\u002Fcomponents\u002Fbb-select-popover","\u002Fit\u002Fcomponenti\u002Fbb-select-popover","\u002Fen\u002Fcomponents\u002Fbb-slider","\u002Fit\u002Fcomponenti\u002Fbb-slider","\u002Fen\u002Fcomponents\u002Fbb-smooth-height","\u002Fit\u002Fcomponenti\u002Fbb-smooth-height","\u002Fen\u002Fcomponents\u002Fbb-spinner","\u002Fit\u002Fcomponenti\u002Fbb-spinner","\u002Fen\u002Fcomponents\u002Fbb-switch","\u002Fit\u002Fcomponenti\u002Fbb-switch","\u002Fen\u002Fcomponents\u002Fbb-switch-group","\u002Fit\u002Fcomponenti\u002Fbb-switch-group","\u002Fen\u002Fcomponents\u002Fbb-table","\u002Fit\u002Fcomponenti\u002Fbb-table","\u002Fen\u002Fcomponents\u002Fbb-tabs","\u002Fit\u002Fcomponenti\u002Fbb-tabs","\u002Fen\u002Fcomponents\u002Fbb-tag","\u002Fit\u002Fcomponenti\u002Fbb-tag","\u002Fen\u002Fcomponents\u002Fbb-text-input","\u002Fit\u002Fcomponenti\u002Fbb-text-input","\u002Fen\u002Fcomponents\u002Fbb-textarea","\u002Fit\u002Fcomponenti\u002Fbb-textarea","\u002Fen\u002Fcomponents\u002Fbb-time-picker","\u002Fit\u002Fcomponenti\u002Fbb-time-picker","\u002Fen\u002Fcomponents\u002Fbb-time-picker-input","\u002Fit\u002Fcomponenti\u002Fbb-time-picker-input","\u002Fen\u002Fcomponents\u002Fbb-toast","\u002Fit\u002Fcomponenti\u002Fbb-toast","\u002Fen\u002Fcomponents\u002Fbb-tooltip","\u002Fit\u002Fcomponenti\u002Fbb-tooltip","\u002Fen\u002Fcomponents\u002Fbb-tree","\u002Fit\u002Fcomponenti\u002Fbb-tree","\u002Fen\u002Fguides\u002Fai-agents","\u002Fit\u002Fguide\u002Fai-agents","\u002Fen\u002Fguides\u002Fcoherence","\u002Fit\u002Fguide\u002Fcoherence","\u002Fen\u002Fguides\u002Fdesign-language","\u002Fit\u002Fguide\u002Fdesign-language","\u002Fen\u002Fguides\u002Fdesign-tokens","\u002Fit\u002Fguide\u002Fdesign-tokens","\u002Fen\u002Fguides\u002Ffetching-data","\u002Fit\u002Fguide\u002Ffetching-data","\u002Fen\u002Fguides\u002Ficons","\u002Fit\u002Fguide\u002Ficons","\u002Fen\u002Fguides\u002Finertia","\u002Fit\u002Fguide\u002Finertia","\u002Fen\u002Fguides\u002Finstallation","\u002Fit\u002Fguide\u002Finstallation","\u002Fen\u002Fguides\u002Fmigration","\u002Fit\u002Fguide\u002Fmigration","\u002Fen\u002Fguides\u002Fnuxt","\u002Fit\u002Fguide\u002Fnuxt","\u002Fen\u002Fguides\u002Foptions-and-items","\u002Fit\u002Fguide\u002Foptions-and-items","\u002Fen\u002Fguides\u002Fvalidated-forms","\u002Fit\u002Fguide\u002Fvalidated-forms",[125,136,145,166,178,220,253,286,307,328,340,346],{"label":126,"entries":127},"Getting started",[128,132],{"title":129,"path":130,"order":131},"Installation","\u002Fguides\u002Finstallation",1,{"title":133,"path":134,"order":135},"Migrating from v2","\u002Fguides\u002Fmigration",2,{"label":137,"entries":138},"Design system",[139,142],{"title":140,"path":141,"order":131},"Design tokens","\u002Fguides\u002Fdesign-tokens",{"title":143,"path":144,"order":135},"Design language","\u002Fguides\u002Fdesign-language",{"label":146,"entries":147},"Playbooks",[148,151,154,158,162],{"title":149,"path":150,"order":131},"Options and items","\u002Fguides\u002Foptions-and-items",{"title":152,"path":153,"order":135},"Fetching data","\u002Fguides\u002Ffetching-data",{"title":155,"path":156,"order":157},"Coherence","\u002Fguides\u002Fcoherence",3,{"title":159,"path":160,"order":161},"Validated forms","\u002Fguides\u002Fvalidated-forms",4,{"title":163,"path":164,"order":165},"Icons","\u002Fguides\u002Ficons",5,{"label":167,"entries":168},"Ecosystem",[169,172,175],{"title":170,"path":171,"order":131},"Inertia and Laravel","\u002Fguides\u002Finertia",{"title":173,"path":174,"order":135},"Nuxt","\u002Fguides\u002Fnuxt",{"title":176,"path":177,"order":157},"AI agents","\u002Fguides\u002Fai-agents",{"label":179,"entries":180},"Inputs",[181,184,187,190,193,196,200,204,208,212,216],{"title":182,"path":183,"component":182,"order":131},"BbBaseButton","\u002Fcomponents\u002Fbb-base-button",{"title":185,"path":186,"component":185,"order":135},"BbButton","\u002Fcomponents\u002Fbb-button",{"title":188,"path":189,"component":188,"order":157},"BbColorInput","\u002Fcomponents\u002Fbb-color-input",{"title":191,"path":192,"component":191,"order":161},"BbDatePickerInput","\u002Fcomponents\u002Fbb-date-picker-input",{"title":194,"path":195,"component":194,"order":165},"BbDropzone","\u002Fcomponents\u002Fbb-dropzone",{"title":197,"path":198,"component":197,"order":199},"BbForm","\u002Fcomponents\u002Fbb-form",6,{"title":201,"path":202,"component":201,"order":203},"BbNumberInput","\u002Fcomponents\u002Fbb-number-input",7,{"title":205,"path":206,"component":205,"order":207},"BbTag","\u002Fcomponents\u002Fbb-tag",8,{"title":209,"path":210,"component":209,"order":211},"BbTextarea","\u002Fcomponents\u002Fbb-textarea",9,{"title":213,"path":214,"component":213,"order":215},"BbTextInput","\u002Fcomponents\u002Fbb-text-input",10,{"title":217,"path":218,"component":217,"order":219},"BbTimePickerInput","\u002Fcomponents\u002Fbb-time-picker-input",11,{"label":221,"entries":222},"Selection",[223,226,229,232,235,238,241,244,247,250],{"title":224,"path":225,"component":224,"order":131},"BbCheckbox","\u002Fcomponents\u002Fbb-checkbox",{"title":227,"path":228,"component":227,"order":135},"BbCheckboxGroup","\u002Fcomponents\u002Fbb-checkbox-group",{"title":230,"path":231,"component":230,"order":157},"BbRadio","\u002Fcomponents\u002Fbb-radio",{"title":233,"path":234,"component":233,"order":161},"BbRadioGroup","\u002Fcomponents\u002Fbb-radio-group",{"title":236,"path":237,"component":236,"order":165},"BbRating","\u002Fcomponents\u002Fbb-rating",{"title":239,"path":240,"component":239,"order":199},"BbSelect","\u002Fcomponents\u002Fbb-select",{"title":242,"path":243,"component":242,"order":203},"BbSelectPopover","\u002Fcomponents\u002Fbb-select-popover",{"title":245,"path":246,"component":245,"order":207},"BbSlider","\u002Fcomponents\u002Fbb-slider",{"title":248,"path":249,"component":248,"order":211},"BbSwitch","\u002Fcomponents\u002Fbb-switch",{"title":251,"path":252,"component":251,"order":215},"BbSwitchGroup","\u002Fcomponents\u002Fbb-switch-group",{"label":254,"entries":255},"Overlay",[256,259,262,265,268,271,274,277,280,283],{"title":257,"path":258,"component":257,"order":131},"BbColorPalette","\u002Fcomponents\u002Fbb-color-palette",{"title":260,"path":261,"component":260,"order":135},"BbConfirm","\u002Fcomponents\u002Fbb-confirm",{"title":263,"path":264,"component":263,"order":157},"BbDatePicker","\u002Fcomponents\u002Fbb-date-picker",{"title":266,"path":267,"component":266,"order":161},"BbDialog","\u002Fcomponents\u002Fbb-dialog",{"title":269,"path":270,"component":269,"order":165},"BbDropdown","\u002Fcomponents\u002Fbb-dropdown",{"title":272,"path":273,"component":272,"order":199},"BbDropdownButton","\u002Fcomponents\u002Fbb-dropdown-button",{"title":275,"path":276,"component":275,"order":203},"BbOffCanvas","\u002Fcomponents\u002Fbb-off-canvas",{"title":278,"path":279,"component":278,"order":207},"BbPopover","\u002Fcomponents\u002Fbb-popover",{"title":281,"path":282,"component":281,"order":211},"BbTimePicker","\u002Fcomponents\u002Fbb-time-picker",{"title":284,"path":285,"component":284,"order":215},"BbTooltip","\u002Fcomponents\u002Fbb-tooltip",{"label":287,"entries":288},"Navigation",[289,292,295,298,301,304],{"title":290,"path":291,"component":290,"order":131},"BbAccordion","\u002Fcomponents\u002Fbb-accordion",{"title":293,"path":294,"component":293,"order":135},"BbBreadcrumbs","\u002Fcomponents\u002Fbb-breadcrumbs",{"title":296,"path":297,"component":296,"order":157},"BbCollapsible","\u002Fcomponents\u002Fbb-collapsible",{"title":299,"path":300,"component":299,"order":161},"BbPagination","\u002Fcomponents\u002Fbb-pagination",{"title":302,"path":303,"component":302,"order":165},"BbTabs","\u002Fcomponents\u002Fbb-tabs",{"title":305,"path":306,"component":305,"order":199},"BbTree","\u002Fcomponents\u002Fbb-tree",{"label":308,"entries":309},"Feedback",[310,313,316,319,322,325],{"title":311,"path":312,"component":311,"order":131},"BbAlert","\u002Fcomponents\u002Fbb-alert",{"title":314,"path":315,"component":314,"order":135},"BbBadge","\u002Fcomponents\u002Fbb-badge",{"title":317,"path":318,"component":317,"order":157},"BbIndicator","\u002Fcomponents\u002Fbb-indicator",{"title":320,"path":321,"component":320,"order":161},"BbProgress","\u002Fcomponents\u002Fbb-progress",{"title":323,"path":324,"component":323,"order":165},"BbSpinner","\u002Fcomponents\u002Fbb-spinner",{"title":326,"path":327,"component":326,"order":199},"BbToast","\u002Fcomponents\u002Fbb-toast",{"label":329,"entries":330},"Data Display",[331,334,337],{"title":332,"path":333,"component":332,"order":131},"BbAvatar","\u002Fcomponents\u002Fbb-avatar",{"title":335,"path":336,"component":335,"order":135},"BbIcon","\u002Fcomponents\u002Fbb-icon",{"title":338,"path":339,"component":338,"order":157},"BbTable","\u002Fcomponents\u002Fbb-table",{"label":341,"entries":342},"Layout & Utility",[343],{"title":344,"path":345,"component":344,"order":131},"BbSmoothHeight","\u002Fcomponents\u002Fbb-smooth-height",{"label":347,"entries":348},"Other",[349],{"title":350,"path":351,"component":350,"order":131},"BbAsterisk","\u002Fcomponents\u002Fbb-asterisk",null,{"id":354,"title":197,"body":355,"component":197,"description":1754,"extension":1755,"group":179,"meta":1756,"navigation":696,"order":199,"path":198,"sections":1757,"seo":1766,"stem":1767,"__hash__":1768},"docs_en\u002Fcomponents\u002Fbb-form.md",{"type":356,"value":357,"toc":1744},"minimark",[358,403,421,444,462,469,472,476,483,504,549,555,561,581,914,933,947,954,959,968,989,996,1004,1017,1026,1131,1150,1156,1162,1212,1222,1229,1235,1242,1245,1276,1284,1301,1312,1324,1340,1350,1356,1369,1372,1414,1425,1434,1453,1492,1507,1512,1521,1556,1570,1622,1632,1638,1645,1689,1715,1725,1740],[359,360,361,377],"when",{},[362,363,364,365,368,369,372,373,376],"p",{},"Use ",[366,367,197],"code",{}," when the user must correct every invalid field before an action\nruns. Import the form and its fields from ",[366,370,371],{},"bitboss-ui\u002Fvalidated",", add string\nrules to each field, and handle one ",[366,374,375],{},"submit"," event after the whole form passes.",[378,379,381],"template",{"v-slot:else":380},"",[382,383,384,396],"ul",{},[385,386,387,388,391,392,395],"li",{},"A plain ",[366,389,390],{},"\u003Cform>"," with controls from the core ",[366,393,394],{},"bitboss-ui"," entrypoint —\nnothing on the form validates client-side",[385,397,398,399,402],{},"The same, with ",[366,400,401],{},"errors"," — your messages come from a server round trip rather\nthan from client rules, which is what an Inertia or a Laravel form usually\nwants",[362,404,405,406,410,411,413,414,417,418,420],{},"It ships from a ",[407,408,409],"strong",{},"different entrypoint",". ",[366,412,371],{}," re-exports the\nform controls with field binding attached, and it needs the ",[366,415,416],{},"vee-validate"," peer;\nthe core ",[366,419,394],{}," entrypoint never pulls vee-validate into an app that does\nnot validate anything.",[422,423,427],"pre",{"className":424,"code":425,"language":426,"meta":380,"style":380},"language-bash shiki shiki-themes github-light-high-contrast github-dark-high-contrast","npm i vee-validate\n","bash",[366,428,429],{"__ignoreMap":380},[430,431,433,437,441],"span",{"class":432,"line":131},"line",[430,434,436],{"class":435},"soyes","npm",[430,438,440],{"class":439},"sT6z2"," i",[430,442,443],{"class":439}," vee-validate\n",[362,445,446,447,450,451,453,454,457,458,461],{},"Two things it is not. It is ",[407,448,449],{},"not a layout",": it renders a bare ",[366,452,390],{}," and\nnothing else, so spacing, columns and section headings stay yours. And it is\n",[407,455,456],{},"not a submit button",": put your own ",[366,459,460],{},"\u003CBbButton type=\"submit\">"," in the slot.",[463,464,466],"h2",{"id":465},"default",[430,467,468],{},"A validated form, end to end",[362,470,471],{},"Register your rules once, then name them on each field. The opening example uses\nthe same string-rule shape you should ship.",[473,474],"demo",{"name":475},"BbForm\u002FBasic",[362,477,478,479,482],{},"Submit with an empty email and the request does not start. Correct it and submit\nagain: the returned request promise keeps ",[366,480,481],{},"isSubmitting"," true, so the button\nstays in its loading state until the work settles.",[362,484,485,486,489,490,493,494,497,498,500,501,503],{},"The validated controls keep the core component API and add ",[366,487,488],{},"rules",",\n",[366,491,492],{},"validateOn"," and ",[366,495,496],{},"vid",". The core ",[366,499,185],{}," stays imported from ",[366,502,394],{},".",[362,505,506,507,509,510,489,512,509,514,509,516,509,518,509,520,509,522,489,524,509,526,509,528,509,530,509,532,489,534,509,536,509,538,540,541,543,544,503],{},"The full roster of validated controls: ",[366,508,213],{},", ",[366,511,201],{},[366,513,209],{},[366,515,239],{},[366,517,205],{},[366,519,224],{},[366,521,227],{},[366,523,248],{},[366,525,251],{},[366,527,233],{},[366,529,236],{},[366,531,245],{},[366,533,191],{},[366,535,217],{},[366,537,188],{},[366,539,194],{},". Anything else in a ",[366,542,197],{}," is\nalong for the ride — see ",[545,546,548],"a",{"href":547},"#mixing","What is actually validated",[463,550,552],{"id":551},"setup",[430,553,554],{},"Rules, defined once",[362,556,557,560],{},[366,558,559],{},"\"required|email\""," is a reference, not a definition. Register the rules and their\nmessages once, in a module you import for its side effects, and every field in\nthe app can name them as a plain string.",[422,562,564],{"className":424,"code":563,"language":426,"meta":380,"style":380},"npm i vee-validate @vee-validate\u002Frules @vee-validate\u002Fi18n\n",[366,565,566],{"__ignoreMap":380},[430,567,568,570,572,575,578],{"class":432,"line":131},[430,569,436],{"class":435},[430,571,440],{"class":439},[430,573,574],{"class":439}," vee-validate",[430,576,577],{"class":439}," @vee-validate\u002Frules",[430,579,580],{"class":439}," @vee-validate\u002Fi18n\n",[422,582,586],{"className":583,"code":584,"language":585,"meta":380,"style":380},"language-ts shiki shiki-themes github-light-high-contrast github-dark-high-contrast","\u002F\u002F app\u002Fvalidators.ts\nimport { configure, defineRule } from 'vee-validate';\nimport { localize, setLocale } from '@vee-validate\u002Fi18n';\nimport en from '@vee-validate\u002Fi18n\u002Fdist\u002Flocale\u002Fen.json';\nimport {\n    email,\n    max,\n    min,\n    min_value,\n    numeric,\n    required,\n} from '@vee-validate\u002Frules';\n\ndefineRule('required', required);\ndefineRule('email', email);\ndefineRule('numeric', numeric);\ndefineRule('min', min);\ndefineRule('max', max);\ndefineRule('min_value', min_value);\n\n\u002F\u002F A project rule is the same (value, params, ctx) signature. Return true, or\n\u002F\u002F the message to show.\ndefineRule('workEmail', (value: unknown) =>\n    typeof value === 'string' && value.endsWith('@example.com')\n        ? true\n        : 'Use your work address.'\n);\n\nconfigure({ generateMessage: localize({ en }) });\nsetLocale('en');\n","ts",[366,587,588,594,613,627,641,648,653,658,663,668,673,678,691,698,714,727,740,753,766,779,784,790,796,825,857,866,875,881,886,901],{"__ignoreMap":380},[430,589,590],{"class":432,"line":131},[430,591,593],{"class":592},"sLBg1","\u002F\u002F app\u002Fvalidators.ts\n",[430,595,596,600,604,607,610],{"class":432,"line":135},[430,597,599],{"class":598},"sHUrx","import",[430,601,603],{"class":602},"suds8"," { configure, defineRule } ",[430,605,606],{"class":598},"from",[430,608,609],{"class":439}," 'vee-validate'",[430,611,612],{"class":602},";\n",[430,614,615,617,620,622,625],{"class":432,"line":157},[430,616,599],{"class":598},[430,618,619],{"class":602}," { localize, setLocale } ",[430,621,606],{"class":598},[430,623,624],{"class":439}," '@vee-validate\u002Fi18n'",[430,626,612],{"class":602},[430,628,629,631,634,636,639],{"class":432,"line":161},[430,630,599],{"class":598},[430,632,633],{"class":602}," en ",[430,635,606],{"class":598},[430,637,638],{"class":439}," '@vee-validate\u002Fi18n\u002Fdist\u002Flocale\u002Fen.json'",[430,640,612],{"class":602},[430,642,643,645],{"class":432,"line":165},[430,644,599],{"class":598},[430,646,647],{"class":602}," {\n",[430,649,650],{"class":432,"line":199},[430,651,652],{"class":602},"    email,\n",[430,654,655],{"class":432,"line":203},[430,656,657],{"class":602},"    max,\n",[430,659,660],{"class":432,"line":207},[430,661,662],{"class":602},"    min,\n",[430,664,665],{"class":432,"line":211},[430,666,667],{"class":602},"    min_value,\n",[430,669,670],{"class":432,"line":215},[430,671,672],{"class":602},"    numeric,\n",[430,674,675],{"class":432,"line":219},[430,676,677],{"class":602},"    required,\n",[430,679,681,684,686,689],{"class":432,"line":680},12,[430,682,683],{"class":602},"} ",[430,685,606],{"class":598},[430,687,688],{"class":439}," '@vee-validate\u002Frules'",[430,690,612],{"class":602},[430,692,694],{"class":432,"line":693},13,[430,695,697],{"emptyLinePlaceholder":696},true,"\n",[430,699,701,705,708,711],{"class":432,"line":700},14,[430,702,704],{"class":703},"sKwhi","defineRule",[430,706,707],{"class":602},"(",[430,709,710],{"class":439},"'required'",[430,712,713],{"class":602},", required);\n",[430,715,717,719,721,724],{"class":432,"line":716},15,[430,718,704],{"class":703},[430,720,707],{"class":602},[430,722,723],{"class":439},"'email'",[430,725,726],{"class":602},", email);\n",[430,728,730,732,734,737],{"class":432,"line":729},16,[430,731,704],{"class":703},[430,733,707],{"class":602},[430,735,736],{"class":439},"'numeric'",[430,738,739],{"class":602},", numeric);\n",[430,741,743,745,747,750],{"class":432,"line":742},17,[430,744,704],{"class":703},[430,746,707],{"class":602},[430,748,749],{"class":439},"'min'",[430,751,752],{"class":602},", min);\n",[430,754,756,758,760,763],{"class":432,"line":755},18,[430,757,704],{"class":703},[430,759,707],{"class":602},[430,761,762],{"class":439},"'max'",[430,764,765],{"class":602},", max);\n",[430,767,769,771,773,776],{"class":432,"line":768},19,[430,770,704],{"class":703},[430,772,707],{"class":602},[430,774,775],{"class":439},"'min_value'",[430,777,778],{"class":602},", min_value);\n",[430,780,782],{"class":432,"line":781},20,[430,783,697],{"emptyLinePlaceholder":696},[430,785,787],{"class":432,"line":786},21,[430,788,789],{"class":592},"\u002F\u002F A project rule is the same (value, params, ctx) signature. Return true, or\n",[430,791,793],{"class":432,"line":792},22,[430,794,795],{"class":592},"\u002F\u002F the message to show.\n",[430,797,799,801,803,806,809,812,815,819,822],{"class":432,"line":798},23,[430,800,704],{"class":703},[430,802,707],{"class":602},[430,804,805],{"class":439},"'workEmail'",[430,807,808],{"class":602},", (",[430,810,811],{"class":435},"value",[430,813,814],{"class":598},":",[430,816,818],{"class":817},"s-5SL"," unknown",[430,820,821],{"class":602},") ",[430,823,824],{"class":598},"=>\n",[430,826,828,831,834,837,840,843,846,849,851,854],{"class":432,"line":827},24,[430,829,830],{"class":598},"    typeof",[430,832,833],{"class":602}," value ",[430,835,836],{"class":598},"===",[430,838,839],{"class":439}," 'string'",[430,841,842],{"class":598}," &&",[430,844,845],{"class":602}," value.",[430,847,848],{"class":703},"endsWith",[430,850,707],{"class":602},[430,852,853],{"class":439},"'@example.com'",[430,855,856],{"class":602},")\n",[430,858,860,863],{"class":432,"line":859},25,[430,861,862],{"class":598},"        ?",[430,864,865],{"class":817}," true\n",[430,867,869,872],{"class":432,"line":868},26,[430,870,871],{"class":598},"        :",[430,873,874],{"class":439}," 'Use your work address.'\n",[430,876,878],{"class":432,"line":877},27,[430,879,880],{"class":602},");\n",[430,882,884],{"class":432,"line":883},28,[430,885,697],{"emptyLinePlaceholder":696},[430,887,889,892,895,898],{"class":432,"line":888},29,[430,890,891],{"class":703},"configure",[430,893,894],{"class":602},"({ generateMessage: ",[430,896,897],{"class":703},"localize",[430,899,900],{"class":602},"({ en }) });\n",[430,902,904,907,909,912],{"class":432,"line":903},30,[430,905,906],{"class":703},"setLocale",[430,908,707],{"class":602},[430,910,911],{"class":439},"'en'",[430,913,880],{"class":602},[422,915,917],{"className":583,"code":916,"language":585,"meta":380,"style":380},"\u002F\u002F main.ts, or a Nuxt plugin — imported once, for its side effects\nimport '~\u002Fvalidators';\n",[366,918,919,924],{"__ignoreMap":380},[430,920,921],{"class":432,"line":131},[430,922,923],{"class":592},"\u002F\u002F main.ts, or a Nuxt plugin — imported once, for its side effects\n",[430,925,926,928,931],{"class":432,"line":135},[430,927,599],{"class":598},[430,929,930],{"class":439}," '~\u002Fvalidators'",[430,932,612],{"class":602},[362,934,935,936,939,940,943,944,946],{},"vee-validate's message catalogue is a ",[407,937,938],{},"separate registry"," from the bitboss-ui\n",[366,941,942],{},"locale"," option, and the two do not share keys. Register a message locale for\neach language you support, set the active one, and if the user can switch\nlanguage at runtime call ",[366,945,906],{}," in step with your own i18n — nothing bridges\nthem for you.",[362,948,949,950,953],{},"For a one-off constraint that is not worth a global name, a function works\ninline: ",[366,951,952],{},":rules=\"(v) => Number(v) % 5 === 0 || 'In blocks of five.'\"",". Prefer the\nstring form everywhere else; it keeps the rule and its message in one place\ninstead of scattering both across templates.",[463,955,956],{"id":375},[430,957,958],{},"Submit is the gate",[362,960,961,963,964,967],{},[366,962,375],{}," is the only event, and it fires ",[407,965,966],{},"only when every field passes",", with\nthe collected values. An invalid form surfaces its messages and stays where it\nis.",[362,969,970,971,974,975,978,979,981,982,985,986,503],{},"Native submission is always prevented, so there is no navigation to suppress:\nwrite ",[366,972,973],{},"@submit",", never ",[366,976,977],{},"@submit.prevent",". The rendered ",[366,980,390],{}," also carries\n",[366,983,984],{},"novalidate",", which is ",[545,987,988],{"href":547},"its own section",[362,990,991,992,995],{},"The payload is keyed by each field's name, and each field derived its name from\nits ",[366,993,994],{},"label",": accents are stripped, spaces removed, the rest lowercased.",[422,997,1002],{"className":998,"code":1000,"language":1001},[999],"language-text","\"Work email\"      → workemail\n\"Seats\"           → seats\n\"Città di nascita\" → cittadinascita\n","text",[366,1003,1000],{"__ignoreMap":380},[362,1005,1006,1007,1010,1011,1014,1015,503],{},"That is worth reading before you wire the payload into an API call, because\n",[366,1008,1009],{},"workemail"," is probably not what your endpoint expects. Most forms already keep\ntheir own state through ",[366,1012,1013],{},"v-model"," — the example in the first section does — so\nthe honest answer is usually to ignore the payload and send your own object; the\nevent is then a signal that validation passed, not a data source. When you do\nwant the payload to be the request body, name the fields yourself with ",[366,1016,496],{},[362,1018,1019,1021,1022,1025],{},[366,1020,496],{}," is the escape hatch for the name, and it is required in two cases. When\nlabels would collide — rows in a ",[366,1023,1024],{},"v-for",", several fields sharing one label —\nevery colliding field needs its own:",[422,1027,1031],{"className":1028,"code":1029,"language":1030,"meta":380,"style":380},"language-vue shiki shiki-themes github-light-high-contrast github-dark-high-contrast","\u003CBbTextInput\n    v-for=\"(_, i) in form.attendees\"\n    :key=\"i\"\n    v-model=\"form.attendees[i]\"\n    label=\"Attendee\"\n    :vid=\"`attendee_${i}`\"\n\u002F>\n","vue",[366,1032,1033,1042,1065,1082,1096,1106,1126],{"__ignoreMap":380},[430,1034,1035,1038],{"class":432,"line":131},[430,1036,1037],{"class":602},"\u003C",[430,1039,1041],{"class":1040},"sne4z","BbTextInput\n",[430,1043,1044,1047,1050,1053,1056,1059,1062],{"class":432,"line":135},[430,1045,1046],{"class":598},"    v-for",[430,1048,1049],{"class":602},"=",[430,1051,1052],{"class":602},"\"",[430,1054,1055],{"class":602},"(_, i) ",[430,1057,1058],{"class":598},"in",[430,1060,1061],{"class":602}," form.attendees",[430,1063,1064],{"class":602},"\"\n",[430,1066,1067,1070,1073,1075,1077,1080],{"class":432,"line":157},[430,1068,1069],{"class":602},"    :",[430,1071,1072],{"class":817},"key",[430,1074,1049],{"class":602},[430,1076,1052],{"class":602},[430,1078,1079],{"class":602},"i",[430,1081,1064],{"class":602},[430,1083,1084,1087,1089,1091,1094],{"class":432,"line":161},[430,1085,1086],{"class":817},"    v-model",[430,1088,1049],{"class":602},[430,1090,1052],{"class":602},[430,1092,1093],{"class":602},"form.attendees[i]",[430,1095,1064],{"class":602},[430,1097,1098,1101,1103],{"class":432,"line":165},[430,1099,1100],{"class":817},"    label",[430,1102,1049],{"class":602},[430,1104,1105],{"class":439},"\"Attendee\"\n",[430,1107,1108,1110,1112,1114,1116,1119,1121,1124],{"class":432,"line":199},[430,1109,1069],{"class":602},[430,1111,496],{"class":817},[430,1113,1049],{"class":602},[430,1115,1052],{"class":602},[430,1117,1118],{"class":439},"`attendee_${",[430,1120,1079],{"class":602},[430,1122,1123],{"class":439},"}`",[430,1125,1064],{"class":602},[430,1127,1128],{"class":432,"line":203},[430,1129,1130],{"class":602},"\u002F>\n",[362,1132,1133,1134,1136,1137,1139,1140,1142,1143,1146,1147,1149],{},"And when there is no label to derive from at all. ",[366,1135,194],{}," has none, so it\nalways needs ",[366,1138,496],{},". A validated control with neither a ",[366,1141,994],{},"\u002F",[366,1144,1145],{},"legend"," nor a\n",[366,1148,496],{}," throws before it renders, naming itself and telling you which of the two to\nadd — a loud failure, deliberately, because a field with no name silently drops\nout of the form.",[463,1151,1153],{"id":1152},"timing",[430,1154,1155],{},"When validation runs",[362,1157,1158,1159,1161],{},"Each control has a ",[366,1160,492],{}," default chosen for the way it is used, so a text\nfield does not turn red while someone is still typing into it and a select does\nnot stay silent after the user has clearly finished.",[1163,1164,1165,1178],"table",{},[1166,1167,1168],"thead",{},[1169,1170,1171,1175],"tr",{},[1172,1173,1174],"th",{},"Default",[1172,1176,1177],{},"Controls",[1179,1180,1181,1192,1202],"tbody",{},[1169,1182,1183,1189],{},[1184,1185,1186],"td",{},[366,1187,1188],{},"['blur']",[1184,1190,1191],{},"BbTextInput, BbNumberInput, BbTextarea, BbColorInput, BbDropzone",[1169,1193,1194,1199],{},[1184,1195,1196],{},[366,1197,1198],{},"['inactive']",[1184,1200,1201],{},"BbSelect, BbTag, BbSlider, BbRating, BbDatePickerInput, BbTimePickerInput, BbCheckboxGroup, BbSwitchGroup, BbRadioGroup",[1169,1203,1204,1209],{},[1184,1205,1206],{},[366,1207,1208],{},"['update:modelValue', 'change', 'blur']",[1184,1210,1211],{},"BbCheckbox, BbSwitch",[362,1213,1214,1217,1218,1221],{},[366,1215,1216],{},"inactive"," means \"once the control has been left\" — a picker closed, a group\nstepped out of — which is the only moment a multi-part control has finished\nsaying anything. Override it per field with ",[366,1219,1220],{},"validate-on"," when a specific field\nneeds different timing, and keep the overrides rare: a form where every field\nvalidates on a different schedule feels arbitrary to use.",[362,1223,1224,1225,1228],{},"Two behaviours the table does not show. A field that is ",[407,1226,1227],{},"already showing an\nerror"," re-validates as the user types, so the message disappears the moment the\nvalue becomes valid rather than at the next blur — the strict rule would leave a\nred field looking broken while it is being fixed. And submit validates\neverything, whatever each field's timing says, which is what makes the gate\nreliable for fields nobody ever touched.",[463,1230,1232],{"id":1231},"slot-state",[430,1233,1234],{},"Reading form state in the slot",[362,1236,1237,1238,1241],{},"The default slot is scoped, so chrome that lives ",[407,1239,1240],{},"inside"," the form can react\nwithout lifting anything into the page.",[473,1243],{"name":1244},"BbForm\u002FSlotState",[362,1246,1247,1248,509,1251,509,1253,509,1256,489,1259,1262,1263,509,1266,509,1269,1272,1273,503],{},"The scope carries ",[366,1249,1250],{},"values",[366,1252,481],{},[366,1254,1255],{},"submitCount",[366,1257,1258],{},"validate",[366,1260,1261],{},"resetForm",", and vee-validate's meta flags ",[366,1264,1265],{},"valid",[366,1267,1268],{},"dirty",[366,1270,1271],{},"touched"," and\n",[366,1274,1275],{},"pending",[362,1277,1278,1280,1281,1283],{},[366,1279,1261],{}," restores the form values and publishes them back through each\ncontrol's ",[366,1282,1013],{},", then clears the validation metadata.",[362,1285,1286,1288,1289,1292,1296,1297,1300],{},[366,1287,1255],{}," is the one people overlook. On a form long enough that the failing\nfields scroll out of view, a single ",[366,1290,1291],{},"destructive",[545,1293,1294],{"href":6},[366,1295,311],{}," above the fields, shown once\n",[366,1298,1299],{},"submitCount > 0",", tells the user how many problems there are and where to look.\nIt does not replace the per-field messages — those are where the correction\nhappens — and there is only ever one of it.",[362,1302,1303,1305,1306,1308,1309,503],{},[366,1304,481],{}," belongs to the form submission lifecycle. It starts before\nvalidation and, when your ",[366,1307,973],{}," handler returns a promise, stays true until\nthat promise settles. Bind it to a submit button's ",[366,1310,1311],{},"loading",[362,1313,1314,1315,1317,1318,1320,1321,1323],{},"Request state is a separate ownership decision. If the handler returns the\nrequest promise, ",[366,1316,481],{}," is the right pending state. If it dispatches\nfire-and-forget work or the request lives in a store, bind ",[366,1319,1311],{}," to that\nrequest's own state instead; ",[366,1322,197],{}," cannot await work you do not return.",[1325,1326,1327],"migration",{},[362,1328,1329,1330,509,1333,1335,1336,1339],{},"Before ",[366,1331,1332],{},"3.0.0-beta.15",[366,1334,481],{}," ended after validation and\n",[366,1337,1338],{},"resetForm()"," did not update bound models. Keep a separate request flag only\nwhile supporting those older builds.",[362,1341,1342,1343,1346,1347,1349],{},"Disabling submit on ",[366,1344,1345],{},"!valid"," is a choice, not a default, and usually the wrong\none. A pristine form counts as invalid until its fields have been validated once,\nso a disabled-until-valid button reads as broken on first paint: the user has\nfilled nothing in, so nothing is valid, so the only control that would tell them\nwhat is wrong is switched off. Leave the button enabled and let the failed submit\nsurface the messages. ",[366,1348,1265],{}," earns its place in wizards and dialogs, where\nletting someone advance into a dead-end step is worse.",[463,1351,1353],{"id":1352},"outside",[430,1354,1355],{},"Driving the form from outside",[362,1357,1358,1359,1361,1362,1365,1366,503],{},"When the button lives outside the ",[366,1360,390],{}," element — a dialog footer, a page\ntoolbar, a header's \"discard changes\", a route-leave guard — give the form an\nexplicit ",[366,1363,1364],{},"id"," and read it with ",[366,1367,1368],{},"useBbFormContext(id)",[473,1370],{"name":1371},"BbForm\u002FDialogFooter",[362,1373,1374,1375,1378,1379,489,1382,509,1384,509,1386,509,1388,509,1390,509,1393,509,1395,1272,1397,1399,1400,509,1403,493,1406,1409,1410,1413],{},"This is the same id-context pattern as ",[366,1376,1377],{},"useBbTableContext"," — no template ref, no\nshared subtree, no props threaded through a layout. The handle carries ",[366,1380,1381],{},"isReady",[366,1383,1265],{},[366,1385,1268],{},[366,1387,1271],{},[366,1389,1275],{},[366,1391,1392],{},"submitting",[366,1394,1255],{},[366,1396,1250],{},[366,1398,401],{}," as computeds, plus ",[366,1401,1402],{},"submit()",[366,1404,1405],{},"reset()",[366,1407,1408],{},"validate()",". Every one of\nthem is a ref, so read them as ",[366,1411,1412],{},"invite.dirty.value"," — the handle is a plain\nobject and nothing unwraps for you in a template.",[362,1415,1416,1418,1419,1421,1422,1424],{},[366,1417,1392],{}," mirrors the form's ",[366,1420,481],{},": it covers validation and any\npromise returned by ",[366,1423,973],{},". Work owned elsewhere still needs its own request\nstate.",[362,1426,1427,1428,1430,1431,1433],{},"Keep ",[366,1429,973],{}," as the place the work happens. ",[366,1432,1402],{}," routes through the same\nhandler the inside button would trigger, so validation gates the request once and\nthere is one code path rather than two.",[362,1435,1436,1437,1439,1440,1442,1443,1446,1447,1449,1450,1452],{},"Four constraints worth knowing before you build on it. The ",[366,1438,1364],{}," must be one you\nset — an auto-generated id cannot be targeted, and a form without an ",[366,1441,1364],{}," simply\nhas no outside handle, which is the right default for a self-contained form. The\nhandle is ",[407,1444,1445],{},"callable before the form mounts",": every field reads a stable\nbaseline and every action is a no-op until ",[366,1448,1381],{}," flips, so a footer that\nrenders ahead of its dialog's content is safe; watch ",[366,1451,1381],{}," when you need to\ntell \"not mounted\" apart from \"mounted and invalid\". The registry is populated on\nthe client only, deliberately, so it cannot leak between server-rendered\nrequests — a prerendered page sees the baseline. And two mounted forms sharing an\nid both write to the same node, so the handle reports whichever wrote last.",[362,1454,1455,1456,1458,1459,489,1462,509,1465,493,1468,1471,1472,1475,1476,1479,1480,1483,1484,1487,1488,1491],{},"There is no template-ref handle, and this is the part people try first.\n",[366,1457,197],{}," exposes nothing but its root element, so ",[366,1460,1461],{},"form.value.submitForm()",[366,1463,1464],{},".isValid",[366,1466,1467],{},".validate()",[366,1469,1470],{},".reset()"," do not exist — and the failure is a\nruntime ",[366,1473,1474],{},"undefined",", not a compile error. ",[366,1477,1478],{},"form.value.$el"," is a real\n",[366,1481,1482],{},"HTMLFormElement",", and ",[366,1485,1486],{},"$el.requestSubmit()"," does dispatch a submit event that\nroutes through the same handler, so validation still gates it. Use it only for\nsomething genuinely DOM-shaped; ",[366,1489,1490],{},"useBbFormContext(id).submit()"," says what you\nmean and needs no cast.",[362,1493,1494,1495,1498,1499,1502,1503,1506],{},"Never reach for ",[366,1496,1497],{},"$el.submit()",", the other native method. It bypasses event\nhandlers entirely, so it skips validation ",[407,1500,1501],{},"and"," reloads the page.\n",[366,1504,1505],{},"requestSubmit()"," is the one that behaves.",[463,1508,1510],{"id":1509},"mixing",[430,1511,548],{},[362,1513,1514,1515,1517,1518,1520],{},"The rendered ",[366,1516,390],{}," carries ",[366,1519,984],{},". That is not a licence to skip\nvalidation — it hands validation to vee-validate exclusively.",[362,1522,1523,1524,509,1527,509,1530,509,1533,1536,1537,1142,1540,1543,1544,1546,1547,1549,1550,1552,1553,1555],{},"Without it the browser's own constraint validation runs first. A field with\n",[366,1525,1526],{},"required",[366,1528,1529],{},"type=\"email\"",[366,1531,1532],{},"pattern",[366,1534,1535],{},"maxlength"," or ",[366,1538,1539],{},"min",[366,1541,1542],{},"max"," would block the\nsubmit event before ",[366,1545,197],{}," ever saw it, show a native bubble in the browser's\nwording and the browser's language, and the form's real messages would never\nrender. The attributes themselves are worth keeping — ",[366,1548,1529],{}," gets the\nright mobile keyboard and autofill, ",[366,1551,1526],{}," is announced by screen readers —\nso the fix is not to drop them. ",[366,1554,984],{}," leaves every attribute in the DOM\nand changes only who decides.",[362,1557,1558,1559,1562,1563,1566,1567,1569],{},"The consequence follows directly, and it is the one silent trap on this page: a\nfield inside ",[366,1560,1561],{},"\u003CBbForm>"," that is ",[407,1564,1565],{},"not"," a ",[366,1568,371],{}," control is\nvalidated by nobody. vee-validate only knows about registered fields, and the\nbrowser has stepped aside. Nothing warns you; the form just submits with a value\nyou thought was checked.",[422,1571,1573],{"className":583,"code":1572,"language":585,"meta":380,"style":380},"import { BbForm, BbTextInput } from 'bitboss-ui\u002Fvalidated';\n\n\u002F\u002F The quiet mistake: one control imported from the core entrypoint. Same name,\n\u002F\u002F same props, no field binding. It renders inside the form, it submits, and no\n\u002F\u002F rule ever runs against it — there is no `rules` prop to give it.\nimport { BbSelect } from 'bitboss-ui';\n",[366,1574,1575,1589,1593,1598,1603,1608],{"__ignoreMap":380},[430,1576,1577,1579,1582,1584,1587],{"class":432,"line":131},[430,1578,599],{"class":598},[430,1580,1581],{"class":602}," { BbForm, BbTextInput } ",[430,1583,606],{"class":598},[430,1585,1586],{"class":439}," 'bitboss-ui\u002Fvalidated'",[430,1588,612],{"class":602},[430,1590,1591],{"class":432,"line":135},[430,1592,697],{"emptyLinePlaceholder":696},[430,1594,1595],{"class":432,"line":157},[430,1596,1597],{"class":592},"\u002F\u002F The quiet mistake: one control imported from the core entrypoint. Same name,\n",[430,1599,1600],{"class":432,"line":161},[430,1601,1602],{"class":592},"\u002F\u002F same props, no field binding. It renders inside the form, it submits, and no\n",[430,1604,1605],{"class":432,"line":165},[430,1606,1607],{"class":592},"\u002F\u002F rule ever runs against it — there is no `rules` prop to give it.\n",[430,1609,1610,1612,1615,1617,1620],{"class":432,"line":199},[430,1611,599],{"class":598},[430,1613,1614],{"class":602}," { BbSelect } ",[430,1616,606],{"class":598},[430,1618,1619],{"class":439}," 'bitboss-ui'",[430,1621,612],{"class":602},[362,1623,1624,1625,1627,1628,1631],{},"Mixing is legitimate when it is deliberate — a display-only field, a control the\nuser cannot get wrong — and the rule is simply that every field you expect to be\nchecked comes from ",[366,1626,371],{},". For a bespoke control of your own, the\n",[366,1629,1630],{},"useValidatedField"," composable is what the library's own wrappers are built on;\nit binds your control to the form the same way, so it participates in the gate\ninstead of sitting beside it.",[463,1633,1635],{"id":1634},"asterisk",[430,1636,1637],{},"Marking required fields",[362,1639,1640,1641,1644],{},"A red ",[366,1642,1643],{},"*"," beside the label of every required field is one plugin option, applied\nproject-wide:",[422,1646,1648],{"className":583,"code":1647,"language":585,"meta":380,"style":380},"\u002F\u002F nuxt.config.ts\nexport default defineNuxtConfig({\n    bitboss: { requiredAsterisk: true },\n});\n",[366,1649,1650,1655,1669,1682],{"__ignoreMap":380},[430,1651,1652],{"class":432,"line":131},[430,1653,1654],{"class":592},"\u002F\u002F nuxt.config.ts\n",[430,1656,1657,1660,1663,1666],{"class":432,"line":135},[430,1658,1659],{"class":598},"export",[430,1661,1662],{"class":598}," default",[430,1664,1665],{"class":703}," defineNuxtConfig",[430,1667,1668],{"class":435},"({\n",[430,1670,1671,1674,1677,1680],{"class":432,"line":157},[430,1672,1673],{"class":602},"    bitboss: { requiredAsterisk: ",[430,1675,1676],{"class":817},"true",[430,1678,1679],{"class":602}," }",[430,1681,489],{"class":435},[430,1683,1684,1687],{"class":432,"line":161},[430,1685,1686],{"class":435},"})",[430,1688,612],{"class":602},[362,1690,1691,1692,1694,1695,1699,1700,1536,1703,1706,1707,1709,1710,1712,1713,503],{},"Every ",[366,1693,371],{}," control then renders\n",[545,1696,1697],{"href":8},[366,1698,350],{}," into its own ",[366,1701,1702],{},"#label",[366,1704,1705],{},"#legend","\nslot when the field is ",[366,1708,1526],{},", or when its ",[366,1711,488],{}," contain a literal\n",[366,1714,1526],{},[362,1716,1717,1718,1721,1722,1724],{},"Only a literal one. ",[366,1719,1720],{},"required_if"," and its relatives do not count — conditionally\nrequired is not required — and a validator function or a zod\u002Fyup schema is opaque\nto the check, so a schema-driven field that should carry the marker needs\n",[366,1723,1526],{}," set explicitly. Rules alone are not enough for the same reason: every\nother rule passes on an empty field, which is what makes \"optional, at most 280\ncharacters if filled\" expressible.",[362,1726,1727,1728,1731,1732,1734,1735,1739],{},"The marker is decoration. It is rendered ",[366,1729,1730],{},"aria-hidden",", so what tells assistive\ntechnology a field is mandatory is the ",[366,1733,1526],{}," prop, not the glyph — set both,\nand read the ",[545,1736,1737],{"href":8},[366,1738,350],{}," page before you build a\ncustom label that has to put the marker back by hand.",[1741,1742,1743],"style",{},"html pre.shiki code .soyes, html code.shiki .soyes{--shiki-default:#702C00;--shiki-dark:#FFB757}html pre.shiki code .sT6z2, html code.shiki .sT6z2{--shiki-default:#032563;--shiki-dark:#ADDCFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sLBg1, html code.shiki .sLBg1{--shiki-default:#66707B;--shiki-dark:#BDC4CC}html pre.shiki code .sHUrx, html code.shiki .sHUrx{--shiki-default:#A0111F;--shiki-dark:#FF9492}html pre.shiki code .suds8, html code.shiki .suds8{--shiki-default:#0E1116;--shiki-dark:#F0F3F6}html pre.shiki code .sKwhi, html code.shiki .sKwhi{--shiki-default:#622CBC;--shiki-dark:#DBB7FF}html pre.shiki code .s-5SL, html code.shiki .s-5SL{--shiki-default:#023B95;--shiki-dark:#91CBFF}html pre.shiki code .sne4z, html code.shiki .sne4z{--shiki-default:#024C1A;--shiki-dark:#72F088}",{"title":380,"searchDepth":157,"depth":157,"links":1745},[1746,1747,1748,1749,1750,1751,1752,1753],{"id":465,"depth":135,"text":468},{"id":551,"depth":135,"text":554},{"id":375,"depth":135,"text":958},{"id":1152,"depth":135,"text":1155},{"id":1231,"depth":135,"text":1234},{"id":1352,"depth":135,"text":1355},{"id":1509,"depth":135,"text":548},{"id":1634,"depth":135,"text":1637},"Validate a group of fields, submit only valid values, and control the form from inside or outside its layout.","md",{},[1758,1759,1760,1761,1762,1763,1764,1765],{"id":465,"title":468},{"id":551,"title":554},{"id":375,"title":958},{"id":1152,"title":1155},{"id":1231,"title":1234},{"id":1352,"title":1355},{"id":1509,"title":548},{"id":1634,"title":1637},{"title":197,"description":1754},"components\u002Fbb-form","Kc0Yo0wok9U7-BV3FvtDeLFNO3BYDWhcBOB7eEF_JYM",{"name":197,"slug":1770,"group":179,"description":1771,"entrypoint":371,"docs":1772,"props":1775,"models":1781,"events":1782,"slots":1786,"exposed":1790,"pt":352,"validated":352,"migration":1791},"bb-form","Form host for `bitboss-ui\u002Fvalidated`: owns the vee-validate form (useForm), validates every field on submit, and emits `submit` with the collected values only when the form is valid.",{"contract":1773,"source":1774},"ai\u002FBbForm.md","ai\u002Fsource\u002FBbForm.md",[1776],{"name":1364,"type":1777,"required":1778,"default":352,"description":1779,"note":1780,"demo":1352},"string | undefined",false,"Explicit id, so anything outside the form can read and drive it through\n`useBbFormContext(id)` — a dialog footer's submit button, a page toolbar,\na leave guard. Omit it when the form is self-contained: the slot scope\nalready carries the same state for chrome that lives inside.","`useBbFormContext(id)` reads and drives the form from a dialog footer, toolbar or leave guard. Use a unique explicit id; an auto-generated id cannot be targeted.",[],[1783],{"name":375,"signature":1784,"description":352,"note":1785,"demo":375},"(event: \"submit\", values: Record\u003Cstring, unknown>): void","Return the request promise when `isSubmitting` should cover it. Fire-and-forget or store-owned requests keep their own pending state.",[1787],{"name":465,"type":1788,"description":352,"note":1789,"demo":1231},"{ touched: boolean; dirty: boolean; valid: boolean; pending: boolean; initialValues?: Partial\u003CGenericObject> | undefined; isSubmitting: boolean; resetForm: (state?: Partial\u003CFormState\u003CGenericObject>> | undefined, opts?: Partial\u003CResetFormOpts> | undefined) => void; submitCount: number; validate: (opts?: Partial\u003CValidationOptions> | undefined) => Promise\u003CFormValidationResult\u003CGenericObject, GenericObject>>; values: GenericObject; }","`isSubmitting` covers validation and any promise returned by `@submit`; it is not a generic request store. `resetForm` restores values through the controls' bound models and clears validation metadata.",[],{"removed":1792,"renamed":1793},[],[],1790005163573]