[{"data":1,"prerenderedAt":3277},["ShallowReactive",2],{"locale-alternates":3,"docs-nav-en":134,"api-none":377,"page-en-\u002Fguides\u002Fvalidated-forms":378},{"\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-calendar":20,"\u002Fen\u002Fcomponents\u002Fbb-calendar":21,"\u002Fit\u002Fcomponenti\u002Fbb-checkbox":22,"\u002Fen\u002Fcomponents\u002Fbb-checkbox":23,"\u002Fit\u002Fcomponenti\u002Fbb-checkbox-group":24,"\u002Fen\u002Fcomponents\u002Fbb-checkbox-group":25,"\u002Fit\u002Fcomponenti\u002Fbb-collapsible":26,"\u002Fen\u002Fcomponents\u002Fbb-collapsible":27,"\u002Fit\u002Fcomponenti\u002Fbb-color-input":28,"\u002Fen\u002Fcomponents\u002Fbb-color-input":29,"\u002Fit\u002Fcomponenti\u002Fbb-color-palette":30,"\u002Fen\u002Fcomponents\u002Fbb-color-palette":31,"\u002Fit\u002Fcomponenti\u002Fbb-confirm":32,"\u002Fen\u002Fcomponents\u002Fbb-confirm":33,"\u002Fit\u002Fcomponenti\u002Fbb-date-picker":34,"\u002Fen\u002Fcomponents\u002Fbb-date-picker":35,"\u002Fit\u002Fcomponenti\u002Fbb-date-picker-input":36,"\u002Fen\u002Fcomponents\u002Fbb-date-picker-input":37,"\u002Fit\u002Fcomponenti\u002Fbb-dialog":38,"\u002Fen\u002Fcomponents\u002Fbb-dialog":39,"\u002Fit\u002Fcomponenti\u002Fbb-dropdown":40,"\u002Fen\u002Fcomponents\u002Fbb-dropdown":41,"\u002Fit\u002Fcomponenti\u002Fbb-dropdown-button":42,"\u002Fen\u002Fcomponents\u002Fbb-dropdown-button":43,"\u002Fit\u002Fcomponenti\u002Fbb-dropzone":44,"\u002Fen\u002Fcomponents\u002Fbb-dropzone":45,"\u002Fit\u002Fcomponenti\u002Fbb-form":46,"\u002Fen\u002Fcomponents\u002Fbb-form":47,"\u002Fit\u002Fcomponenti\u002Fbb-hover-card":48,"\u002Fen\u002Fcomponents\u002Fbb-hover-card":49,"\u002Fit\u002Fcomponenti\u002Fbb-icon":50,"\u002Fen\u002Fcomponents\u002Fbb-icon":51,"\u002Fit\u002Fcomponenti\u002Fbb-indicator":52,"\u002Fen\u002Fcomponents\u002Fbb-indicator":53,"\u002Fit\u002Fcomponenti\u002Fbb-number-input":54,"\u002Fen\u002Fcomponents\u002Fbb-number-input":55,"\u002Fit\u002Fcomponenti\u002Fbb-off-canvas":56,"\u002Fen\u002Fcomponents\u002Fbb-off-canvas":57,"\u002Fit\u002Fcomponenti\u002Fbb-pagination":58,"\u002Fen\u002Fcomponents\u002Fbb-pagination":59,"\u002Fit\u002Fcomponenti\u002Fbb-popover":60,"\u002Fen\u002Fcomponents\u002Fbb-popover":61,"\u002Fit\u002Fcomponenti\u002Fbb-progress":62,"\u002Fen\u002Fcomponents\u002Fbb-progress":63,"\u002Fit\u002Fcomponenti\u002Fbb-radio":64,"\u002Fen\u002Fcomponents\u002Fbb-radio":65,"\u002Fit\u002Fcomponenti\u002Fbb-radio-group":66,"\u002Fen\u002Fcomponents\u002Fbb-radio-group":67,"\u002Fit\u002Fcomponenti\u002Fbb-rating":68,"\u002Fen\u002Fcomponents\u002Fbb-rating":69,"\u002Fit\u002Fcomponenti\u002Fbb-select":70,"\u002Fen\u002Fcomponents\u002Fbb-select":71,"\u002Fit\u002Fcomponenti\u002Fbb-select-popover":72,"\u002Fen\u002Fcomponents\u002Fbb-select-popover":73,"\u002Fit\u002Fcomponenti\u002Fbb-slider":74,"\u002Fen\u002Fcomponents\u002Fbb-slider":75,"\u002Fit\u002Fcomponenti\u002Fbb-smooth-height":76,"\u002Fen\u002Fcomponents\u002Fbb-smooth-height":77,"\u002Fit\u002Fcomponenti\u002Fbb-spinner":78,"\u002Fen\u002Fcomponents\u002Fbb-spinner":79,"\u002Fit\u002Fcomponenti\u002Fbb-switch":80,"\u002Fen\u002Fcomponents\u002Fbb-switch":81,"\u002Fit\u002Fcomponenti\u002Fbb-switch-group":82,"\u002Fen\u002Fcomponents\u002Fbb-switch-group":83,"\u002Fit\u002Fcomponenti\u002Fbb-table":84,"\u002Fen\u002Fcomponents\u002Fbb-table":85,"\u002Fit\u002Fcomponenti\u002Fbb-tabs":86,"\u002Fen\u002Fcomponents\u002Fbb-tabs":87,"\u002Fit\u002Fcomponenti\u002Fbb-tag":88,"\u002Fen\u002Fcomponents\u002Fbb-tag":89,"\u002Fit\u002Fcomponenti\u002Fbb-text-input":90,"\u002Fen\u002Fcomponents\u002Fbb-text-input":91,"\u002Fit\u002Fcomponenti\u002Fbb-textarea":92,"\u002Fen\u002Fcomponents\u002Fbb-textarea":93,"\u002Fit\u002Fcomponenti\u002Fbb-time-picker":94,"\u002Fen\u002Fcomponents\u002Fbb-time-picker":95,"\u002Fit\u002Fcomponenti\u002Fbb-time-picker-input":96,"\u002Fen\u002Fcomponents\u002Fbb-time-picker-input":97,"\u002Fit\u002Fcomponenti\u002Fbb-toast":98,"\u002Fen\u002Fcomponents\u002Fbb-toast":99,"\u002Fit\u002Fcomponenti\u002Fbb-tooltip":100,"\u002Fen\u002Fcomponents\u002Fbb-tooltip":101,"\u002Fit\u002Fcomponenti\u002Fbb-tree":102,"\u002Fen\u002Fcomponents\u002Fbb-tree":103,"\u002Fit\u002Fguide\u002Fadoption-checklist":104,"\u002Fen\u002Fguides\u002Fadoption-checklist":105,"\u002Fit\u002Fguide\u002Fai-agents":106,"\u002Fen\u002Fguides\u002Fai-agents":107,"\u002Fit\u002Fguide\u002Fcoherence":108,"\u002Fen\u002Fguides\u002Fcoherence":109,"\u002Fit\u002Fguide\u002Fdesign-language":110,"\u002Fen\u002Fguides\u002Fdesign-language":111,"\u002Fit\u002Fguide\u002Fdesign-tokens":112,"\u002Fen\u002Fguides\u002Fdesign-tokens":113,"\u002Fit\u002Fguide\u002Ffetching-data":114,"\u002Fen\u002Fguides\u002Ffetching-data":115,"\u002Fit\u002Fguide\u002Ficons":116,"\u002Fen\u002Fguides\u002Ficons":117,"\u002Fit\u002Fguide\u002Finertia":118,"\u002Fen\u002Fguides\u002Finertia":119,"\u002Fit\u002Fguide\u002Finstallation":120,"\u002Fen\u002Fguides\u002Finstallation":121,"\u002Fit\u002Fguide\u002Fmigration":122,"\u002Fen\u002Fguides\u002Fmigration":123,"\u002Fit\u002Fguide\u002Fnuxt":124,"\u002Fen\u002Fguides\u002Fnuxt":125,"\u002Fit\u002Fguide\u002Foptions-and-items":126,"\u002Fen\u002Fguides\u002Foptions-and-items":127,"\u002Fit\u002Fguide\u002Fpassthrough":128,"\u002Fen\u002Fguides\u002Fpassthrough":129,"\u002Fit\u002Fguide\u002Fpreset-components":130,"\u002Fen\u002Fguides\u002Fpreset-components":131,"\u002Fit\u002Fguide\u002Fvalidated-forms":132,"\u002Fen\u002Fguides\u002Fvalidated-forms":133},"\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-calendar","\u002Fit\u002Fcomponenti\u002Fbb-calendar","\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-hover-card","\u002Fit\u002Fcomponenti\u002Fbb-hover-card","\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\u002Fadoption-checklist","\u002Fit\u002Fguide\u002Fadoption-checklist","\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\u002Fpassthrough","\u002Fit\u002Fguide\u002Fpassthrough","\u002Fen\u002Fguides\u002Fpreset-components","\u002Fit\u002Fguide\u002Fpreset-components","\u002Fen\u002Fguides\u002Fvalidated-forms","\u002Fit\u002Fguide\u002Fvalidated-forms",[135,150,162,186,198,242,275,311,332,353,365,371],{"label":136,"entries":137},"Getting started",[138,142,146],{"title":139,"path":140,"order":141},"Installation","\u002Fguides\u002Finstallation",1,{"title":143,"path":144,"order":145},"Migrating from v2","\u002Fguides\u002Fmigration",2,{"title":147,"path":148,"order":149},"Adoption checklist","\u002Fguides\u002Fadoption-checklist",3,{"label":151,"entries":152},"Design system",[153,156,159],{"title":154,"path":155,"order":141},"Design tokens","\u002Fguides\u002Fdesign-tokens",{"title":157,"path":158,"order":145},"Design language","\u002Fguides\u002Fdesign-language",{"title":160,"path":161,"order":149},"Passthrough","\u002Fguides\u002Fpassthrough",{"label":163,"entries":164},"Playbooks",[165,168,171,174,178,182],{"title":166,"path":167,"order":141},"Options and items","\u002Fguides\u002Foptions-and-items",{"title":169,"path":170,"order":145},"Fetching data","\u002Fguides\u002Ffetching-data",{"title":172,"path":173,"order":149},"Coherence","\u002Fguides\u002Fcoherence",{"title":175,"path":176,"order":177},"Validated forms","\u002Fguides\u002Fvalidated-forms",4,{"title":179,"path":180,"order":181},"Icons","\u002Fguides\u002Ficons",5,{"title":183,"path":184,"order":185},"Preset components","\u002Fguides\u002Fpreset-components",6,{"label":187,"entries":188},"Ecosystem",[189,192,195],{"title":190,"path":191,"order":141},"Inertia and Laravel","\u002Fguides\u002Finertia",{"title":193,"path":194,"order":145},"Nuxt","\u002Fguides\u002Fnuxt",{"title":196,"path":197,"order":149},"AI agents","\u002Fguides\u002Fai-agents",{"label":199,"entries":200},"Inputs",[201,204,207,210,213,216,219,222,226,230,234,238],{"title":202,"path":203,"component":202,"order":141},"BbBaseButton","\u002Fcomponents\u002Fbb-base-button",{"title":205,"path":206,"component":205,"order":145},"BbButton","\u002Fcomponents\u002Fbb-button",{"title":208,"path":209,"component":208,"order":149},"BbCalendar","\u002Fcomponents\u002Fbb-calendar",{"title":211,"path":212,"component":211,"order":149},"BbColorInput","\u002Fcomponents\u002Fbb-color-input",{"title":214,"path":215,"component":214,"order":177},"BbDatePickerInput","\u002Fcomponents\u002Fbb-date-picker-input",{"title":217,"path":218,"component":217,"order":181},"BbDropzone","\u002Fcomponents\u002Fbb-dropzone",{"title":220,"path":221,"component":220,"order":185},"BbForm","\u002Fcomponents\u002Fbb-form",{"title":223,"path":224,"component":223,"order":225},"BbNumberInput","\u002Fcomponents\u002Fbb-number-input",7,{"title":227,"path":228,"component":227,"order":229},"BbTag","\u002Fcomponents\u002Fbb-tag",8,{"title":231,"path":232,"component":231,"order":233},"BbTextarea","\u002Fcomponents\u002Fbb-textarea",9,{"title":235,"path":236,"component":235,"order":237},"BbTextInput","\u002Fcomponents\u002Fbb-text-input",10,{"title":239,"path":240,"component":239,"order":241},"BbTimePickerInput","\u002Fcomponents\u002Fbb-time-picker-input",11,{"label":243,"entries":244},"Selection",[245,248,251,254,257,260,263,266,269,272],{"title":246,"path":247,"component":246,"order":141},"BbCheckbox","\u002Fcomponents\u002Fbb-checkbox",{"title":249,"path":250,"component":249,"order":145},"BbCheckboxGroup","\u002Fcomponents\u002Fbb-checkbox-group",{"title":252,"path":253,"component":252,"order":149},"BbRadio","\u002Fcomponents\u002Fbb-radio",{"title":255,"path":256,"component":255,"order":177},"BbRadioGroup","\u002Fcomponents\u002Fbb-radio-group",{"title":258,"path":259,"component":258,"order":181},"BbRating","\u002Fcomponents\u002Fbb-rating",{"title":261,"path":262,"component":261,"order":185},"BbSelect","\u002Fcomponents\u002Fbb-select",{"title":264,"path":265,"component":264,"order":225},"BbSelectPopover","\u002Fcomponents\u002Fbb-select-popover",{"title":267,"path":268,"component":267,"order":229},"BbSlider","\u002Fcomponents\u002Fbb-slider",{"title":270,"path":271,"component":270,"order":233},"BbSwitch","\u002Fcomponents\u002Fbb-switch",{"title":273,"path":274,"component":273,"order":237},"BbSwitchGroup","\u002Fcomponents\u002Fbb-switch-group",{"label":276,"entries":277},"Overlay",[278,281,284,287,290,293,296,299,302,305,308],{"title":279,"path":280,"component":279,"order":141},"BbColorPalette","\u002Fcomponents\u002Fbb-color-palette",{"title":282,"path":283,"component":282,"order":145},"BbConfirm","\u002Fcomponents\u002Fbb-confirm",{"title":285,"path":286,"component":285,"order":149},"BbDatePicker","\u002Fcomponents\u002Fbb-date-picker",{"title":288,"path":289,"component":288,"order":177},"BbDialog","\u002Fcomponents\u002Fbb-dialog",{"title":291,"path":292,"component":291,"order":181},"BbDropdown","\u002Fcomponents\u002Fbb-dropdown",{"title":294,"path":295,"component":294,"order":185},"BbDropdownButton","\u002Fcomponents\u002Fbb-dropdown-button",{"title":297,"path":298,"component":297,"order":225},"BbHoverCard","\u002Fcomponents\u002Fbb-hover-card",{"title":300,"path":301,"component":300,"order":225},"BbOffCanvas","\u002Fcomponents\u002Fbb-off-canvas",{"title":303,"path":304,"component":303,"order":229},"BbPopover","\u002Fcomponents\u002Fbb-popover",{"title":306,"path":307,"component":306,"order":233},"BbTimePicker","\u002Fcomponents\u002Fbb-time-picker",{"title":309,"path":310,"component":309,"order":237},"BbTooltip","\u002Fcomponents\u002Fbb-tooltip",{"label":312,"entries":313},"Navigation",[314,317,320,323,326,329],{"title":315,"path":316,"component":315,"order":141},"BbAccordion","\u002Fcomponents\u002Fbb-accordion",{"title":318,"path":319,"component":318,"order":145},"BbBreadcrumbs","\u002Fcomponents\u002Fbb-breadcrumbs",{"title":321,"path":322,"component":321,"order":149},"BbCollapsible","\u002Fcomponents\u002Fbb-collapsible",{"title":324,"path":325,"component":324,"order":177},"BbPagination","\u002Fcomponents\u002Fbb-pagination",{"title":327,"path":328,"component":327,"order":181},"BbTabs","\u002Fcomponents\u002Fbb-tabs",{"title":330,"path":331,"component":330,"order":185},"BbTree","\u002Fcomponents\u002Fbb-tree",{"label":333,"entries":334},"Feedback",[335,338,341,344,347,350],{"title":336,"path":337,"component":336,"order":141},"BbAlert","\u002Fcomponents\u002Fbb-alert",{"title":339,"path":340,"component":339,"order":145},"BbBadge","\u002Fcomponents\u002Fbb-badge",{"title":342,"path":343,"component":342,"order":149},"BbIndicator","\u002Fcomponents\u002Fbb-indicator",{"title":345,"path":346,"component":345,"order":177},"BbProgress","\u002Fcomponents\u002Fbb-progress",{"title":348,"path":349,"component":348,"order":181},"BbSpinner","\u002Fcomponents\u002Fbb-spinner",{"title":351,"path":352,"component":351,"order":185},"BbToast","\u002Fcomponents\u002Fbb-toast",{"label":354,"entries":355},"Data Display",[356,359,362],{"title":357,"path":358,"component":357,"order":141},"BbAvatar","\u002Fcomponents\u002Fbb-avatar",{"title":360,"path":361,"component":360,"order":145},"BbIcon","\u002Fcomponents\u002Fbb-icon",{"title":363,"path":364,"component":363,"order":149},"BbTable","\u002Fcomponents\u002Fbb-table",{"label":366,"entries":367},"Layout & Utility",[368],{"title":369,"path":370,"component":369,"order":141},"BbSmoothHeight","\u002Fcomponents\u002Fbb-smooth-height",{"label":372,"entries":373},"Other",[374],{"title":375,"path":376,"component":375,"order":141},"BbAsterisk","\u002Fcomponents\u002Fbb-asterisk",null,{"id":379,"title":175,"body":380,"component":377,"description":3262,"extension":3263,"group":163,"meta":3264,"navigation":757,"order":177,"path":176,"sections":3265,"seo":3274,"stem":3275,"__hash__":3276},"docs_en\u002Fguides\u002Fvalidated-forms.md",{"type":381,"value":382,"toc":3252},"minimark",[383,412,445,453,461,474,520,538,576,625,630,637,1007,1026,1047,1064,1069,1081,1436,1450,1541,1594,1626,1635,1649,1655,1669,1673,1707,1761,1777,1787,1814,1820,1834,1837,1927,1934,1948,1980,1985,1991,2028,2035,2189,2426,2819,2849,2860,2867,2872,2886,2910,2913,2942,2948,2960,3028,3031,3104,3114,3126,3142,3148,3157,3171,3210,3242,3248],[384,385,386,387,393,394,397,398,401,402,405,406,408,409,411],"p",{},"Wrap the form controls in a ",[388,389,390],"a",{"href":46},[391,392,220],"code",{}," and each one\njoins it. Its value is submitted and reset with the form, counted in ",[391,395,396],{},"dirty","\nand checked against its ",[391,399,400],{},"rules"," or the form's ",[391,403,404],{},"schema",". Outside a ",[391,407,220],{}," the\nsame controls are plain, and ",[391,410,400],{}," do nothing.",[384,413,414,420,421,423,424,426,427,430,431,435,436,439,440,444],{},[415,416,417,419],"strong",{},[391,418,220],{}," validates only what you give it."," With no ",[391,422,404],{}," and no ",[391,425,400],{},"\nit checks nothing on the client: ",[391,428,429],{},"@submit"," always fires and the server decides\n(",[388,432,434],{"href":433},"#server","Server errors","). A control's ",[391,437,438],{},"required"," is a hint, never a check: it\nshows the ",[388,441,443],{"href":442},"#asterisk","asterisk"," and tells assistive technology, and an empty\nfield still submits.",[384,446,447,448,452],{},"This page is the setup around the form. The ",[388,449,450],{"href":46},[391,451,220],{},"\npage covers the form itself: schemas, edit forms, rows, steps and driving it\nfrom outside.",[454,455,457],"h2",{"id":456},"setup",[458,459,460],"span",{},"Install, then wrap the fields",[384,462,463,464,467,468,470,471,473],{},"Install the ",[391,465,466],{},"vee-validate"," peer. An app that renders no ",[391,469,220],{}," needs none of\nit, and a build that uses ",[391,472,220],{}," without it fails with the install command.",[475,476,481],"pre",{"className":477,"code":478,"language":479,"meta":480,"style":480},"language-bash shiki shiki-themes github-light-high-contrast github-dark-high-contrast","# the peer BbForm needs (>=4.10 \u003C5)\nnpm i vee-validate\n# only for string rules\nnpm i @vee-validate\u002Frules @vee-validate\u002Fi18n\n","bash","",[391,482,483,490,503,508],{"__ignoreMap":480},[458,484,486],{"class":485,"line":141},"line",[458,487,489],{"class":488},"sLBg1","# the peer BbForm needs (>=4.10 \u003C5)\n",[458,491,492,496,500],{"class":485,"line":145},[458,493,495],{"class":494},"soyes","npm",[458,497,499],{"class":498},"sT6z2"," i",[458,501,502],{"class":498}," vee-validate\n",[458,504,505],{"class":485,"line":149},[458,506,507],{"class":488},"# only for string rules\n",[458,509,510,512,514,517],{"class":485,"line":177},[458,511,495],{"class":494},[458,513,499],{"class":498},[458,515,516],{"class":498}," @vee-validate\u002Frules",[458,518,519],{"class":498}," @vee-validate\u002Fi18n\n",[384,521,522,523,526,527,529,530,533,534,537],{},"Everything comes from ",[391,524,525],{},"bitboss-ui",": ",[391,528,220],{},", the controls, ",[391,531,532],{},"useBbFormContext","\nand ",[391,535,536],{},"useBbFormField",". Sixteen controls join a form by themselves:",[384,539,540,542,543,542,545,542,547,542,549,542,551,553,554,542,556,542,558,542,560,542,562,553,564,542,566,542,568,542,570,572,573,575],{},[391,541,235],{},", ",[391,544,223],{},[391,546,231],{},[391,548,261],{},[391,550,227],{},[391,552,246],{},",\n",[391,555,249],{},[391,557,270],{},[391,559,273],{},[391,561,255],{},[391,563,258],{},[391,565,267],{},[391,567,214],{},[391,569,239],{},[391,571,211],{}," and\n",[391,574,217],{},".",[577,578,579,594,616],"ul",{},[580,581,582,526,585,542,587,542,589,553,591,593],"li",{},[415,583,584],{},"Panels never join",[391,586,264],{},[391,588,285],{},[391,590,306],{},[391,592,279],{},". Use their field twins in a form.",[580,595,596,604,605,607,608,610,611,575],{},[415,597,598,600,601,603],{},[391,599,252],{}," and ",[391,602,208],{}," do not join either."," Validate a choice with\n",[391,606,255],{}," and a date with ",[391,609,214],{},", or bind them with\n",[388,612,614],{"href":613},"#custom",[391,615,536],{},[580,617,618,624],{},[415,619,620,623],{},[391,621,622],{},"formless"," keeps a control out",": not submitted, not reset, not checked.\nUse it for a filter or a \"show advanced\" switch that sits inside the form\nwithout joining it.",[454,626,627],{"id":400},[458,628,629],{},"Define the rules once",[384,631,632,633,636],{},"Register your rules with ",[391,634,635],{},"defineRule"," in one module, import it once in the\napp's entry file, and name them as strings on every field.",[475,638,642],{"className":639,"code":640,"language":641,"meta":480,"style":480},"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    required,\n    email,\n    min_value,\n    max_value,\n    numeric,\n    min,\n    max,\n} from '@vee-validate\u002Frules';\n\ndefineRule('required', required);\ndefineRule('email', email);\ndefineRule('min_value', min_value);\ndefineRule('max_value', max_value);\ndefineRule('numeric', numeric);\ndefineRule('min', min);\ndefineRule('max', max);\n\n\u002F\u002F Project rules use the same (value, params, ctx) signature. Like the\n\u002F\u002F built-in rules, an empty value passes: pair it with `required`.\ndefineRule('password', (v: unknown) => {\n    if (typeof v !== 'string' || v === '') return true;\n    return v.length >= 8 || 'Password must be at least 8 characters';\n});\n\nconfigure({ generateMessage: localize({ en }) });\nsetLocale('en');\n","ts",[391,643,644,649,668,682,696,703,708,713,718,723,728,733,739,752,759,774,787,800,813,826,839,852,857,863,869,900,942,967,973,978,993],{"__ignoreMap":480},[458,645,646],{"class":485,"line":141},[458,647,648],{"class":488},"\u002F\u002F app\u002Fvalidators.ts\n",[458,650,651,655,659,662,665],{"class":485,"line":145},[458,652,654],{"class":653},"sHUrx","import",[458,656,658],{"class":657},"suds8"," { configure, defineRule } ",[458,660,661],{"class":653},"from",[458,663,664],{"class":498}," 'vee-validate'",[458,666,667],{"class":657},";\n",[458,669,670,672,675,677,680],{"class":485,"line":149},[458,671,654],{"class":653},[458,673,674],{"class":657}," { localize, setLocale } ",[458,676,661],{"class":653},[458,678,679],{"class":498}," '@vee-validate\u002Fi18n'",[458,681,667],{"class":657},[458,683,684,686,689,691,694],{"class":485,"line":177},[458,685,654],{"class":653},[458,687,688],{"class":657}," en ",[458,690,661],{"class":653},[458,692,693],{"class":498}," '@vee-validate\u002Fi18n\u002Fdist\u002Flocale\u002Fen.json'",[458,695,667],{"class":657},[458,697,698,700],{"class":485,"line":181},[458,699,654],{"class":653},[458,701,702],{"class":657}," {\n",[458,704,705],{"class":485,"line":185},[458,706,707],{"class":657},"    required,\n",[458,709,710],{"class":485,"line":225},[458,711,712],{"class":657},"    email,\n",[458,714,715],{"class":485,"line":229},[458,716,717],{"class":657},"    min_value,\n",[458,719,720],{"class":485,"line":233},[458,721,722],{"class":657},"    max_value,\n",[458,724,725],{"class":485,"line":237},[458,726,727],{"class":657},"    numeric,\n",[458,729,730],{"class":485,"line":241},[458,731,732],{"class":657},"    min,\n",[458,734,736],{"class":485,"line":735},12,[458,737,738],{"class":657},"    max,\n",[458,740,742,745,747,750],{"class":485,"line":741},13,[458,743,744],{"class":657},"} ",[458,746,661],{"class":653},[458,748,749],{"class":498}," '@vee-validate\u002Frules'",[458,751,667],{"class":657},[458,753,755],{"class":485,"line":754},14,[458,756,758],{"emptyLinePlaceholder":757},true,"\n",[458,760,762,765,768,771],{"class":485,"line":761},15,[458,763,635],{"class":764},"sKwhi",[458,766,767],{"class":657},"(",[458,769,770],{"class":498},"'required'",[458,772,773],{"class":657},", required);\n",[458,775,777,779,781,784],{"class":485,"line":776},16,[458,778,635],{"class":764},[458,780,767],{"class":657},[458,782,783],{"class":498},"'email'",[458,785,786],{"class":657},", email);\n",[458,788,790,792,794,797],{"class":485,"line":789},17,[458,791,635],{"class":764},[458,793,767],{"class":657},[458,795,796],{"class":498},"'min_value'",[458,798,799],{"class":657},", min_value);\n",[458,801,803,805,807,810],{"class":485,"line":802},18,[458,804,635],{"class":764},[458,806,767],{"class":657},[458,808,809],{"class":498},"'max_value'",[458,811,812],{"class":657},", max_value);\n",[458,814,816,818,820,823],{"class":485,"line":815},19,[458,817,635],{"class":764},[458,819,767],{"class":657},[458,821,822],{"class":498},"'numeric'",[458,824,825],{"class":657},", numeric);\n",[458,827,829,831,833,836],{"class":485,"line":828},20,[458,830,635],{"class":764},[458,832,767],{"class":657},[458,834,835],{"class":498},"'min'",[458,837,838],{"class":657},", min);\n",[458,840,842,844,846,849],{"class":485,"line":841},21,[458,843,635],{"class":764},[458,845,767],{"class":657},[458,847,848],{"class":498},"'max'",[458,850,851],{"class":657},", max);\n",[458,853,855],{"class":485,"line":854},22,[458,856,758],{"emptyLinePlaceholder":757},[458,858,860],{"class":485,"line":859},23,[458,861,862],{"class":488},"\u002F\u002F Project rules use the same (value, params, ctx) signature. Like the\n",[458,864,866],{"class":485,"line":865},24,[458,867,868],{"class":488},"\u002F\u002F built-in rules, an empty value passes: pair it with `required`.\n",[458,870,872,874,876,879,882,885,888,892,895,898],{"class":485,"line":871},25,[458,873,635],{"class":764},[458,875,767],{"class":657},[458,877,878],{"class":498},"'password'",[458,880,881],{"class":657},", (",[458,883,884],{"class":494},"v",[458,886,887],{"class":653},":",[458,889,891],{"class":890},"s-5SL"," unknown",[458,893,894],{"class":657},") ",[458,896,897],{"class":653},"=>",[458,899,702],{"class":657},[458,901,903,906,909,912,915,918,921,924,926,929,932,934,937,940],{"class":485,"line":902},26,[458,904,905],{"class":653},"    if",[458,907,908],{"class":657}," (",[458,910,911],{"class":653},"typeof",[458,913,914],{"class":657}," v ",[458,916,917],{"class":653},"!==",[458,919,920],{"class":498}," 'string'",[458,922,923],{"class":653}," ||",[458,925,914],{"class":657},[458,927,928],{"class":653},"===",[458,930,931],{"class":498}," ''",[458,933,894],{"class":657},[458,935,936],{"class":653},"return",[458,938,939],{"class":890}," true",[458,941,667],{"class":657},[458,943,945,948,951,954,957,960,962,965],{"class":485,"line":944},27,[458,946,947],{"class":653},"    return",[458,949,950],{"class":657}," v.",[458,952,953],{"class":890},"length",[458,955,956],{"class":653}," >=",[458,958,959],{"class":890}," 8",[458,961,923],{"class":653},[458,963,964],{"class":498}," 'Password must be at least 8 characters'",[458,966,667],{"class":657},[458,968,970],{"class":485,"line":969},28,[458,971,972],{"class":657},"});\n",[458,974,976],{"class":485,"line":975},29,[458,977,758],{"emptyLinePlaceholder":757},[458,979,981,984,987,990],{"class":485,"line":980},30,[458,982,983],{"class":764},"configure",[458,985,986],{"class":657},"({ generateMessage: ",[458,988,989],{"class":764},"localize",[458,991,992],{"class":657},"({ en }) });\n",[458,994,996,999,1001,1004],{"class":485,"line":995},31,[458,997,998],{"class":764},"setLocale",[458,1000,767],{"class":657},[458,1002,1003],{"class":498},"'en'",[458,1005,1006],{"class":657},");\n",[475,1008,1010],{"className":639,"code":1009,"language":641,"meta":480,"style":480},"\u002F\u002F main.ts: imported once, for its side effects\nimport '.\u002Fapp\u002Fvalidators';\n",[391,1011,1012,1017],{"__ignoreMap":480},[458,1013,1014],{"class":485,"line":141},[458,1015,1016],{"class":488},"\u002F\u002F main.ts: imported once, for its side effects\n",[458,1018,1019,1021,1024],{"class":485,"line":145},[458,1020,654],{"class":653},[458,1022,1023],{"class":498}," '.\u002Fapp\u002Fvalidators'",[458,1025,667],{"class":657},[384,1027,1028,1029,1032,1033,1035,1036,1039,1040,1043,1044,575],{},"A page then writes ",[391,1030,1031],{},"rules=\"required|email\""," and never imports ",[391,1034,466],{},".\n",[391,1037,1038],{},"npx bitboss-ui check"," flags a string rule the project never registers\n(",[391,1041,1042],{},"unregistered-rule","). For a one-off check that is not worth a name, a function\nworks inline: ",[391,1045,1046],{},":rules=\"(v) => Number(v) % 5 === 0 || 'In blocks of five.'\"",[1048,1049,1050],"note",{},[384,1051,1052,1053,1056,1057,1060,1061,1063],{},"vee-validate's i18n is a ",[415,1054,1055],{},"separate registry"," from the library's own ",[391,1058,1059],{},"locale",".\nThey share no keys and there is no automatic bridge. Register a message locale\nfor every language you support. If the app switches language at runtime, call\n",[391,1062,998],{}," yourself in step with it.",[454,1065,1066],{"id":404},[458,1067,1068],{},"Or one schema for the whole form",[384,1070,1071,1072,1074,1075,1077,1078,1080],{},"If your app already describes its data with Zod, Valibot, ArkType or Yup, pass\nthat schema to ",[391,1073,220],{},"'s ",[391,1076,404],{}," and write no ",[391,1079,400],{}," at all.",[475,1082,1086],{"className":1083,"code":1084,"language":1085,"meta":480,"style":480},"language-vue shiki shiki-themes github-light-high-contrast github-dark-high-contrast","\u003Cscript setup lang=\"ts\">\nimport { z } from 'zod';\nimport { BbButton, BbForm, BbTextInput } from 'bitboss-ui';\n\nconst signup = z.object({\n    email: z.email('Enter a valid email address.'),\n    address: z.object({\n        city: z.string('Enter a city.').trim().min(1, 'Enter a city.'),\n    }),\n});\n\nconst save = async (values: z.output\u003Ctypeof signup>) => { \u002F* … *\u002F };\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n    \u003CBbForm :schema=\"signup\" @submit=\"save\">\n        \u003CBbTextInput label=\"Email\" name=\"email\" type=\"email\" \u002F>\n        \u003CBbTextInput label=\"City\" name=\"address[city]\" \u002F>\n        \u003CBbButton type=\"submit\">Save\u003C\u002FBbButton>\n    \u003C\u002FBbForm>\n\u003C\u002Ftemplate>\n","vue",[391,1087,1088,1112,1126,1140,1144,1164,1180,1189,1225,1230,1234,1238,1283,1292,1296,1305,1344,1377,1399,1419,1428],{"__ignoreMap":480},[458,1089,1090,1093,1097,1100,1103,1106,1109],{"class":485,"line":141},[458,1091,1092],{"class":657},"\u003C",[458,1094,1096],{"class":1095},"sne4z","script",[458,1098,1099],{"class":890}," setup",[458,1101,1102],{"class":890}," lang",[458,1104,1105],{"class":657},"=",[458,1107,1108],{"class":498},"\"ts\"",[458,1110,1111],{"class":657},">\n",[458,1113,1114,1116,1119,1121,1124],{"class":485,"line":145},[458,1115,654],{"class":653},[458,1117,1118],{"class":657}," { z } ",[458,1120,661],{"class":653},[458,1122,1123],{"class":498}," 'zod'",[458,1125,667],{"class":657},[458,1127,1128,1130,1133,1135,1138],{"class":485,"line":149},[458,1129,654],{"class":653},[458,1131,1132],{"class":657}," { BbButton, BbForm, BbTextInput } ",[458,1134,661],{"class":653},[458,1136,1137],{"class":498}," 'bitboss-ui'",[458,1139,667],{"class":657},[458,1141,1142],{"class":485,"line":177},[458,1143,758],{"emptyLinePlaceholder":757},[458,1145,1146,1149,1152,1155,1158,1161],{"class":485,"line":181},[458,1147,1148],{"class":653},"const",[458,1150,1151],{"class":890}," signup",[458,1153,1154],{"class":653}," =",[458,1156,1157],{"class":657}," z.",[458,1159,1160],{"class":764},"object",[458,1162,1163],{"class":657},"({\n",[458,1165,1166,1169,1172,1174,1177],{"class":485,"line":185},[458,1167,1168],{"class":657},"    email: z.",[458,1170,1171],{"class":764},"email",[458,1173,767],{"class":657},[458,1175,1176],{"class":498},"'Enter a valid email address.'",[458,1178,1179],{"class":657},"),\n",[458,1181,1182,1185,1187],{"class":485,"line":225},[458,1183,1184],{"class":657},"    address: z.",[458,1186,1160],{"class":764},[458,1188,1163],{"class":657},[458,1190,1191,1194,1197,1199,1202,1205,1208,1211,1214,1216,1219,1221,1223],{"class":485,"line":229},[458,1192,1193],{"class":657},"        city: z.",[458,1195,1196],{"class":764},"string",[458,1198,767],{"class":657},[458,1200,1201],{"class":498},"'Enter a city.'",[458,1203,1204],{"class":657},").",[458,1206,1207],{"class":764},"trim",[458,1209,1210],{"class":657},"().",[458,1212,1213],{"class":764},"min",[458,1215,767],{"class":657},[458,1217,1218],{"class":890},"1",[458,1220,542],{"class":657},[458,1222,1201],{"class":498},[458,1224,1179],{"class":657},[458,1226,1227],{"class":485,"line":233},[458,1228,1229],{"class":657},"    }),\n",[458,1231,1232],{"class":485,"line":237},[458,1233,972],{"class":657},[458,1235,1236],{"class":485,"line":241},[458,1237,758],{"emptyLinePlaceholder":757},[458,1239,1240,1242,1245,1247,1250,1252,1255,1257,1260,1262,1265,1267,1269,1272,1274,1277,1280],{"class":485,"line":735},[458,1241,1148],{"class":653},[458,1243,1244],{"class":764}," save",[458,1246,1154],{"class":653},[458,1248,1249],{"class":653}," async",[458,1251,908],{"class":657},[458,1253,1254],{"class":494},"values",[458,1256,887],{"class":653},[458,1258,1259],{"class":494}," z",[458,1261,575],{"class":657},[458,1263,1264],{"class":494},"output",[458,1266,1092],{"class":657},[458,1268,911],{"class":653},[458,1270,1271],{"class":657}," signup>) ",[458,1273,897],{"class":653},[458,1275,1276],{"class":657}," { ",[458,1278,1279],{"class":488},"\u002F* … *\u002F",[458,1281,1282],{"class":657}," };\n",[458,1284,1285,1288,1290],{"class":485,"line":741},[458,1286,1287],{"class":657},"\u003C\u002F",[458,1289,1096],{"class":1095},[458,1291,1111],{"class":657},[458,1293,1294],{"class":485,"line":754},[458,1295,758],{"emptyLinePlaceholder":757},[458,1297,1298,1300,1303],{"class":485,"line":761},[458,1299,1092],{"class":657},[458,1301,1302],{"class":1095},"template",[458,1304,1111],{"class":657},[458,1306,1307,1310,1312,1315,1317,1319,1322,1325,1327,1330,1333,1335,1337,1340,1342],{"class":485,"line":776},[458,1308,1309],{"class":657},"    \u003C",[458,1311,220],{"class":1095},[458,1313,1314],{"class":657}," :",[458,1316,404],{"class":890},[458,1318,1105],{"class":657},[458,1320,1321],{"class":657},"\"",[458,1323,1324],{"class":657},"signup",[458,1326,1321],{"class":657},[458,1328,1329],{"class":657}," @",[458,1331,1332],{"class":890},"submit",[458,1334,1105],{"class":657},[458,1336,1321],{"class":657},[458,1338,1339],{"class":657},"save",[458,1341,1321],{"class":657},[458,1343,1111],{"class":657},[458,1345,1346,1349,1351,1354,1356,1359,1362,1364,1367,1370,1372,1374],{"class":485,"line":789},[458,1347,1348],{"class":657},"        \u003C",[458,1350,235],{"class":1095},[458,1352,1353],{"class":890}," label",[458,1355,1105],{"class":657},[458,1357,1358],{"class":498},"\"Email\"",[458,1360,1361],{"class":890}," name",[458,1363,1105],{"class":657},[458,1365,1366],{"class":498},"\"email\"",[458,1368,1369],{"class":890}," type",[458,1371,1105],{"class":657},[458,1373,1366],{"class":498},[458,1375,1376],{"class":657}," \u002F>\n",[458,1378,1379,1381,1383,1385,1387,1390,1392,1394,1397],{"class":485,"line":802},[458,1380,1348],{"class":657},[458,1382,235],{"class":1095},[458,1384,1353],{"class":890},[458,1386,1105],{"class":657},[458,1388,1389],{"class":498},"\"City\"",[458,1391,1361],{"class":890},[458,1393,1105],{"class":657},[458,1395,1396],{"class":498},"\"address[city]\"",[458,1398,1376],{"class":657},[458,1400,1401,1403,1405,1407,1409,1412,1415,1417],{"class":485,"line":815},[458,1402,1348],{"class":657},[458,1404,205],{"class":1095},[458,1406,1369],{"class":890},[458,1408,1105],{"class":657},[458,1410,1411],{"class":498},"\"submit\"",[458,1413,1414],{"class":657},">Save\u003C\u002F",[458,1416,205],{"class":1095},[458,1418,1111],{"class":657},[458,1420,1421,1424,1426],{"class":485,"line":828},[458,1422,1423],{"class":657},"    \u003C\u002F",[458,1425,220],{"class":1095},[458,1427,1111],{"class":657},[458,1429,1430,1432,1434],{"class":485,"line":841},[458,1431,1287],{"class":657},[458,1433,1302],{"class":1095},[458,1435,1111],{"class":657},[384,1437,1438,1439,1445,1446,1449],{},"Any ",[388,1440,1444],{"href":1441,"rel":1442},"https:\u002F\u002Fstandardschema.dev",[1443],"nofollow","Standard Schema"," works as it is: no\n",[391,1447,1448],{},"@vee-validate\u002Fzod",", nothing else to install. It has been checked against Zod 3.24\nand 4, Valibot 1, ArkType 2, Yup 1.7, Joi 18 and Effect Schema 3.",[1451,1452,1453,1466],"table",{},[1454,1455,1456],"thead",{},[1457,1458,1459,1463],"tr",{},[1460,1461,1462],"th",{},"Library",[1460,1464,1465],{},"Message on an emptied text field",[1467,1468,1469,1480,1490,1500,1510,1521,1531],"tbody",{},[1457,1470,1471,1475],{},[1472,1473,1474],"td",{},"Zod 4",[1472,1476,1477],{},[391,1478,1479],{},"z.string('Required').min(1, 'Required')",[1457,1481,1482,1485],{},[1472,1483,1484],{},"Zod 3",[1472,1486,1487],{},[391,1488,1489],{},"z.string({ invalid_type_error: 'Required' })",[1457,1491,1492,1495],{},[1472,1493,1494],{},"Valibot",[1472,1496,1497],{},[391,1498,1499],{},"v.pipe(v.string('Required'), v.minLength(1, 'Required'))",[1457,1501,1502,1505],{},[1472,1503,1504],{},"ArkType",[1472,1506,1507],{},[391,1508,1509],{},"type('string').configure({ message: 'Required' })",[1457,1511,1512,1515],{},[1472,1513,1514],{},"Yup 1.7+",[1472,1516,1517,1520],{},[391,1518,1519],{},".required('Required')"," already covers it",[1457,1522,1523,1526],{},[1472,1524,1525],{},"Joi",[1472,1527,1528],{},[391,1529,1530],{},".required().messages({ '*': 'Required' })",[1457,1532,1533,1536],{},[1472,1534,1535],{},"Effect",[1472,1537,1538],{},[391,1539,1540],{},"Schema.String.annotations({ message: () => 'Required' })",[577,1542,1543,1552,1557,1563,1575,1584],{},[580,1544,1545,1547,1548,1551],{},[415,1546,1484],{}," also takes ",[391,1549,1550],{},"required_error: 'Required'"," for a key that is missing.",[580,1553,1554,1556],{},[415,1555,1504],{}," gives one combined message per field and has no async checks.",[580,1558,1559,1562],{},[415,1560,1561],{},"Yup below 1.7"," has no Standard Schema: upgrade.",[580,1564,1565,1567,1568,1571,1572,1574],{},[415,1566,1525],{}," needs ",[391,1569,1570],{},".prefs({ abortEarly: false })"," to report every field. It has\nno async checks, and ",[391,1573,429],{}," is untyped.",[580,1576,1577,1579,1580,1583],{},[415,1578,1535],{}," is a Standard Schema only once wrapped:\n",[391,1581,1582],{},":schema=\"Schema.standardSchemaV1(schema)\"",". It gives one message per field.",[580,1585,1586,1589,1590,1593],{},[415,1587,1588],{},"Superstruct, TypeBox and runtypes"," have no Standard Schema. Wrap one in a\nvee-validate ",[391,1591,1592],{},"TypedSchema"," yourself, or use a library above.",[384,1595,1596,1597,1599,1600,1602,1603,1606,1607,1610,1611,1614,1615,1618,1619,1621,1622,1625],{},"An emptied ",[391,1598,235],{}," or ",[391,1601,231],{}," holds ",[391,1604,1605],{},"null",", which is why the table\nputs the message on the type. To write ",[391,1608,1609],{},"z.string().min(1, 'Required')"," instead,\nset the plugin option ",[391,1612,1613],{},"formControls: { textInputNullValue: 'string', textareaNullValue: 'string' }","\nand start your text values as ",[391,1616,1617],{},"''",". A ",[391,1620,223],{}," already holds a number:\nuse ",[391,1623,1624],{},"z.number()",", not a coercion.",[384,1627,1628,1629,1632,1633,575],{},"With a schema, set ",[391,1630,1631],{},"name"," on every field, since it is the key the schema checks,\nand declare every key you submit. Zod and Valibot drop the rest from ",[391,1634,429],{},[384,1636,1637,1638,1641,1642,1645,1646,575],{},"Seed only what you have. An object bound with ",[391,1639,1640],{},":model"," holds the loaded data\nand real defaults (a quantity of 1). Leave out what the user must choose, such\nas the terms checkbox, so its message shows. Type that object by what you seed,\nnot as the schema's output: ",[391,1643,1644],{},"terms: false"," is not ",[391,1647,1648],{},"true",[454,1650,1652],{"id":1651},"names",[458,1653,1654],{},"Field names and paths",[384,1656,1657,1658,1660,1661,1664,1665,1668],{},"A field's path is its ",[391,1659,1631],{},". Without one it is the label, slugged\n(",[391,1662,1663],{},"\"Preferred time\""," becomes ",[391,1666,1667],{},"preferredtime","), which is enough for a throwaway\nform and wrong for a real one.",[1670,1671],"demo",{"name":1672},"Guides\u002FSignupForm",[384,1674,1675,1677,1678,600,1681,1684,1685,1688,1689,1692,1693,1696,1697,1688,1700,1703,1704,1706],{},[391,1676,1631],{}," is read as a path in either spelling: ",[391,1679,1680],{},"company[name]",[391,1682,1683],{},"company.name","\nare the same field, ",[391,1686,1687],{},"lines[0][qty]"," is ",[391,1690,1691],{},"lines.0.qty",", and a trailing ",[391,1694,1695],{},"[]"," goes\n(",[391,1698,1699],{},"tags[]",[391,1701,1702],{},"tags","). The submitted values nest to match. Set ",[391,1705,1631],{}," always\nwhen:",[577,1708,1709,1723,1729,1741],{},[580,1710,1711,1714,1715,1718,1719,1722],{},[415,1712,1713],{},"the label repeats",", as in rows of a ",[391,1716,1717],{},"v-for",":\n",[391,1720,1721],{},":name=\"`attendees[${i}]`\"",";",[580,1724,1725,1728],{},[415,1726,1727],{},"the label is translated or may change."," A label-derived path moves with\nthe text, and server errors, drafts and analytics keyed by it stop matching;",[580,1730,1731,1734,1735,1737,1738,1740],{},[415,1732,1733],{},"the control has no label."," A ",[391,1736,217],{}," inside a form needs a ",[391,1739,1631],{},", or\nit throws;",[580,1742,1743,1746,1747,1750,1751,1754,1755,572,1758,575],{},[415,1744,1745],{},"the same group renders twice",", such as billing and shipping addresses.\nGive your group component a ",[391,1748,1749],{},"prefix"," prop and name its fields\n",[391,1752,1753],{},":name=\"`${prefix}[street]`\"",": the values nest as ",[391,1756,1757],{},"billing.street",[391,1759,1760],{},"shipping.street",[384,1762,1763,1765,1766,1769,1770,542,1773,1776],{},[391,1764,1631],{}," also goes on the native input, so the same field posts under it in a\nplain HTML form. For a native post to PHP or Laravel, use brackets:\n",[391,1767,1768],{},"address.city"," arrives as ",[391,1771,1772],{},"address_city",[391,1774,1775],{},"address[city]"," as a nested array.",[384,1778,1779,1780,1786],{},"Messages name a field by its label, never by its path. Set\n",[388,1781,1783],{"href":1782},"\u002Fen\u002Fcomponents\u002Fbb-number-input\u002Fapi#prop-validationLabel",[391,1784,1785],{},"validation-label","\nwhen the label is not the noun a sentence needs: above, \"How many people will\nuse it?\" reads as \"Seats must be at least 1\". A field with neither says \"This\nfield\".",[1788,1789,1791],"migration",{"title":1790},"vid → name \u002F validation-label",[384,1792,1793,1794,1797,1798,1800,1801,1803,1804,1806,1807,1809,1810,1813],{},"v2's ",[391,1795,1796],{},"vid"," named the field in messages: that is ",[391,1799,1785],{}," now. Where\n",[391,1802,1796],{}," set the field's key, write ",[391,1805,1631],{}," with the same value. A leftover ",[391,1808,1796],{},"\nhas no effect at runtime and a development build warns; ",[391,1811,1812],{},"npx bitboss-ui check --fix"," rewrites each one by its value.",[454,1815,1817],{"id":1816},"modes",[458,1818,1819],{},"When a field checks itself",[384,1821,1822,1823,1829,1830,1833],{},"Every control follows one\n",[388,1824,1826],{"href":1825},"\u002Fen\u002Fcomponents\u002Fbb-form\u002Fapi#prop-validationMode",[391,1827,1828],{},"validation-mode",", and the\ndefault, ",[391,1831,1832],{},"balanced",", suits most forms. Pick a mode and try it on the fields\nbelow.",[1670,1835],{"name":1836},"GuidesForms\u002FValidationModes",[1451,1838,1839,1855],{},[1454,1840,1841],{},[1457,1842,1843,1846,1849,1852],{},[1460,1844,1845],{},"Mode",[1460,1847,1848],{},"First check",[1460,1850,1851],{},"While it shows an error",[1460,1853,1854],{},"Once fixed",[1467,1856,1857,1872,1885,1899,1913],{},[1457,1858,1859,1863,1866,1869],{},[1472,1860,1861],{},[391,1862,1832],{},[1472,1864,1865],{},"leave",[1472,1867,1868],{},"every change",[1472,1870,1871],{},"waits for leave",[1457,1873,1874,1879,1881,1883],{},[1472,1875,1876],{},[391,1877,1878],{},"aggressive",[1472,1880,1868],{},[1472,1882,1868],{},[1472,1884,1868],{},[1457,1886,1887,1892,1894,1897],{},[1472,1888,1889],{},[391,1890,1891],{},"lazy",[1472,1893,1865],{},[1472,1895,1896],{},"leave only",[1472,1898,1865],{},[1457,1900,1901,1906,1908,1911],{},[1472,1902,1903],{},[391,1904,1905],{},"submit-only",[1472,1907,1332],{},[1472,1909,1910],{},"the next submit",[1472,1912,1910],{},[1457,1914,1915,1920,1922,1924],{},[1472,1916,1917],{},[391,1918,1919],{},"submit-live",[1472,1921,1332],{},[1472,1923,1868],{},[1472,1925,1926],{},"quiet until the next submit",[384,1928,1929,1930,600,1932,575],{},"Leaving the field means blur for a text-like control, and focus leaving the\nwhole control for a picker or a group. A checkbox or switch click counts as the\nchange and the leave at once. Whatever the mode, a failed submit checks every\nfield. When the page writes a value itself, a field that shows an error is\nchecked again, except in ",[391,1931,1891],{},[391,1933,1905],{},[384,1935,1936,1937,1939,1940,1943,1944,1947],{},"Set the mode on one field, on the whole ",[391,1938,220],{},"\n(",[391,1941,1942],{},"validation-mode=\"submit-live\"","), or app-wide with the plugin option\n",[391,1945,1946],{},"formControls: { validationMode: 'lazy' }",". The field's own wins, then the\nform's.",[577,1949,1950,1957,1966,1973],{},[580,1951,1952,1956],{},[415,1953,1954],{},[391,1955,1832],{}," for most forms.",[580,1958,1959,1965],{},[415,1960,1961,1599,1963],{},[391,1962,1905],{},[391,1964,1919],{}," for long forms that should not nag while\nthey are being filled in.",[580,1967,1968,1972],{},[415,1969,1970],{},[391,1971,1891],{}," for expensive async checks, such as \"is this username free\".",[580,1974,1975,1979],{},[415,1976,1977],{},[391,1978,1878],{}," only on purpose: it flags half-typed values.",[454,1981,1983],{"id":1982},"server",[458,1984,434],{},[384,1986,1987,1988,1990],{},"Two ways to hand a server's validation errors to the form. Both take paths as\nfield ",[391,1989,1631],{},"s, with dots or brackets.",[577,1992,1993,2009],{},[580,1994,1995,2000,2001,2004,2005,2008],{},[415,1996,1997],{},[391,1998,1999],{},":field-errors=\"errors\""," when something on the page already holds them:\nInertia's ",[391,2002,2003],{},"form.errors",", Precognition's, a ",[391,2006,2007],{},"ref"," you fill from a 422. A\nmessage shows while it is in the object, so the provider clears it, not the\nform. It never blocks a submit.",[580,2010,2011,2016,2017,2020,2021,2023,2024,2027],{},[415,2012,2013],{},[391,2014,2015],{},"setErrors(errors)"," for a one-off answer. Call it on\n",[391,2018,2019],{},"useBbFormContext(id)"," or from the ",[391,2022,220],{}," slot. It takes\n",[391,2025,2026],{},"{ path: string | string[] }",", and the form drops a message when the user\nedits its field.",[384,2029,2030,2031,2034],{},"Each message lands on its field, and focus moves to the first one that failed.\nA key no field owns goes to ",[391,2032,2033],{},"unmatchedErrors",": render it yourself.",[1451,2036,2037,2050],{},[1454,2038,2039],{},[1457,2040,2041,2044,2047],{},[1460,2042,2043],{},"Source",[1460,2045,2046],{},"Its errors",[1460,2048,2049],{},"Into the form",[1467,2051,2052,2070,2085,2103,2124,2139,2155,2173],{},[1457,2053,2054,2057,2065],{},[1472,2055,2056],{},"Inertia visit",[1472,2058,2059,542,2062],{},[391,2060,2061],{},"$page.props.errors",[391,2063,2064],{},"{ key: string }",[1472,2066,2067],{},[391,2068,2069],{},":field-errors=\"$page.props.errors\"",[1457,2071,2072,2075,2080],{},[1472,2073,2074],{},"Inertia, error bag",[1472,2076,2077],{},[391,2078,2079],{},"$page.props.errors[bag]",[1472,2081,2082],{},[391,2083,2084],{},":field-errors=\"$page.props.errors.\u003Cbag>\"",[1457,2086,2087,2093,2098],{},[1472,2088,2089,2090],{},"Inertia ",[391,2091,2092],{},"useForm",[1472,2094,2095],{},[391,2096,2097],{},"inertiaForm.errors",[1472,2099,2100],{},[391,2101,2102],{},":field-errors=\"inertiaForm.errors\"",[1457,2104,2105,2108,2116],{},[1472,2106,2107],{},"Laravel 422",[1472,2109,2110,542,2113],{},[391,2111,2112],{},"body.errors",[391,2114,2115],{},"{ key: string[] }",[1472,2117,2118,2121,2122],{},[391,2119,2120],{},"errors.value = body.errors",", then ",[391,2123,1999],{},[1457,2125,2126,2129,2134],{},[1472,2127,2128],{},"Precognition",[1472,2130,2131],{},[391,2132,2133],{},"precognitionForm.errors",[1472,2135,2136],{},[391,2137,2138],{},":field-errors=\"precognitionForm.errors\"",[1457,2140,2141,2143,2150],{},[1472,2142,466],{},[1472,2144,2145,542,2148],{},[391,2146,2147],{},"errorBag",[391,2149,2115],{},[1472,2151,2152],{},[391,2153,2154],{},"form.setErrors(errorBag.value)",[1457,2156,2157,2163,2168],{},[1472,2158,2159,2160],{},"Nuxt UI ",[391,2161,2162],{},"UForm",[1472,2164,2165],{},[391,2166,2167],{},"FormError[]",[1472,2169,2170],{},[391,2171,2172],{},"form.setErrors(byPath(list))",[1457,2174,2175,2178,2183],{},[1472,2176,2177],{},"API Platform",[1472,2179,2180],{},[391,2181,2182],{},"body.violations",[1472,2184,2185,2188],{},[391,2186,2187],{},"byPath",", see below",[475,2190,2192],{"className":1083,"code":2191,"language":1085,"meta":480,"style":480},"\u003Cscript setup lang=\"ts\">\nimport { useForm } from '@inertiajs\u002Fvue3';\nimport { BbButton, BbForm, BbTextInput } from 'bitboss-ui';\n\nconst form = useForm({ email: '', address: { city: '' } });\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n    \u003CBbForm :model=\"form\" :field-errors=\"form.errors\" @submit=\"form.post('\u002Fsignup')\">\n        \u003CBbTextInput label=\"Email\" name=\"email\" type=\"email\" \u002F>\n        \u003CBbTextInput label=\"City\" name=\"address.city\" \u002F>\n        \u003CBbButton type=\"submit\">Create account\u003C\u002FBbButton>\n    \u003C\u002FBbForm>\n\u003C\u002Ftemplate>\n",[391,2193,2194,2210,2224,2236,2240,2265,2273,2277,2285,2344,2370,2391,2410,2418],{"__ignoreMap":480},[458,2195,2196,2198,2200,2202,2204,2206,2208],{"class":485,"line":141},[458,2197,1092],{"class":657},[458,2199,1096],{"class":1095},[458,2201,1099],{"class":890},[458,2203,1102],{"class":890},[458,2205,1105],{"class":657},[458,2207,1108],{"class":498},[458,2209,1111],{"class":657},[458,2211,2212,2214,2217,2219,2222],{"class":485,"line":145},[458,2213,654],{"class":653},[458,2215,2216],{"class":657}," { useForm } ",[458,2218,661],{"class":653},[458,2220,2221],{"class":498}," '@inertiajs\u002Fvue3'",[458,2223,667],{"class":657},[458,2225,2226,2228,2230,2232,2234],{"class":485,"line":149},[458,2227,654],{"class":653},[458,2229,1132],{"class":657},[458,2231,661],{"class":653},[458,2233,1137],{"class":498},[458,2235,667],{"class":657},[458,2237,2238],{"class":485,"line":177},[458,2239,758],{"emptyLinePlaceholder":757},[458,2241,2242,2244,2247,2249,2252,2255,2257,2260,2262],{"class":485,"line":181},[458,2243,1148],{"class":653},[458,2245,2246],{"class":890}," form",[458,2248,1154],{"class":653},[458,2250,2251],{"class":764}," useForm",[458,2253,2254],{"class":657},"({ email: ",[458,2256,1617],{"class":498},[458,2258,2259],{"class":657},", address: { city: ",[458,2261,1617],{"class":498},[458,2263,2264],{"class":657}," } });\n",[458,2266,2267,2269,2271],{"class":485,"line":185},[458,2268,1287],{"class":657},[458,2270,1096],{"class":1095},[458,2272,1111],{"class":657},[458,2274,2275],{"class":485,"line":225},[458,2276,758],{"emptyLinePlaceholder":757},[458,2278,2279,2281,2283],{"class":485,"line":229},[458,2280,1092],{"class":657},[458,2282,1302],{"class":1095},[458,2284,1111],{"class":657},[458,2286,2287,2289,2291,2293,2296,2298,2300,2303,2305,2307,2310,2312,2314,2316,2318,2320,2322,2324,2326,2329,2332,2334,2337,2340,2342],{"class":485,"line":233},[458,2288,1309],{"class":657},[458,2290,220],{"class":1095},[458,2292,1314],{"class":657},[458,2294,2295],{"class":890},"model",[458,2297,1105],{"class":657},[458,2299,1321],{"class":657},[458,2301,2302],{"class":657},"form",[458,2304,1321],{"class":657},[458,2306,1314],{"class":657},[458,2308,2309],{"class":890},"field-errors",[458,2311,1105],{"class":657},[458,2313,1321],{"class":657},[458,2315,2003],{"class":657},[458,2317,1321],{"class":657},[458,2319,1329],{"class":657},[458,2321,1332],{"class":890},[458,2323,1105],{"class":657},[458,2325,1321],{"class":657},[458,2327,2328],{"class":657},"form.",[458,2330,2331],{"class":764},"post",[458,2333,767],{"class":657},[458,2335,2336],{"class":498},"'\u002Fsignup'",[458,2338,2339],{"class":657},")",[458,2341,1321],{"class":657},[458,2343,1111],{"class":657},[458,2345,2346,2348,2350,2352,2354,2356,2358,2360,2362,2364,2366,2368],{"class":485,"line":237},[458,2347,1348],{"class":657},[458,2349,235],{"class":1095},[458,2351,1353],{"class":890},[458,2353,1105],{"class":657},[458,2355,1358],{"class":498},[458,2357,1361],{"class":890},[458,2359,1105],{"class":657},[458,2361,1366],{"class":498},[458,2363,1369],{"class":890},[458,2365,1105],{"class":657},[458,2367,1366],{"class":498},[458,2369,1376],{"class":657},[458,2371,2372,2374,2376,2378,2380,2382,2384,2386,2389],{"class":485,"line":241},[458,2373,1348],{"class":657},[458,2375,235],{"class":1095},[458,2377,1353],{"class":890},[458,2379,1105],{"class":657},[458,2381,1389],{"class":498},[458,2383,1361],{"class":890},[458,2385,1105],{"class":657},[458,2387,2388],{"class":498},"\"address.city\"",[458,2390,1376],{"class":657},[458,2392,2393,2395,2397,2399,2401,2403,2406,2408],{"class":485,"line":735},[458,2394,1348],{"class":657},[458,2396,205],{"class":1095},[458,2398,1369],{"class":890},[458,2400,1105],{"class":657},[458,2402,1411],{"class":498},[458,2404,2405],{"class":657},">Create account\u003C\u002F",[458,2407,205],{"class":1095},[458,2409,1111],{"class":657},[458,2411,2412,2414,2416],{"class":485,"line":741},[458,2413,1423],{"class":657},[458,2415,220],{"class":1095},[458,2417,1111],{"class":657},[458,2419,2420,2422,2424],{"class":485,"line":754},[458,2421,1287],{"class":657},[458,2423,1302],{"class":1095},[458,2425,1111],{"class":657},[475,2427,2429],{"className":639,"code":2428,"language":641,"meta":480,"style":480},"\u002F\u002F fetch or axios, a Laravel 422: keep the answer in a ref\nconst errors = ref\u003CRecord\u003Cstring, string[]> | null>(null);\n\nasync function save(values: Record\u003Cstring, unknown>) {\n    errors.value = null;\n    const response = await fetch('\u002Fapi\u002Fsignup', {\n        method: 'POST',\n        body: JSON.stringify(values),\n    });\n    if (response.status === 422) errors.value = (await response.json()).errors;\n}\n\n\u002F\u002F Nuxt UI FormError[] and API Platform violations: group by path\nconst byPath = (list: { name?: string; message: string }[]) =>\n    list.reduce\u003CRecord\u003Cstring, string[]>>((map, { name, message }) => {\n        (map[name || '_request'] ??= []).push(message);\n        return map;\n    }, {});\nform.setErrors(byPath(formErrors));\nform.setErrors(\n    byPath(\n        body.violations.map((v) => ({\n            name: v.propertyPath,\n            message: v.message,\n        })),\n    ),\n);\n",[391,2430,2431,2436,2477,2481,2512,2523,2547,2557,2573,2578,2609,2614,2618,2623,2665,2707,2733,2741,2746,2760,2769,2776,2795,2800,2805,2810,2815],{"__ignoreMap":480},[458,2432,2433],{"class":485,"line":141},[458,2434,2435],{"class":488},"\u002F\u002F fetch or axios, a Laravel 422: keep the answer in a ref\n",[458,2437,2438,2440,2443,2445,2448,2450,2453,2455,2457,2459,2461,2464,2467,2470,2473,2475],{"class":485,"line":145},[458,2439,1148],{"class":653},[458,2441,2442],{"class":890}," errors",[458,2444,1154],{"class":653},[458,2446,2447],{"class":764}," ref",[458,2449,1092],{"class":657},[458,2451,2452],{"class":494},"Record",[458,2454,1092],{"class":657},[458,2456,1196],{"class":890},[458,2458,542],{"class":657},[458,2460,1196],{"class":890},[458,2462,2463],{"class":657},"[]> ",[458,2465,2466],{"class":653},"|",[458,2468,2469],{"class":890}," null",[458,2471,2472],{"class":657},">(",[458,2474,1605],{"class":890},[458,2476,1006],{"class":657},[458,2478,2479],{"class":485,"line":149},[458,2480,758],{"emptyLinePlaceholder":757},[458,2482,2483,2486,2489,2491,2493,2495,2497,2500,2502,2504,2506,2509],{"class":485,"line":177},[458,2484,2485],{"class":653},"async",[458,2487,2488],{"class":653}," function",[458,2490,1244],{"class":764},[458,2492,767],{"class":657},[458,2494,1254],{"class":494},[458,2496,887],{"class":653},[458,2498,2499],{"class":494}," Record",[458,2501,1092],{"class":657},[458,2503,1196],{"class":890},[458,2505,542],{"class":657},[458,2507,2508],{"class":890},"unknown",[458,2510,2511],{"class":657},">) {\n",[458,2513,2514,2517,2519,2521],{"class":485,"line":181},[458,2515,2516],{"class":657},"    errors.value ",[458,2518,1105],{"class":653},[458,2520,2469],{"class":890},[458,2522,667],{"class":657},[458,2524,2525,2528,2531,2533,2536,2539,2541,2544],{"class":485,"line":185},[458,2526,2527],{"class":653},"    const",[458,2529,2530],{"class":890}," response",[458,2532,1154],{"class":653},[458,2534,2535],{"class":653}," await",[458,2537,2538],{"class":764}," fetch",[458,2540,767],{"class":657},[458,2542,2543],{"class":498},"'\u002Fapi\u002Fsignup'",[458,2545,2546],{"class":657},", {\n",[458,2548,2549,2552,2555],{"class":485,"line":225},[458,2550,2551],{"class":657},"        method: ",[458,2553,2554],{"class":498},"'POST'",[458,2556,553],{"class":657},[458,2558,2559,2562,2565,2567,2570],{"class":485,"line":229},[458,2560,2561],{"class":657},"        body: ",[458,2563,2564],{"class":890},"JSON",[458,2566,575],{"class":657},[458,2568,2569],{"class":764},"stringify",[458,2571,2572],{"class":657},"(values),\n",[458,2574,2575],{"class":485,"line":233},[458,2576,2577],{"class":657},"    });\n",[458,2579,2580,2582,2585,2587,2590,2593,2595,2597,2600,2603,2606],{"class":485,"line":237},[458,2581,905],{"class":653},[458,2583,2584],{"class":657}," (response.status ",[458,2586,928],{"class":653},[458,2588,2589],{"class":890}," 422",[458,2591,2592],{"class":657},") errors.value ",[458,2594,1105],{"class":653},[458,2596,908],{"class":657},[458,2598,2599],{"class":653},"await",[458,2601,2602],{"class":657}," response.",[458,2604,2605],{"class":764},"json",[458,2607,2608],{"class":657},"()).errors;\n",[458,2610,2611],{"class":485,"line":241},[458,2612,2613],{"class":657},"}\n",[458,2615,2616],{"class":485,"line":735},[458,2617,758],{"emptyLinePlaceholder":757},[458,2619,2620],{"class":485,"line":741},[458,2621,2622],{"class":488},"\u002F\u002F Nuxt UI FormError[] and API Platform violations: group by path\n",[458,2624,2625,2627,2630,2632,2634,2637,2639,2641,2643,2646,2649,2652,2655,2657,2659,2662],{"class":485,"line":754},[458,2626,1148],{"class":653},[458,2628,2629],{"class":764}," byPath",[458,2631,1154],{"class":653},[458,2633,908],{"class":657},[458,2635,2636],{"class":494},"list",[458,2638,887],{"class":653},[458,2640,1276],{"class":657},[458,2642,1631],{"class":494},[458,2644,2645],{"class":653},"?:",[458,2647,2648],{"class":890}," string",[458,2650,2651],{"class":657},"; ",[458,2653,2654],{"class":494},"message",[458,2656,887],{"class":653},[458,2658,2648],{"class":890},[458,2660,2661],{"class":657}," }[]) ",[458,2663,2664],{"class":653},"=>\n",[458,2666,2667,2670,2673,2675,2677,2679,2681,2683,2685,2688,2691,2694,2696,2698,2700,2703,2705],{"class":485,"line":761},[458,2668,2669],{"class":657},"    list.",[458,2671,2672],{"class":764},"reduce",[458,2674,1092],{"class":657},[458,2676,2452],{"class":494},[458,2678,1092],{"class":657},[458,2680,1196],{"class":890},[458,2682,542],{"class":657},[458,2684,1196],{"class":890},[458,2686,2687],{"class":657},"[]>>((",[458,2689,2690],{"class":494},"map",[458,2692,2693],{"class":657},", { ",[458,2695,1631],{"class":494},[458,2697,542],{"class":657},[458,2699,2654],{"class":494},[458,2701,2702],{"class":657}," }) ",[458,2704,897],{"class":653},[458,2706,702],{"class":657},[458,2708,2709,2712,2715,2718,2721,2724,2727,2730],{"class":485,"line":776},[458,2710,2711],{"class":657},"        (map[name ",[458,2713,2714],{"class":653},"||",[458,2716,2717],{"class":498}," '_request'",[458,2719,2720],{"class":657},"] ",[458,2722,2723],{"class":653},"??=",[458,2725,2726],{"class":657}," []).",[458,2728,2729],{"class":764},"push",[458,2731,2732],{"class":657},"(message);\n",[458,2734,2735,2738],{"class":485,"line":789},[458,2736,2737],{"class":653},"        return",[458,2739,2740],{"class":657}," map;\n",[458,2742,2743],{"class":485,"line":802},[458,2744,2745],{"class":657},"    }, {});\n",[458,2747,2748,2750,2753,2755,2757],{"class":485,"line":815},[458,2749,2328],{"class":657},[458,2751,2752],{"class":764},"setErrors",[458,2754,767],{"class":657},[458,2756,2187],{"class":764},[458,2758,2759],{"class":657},"(formErrors));\n",[458,2761,2762,2764,2766],{"class":485,"line":828},[458,2763,2328],{"class":657},[458,2765,2752],{"class":764},[458,2767,2768],{"class":657},"(\n",[458,2770,2771,2774],{"class":485,"line":841},[458,2772,2773],{"class":764},"    byPath",[458,2775,2768],{"class":657},[458,2777,2778,2781,2783,2786,2788,2790,2792],{"class":485,"line":854},[458,2779,2780],{"class":657},"        body.violations.",[458,2782,2690],{"class":764},[458,2784,2785],{"class":657},"((",[458,2787,884],{"class":494},[458,2789,894],{"class":657},[458,2791,897],{"class":653},[458,2793,2794],{"class":657}," ({\n",[458,2796,2797],{"class":485,"line":859},[458,2798,2799],{"class":657},"            name: v.propertyPath,\n",[458,2801,2802],{"class":485,"line":865},[458,2803,2804],{"class":657},"            message: v.message,\n",[458,2806,2807],{"class":485,"line":871},[458,2808,2809],{"class":657},"        })),\n",[458,2811,2812],{"class":485,"line":902},[458,2813,2814],{"class":657},"    ),\n",[458,2816,2817],{"class":485,"line":944},[458,2818,1006],{"class":657},[577,2820,2821,2833],{},[580,2822,2823,2826,2827,2829,2830,575],{},[415,2824,2825],{},"A message about the whole request"," (a 403, a 500 text) has no path. Put it\nin the same map under a key no field uses, since each ",[391,2828,2752],{}," call\nreplaces the last: ",[391,2831,2832],{},"form.setErrors({ ...body.errors, _request: [body.message] })",[580,2834,2835,1688,2838,2841,2842,2845,2846,575],{},[415,2836,2837],{},"One summary of every error",[391,2839,2840],{},"{ ...errors, ...unmatchedErrors }",": the two\nnever share a path. ",[391,2843,2844],{},"errors.email"," is an array; read ",[391,2847,2848],{},"errors.email?.[0]",[384,2850,2851,2852,2856,2857,575],{},"A worked example is in\n",[388,2853,2855],{"href":2854},"\u002Fen\u002Fcomponents\u002Fbb-form#server-errors","BbForm → Server errors",", and the Inertia\nside in ",[388,2858,190],{"href":2859},"\u002Fen\u002Fguides\u002Finertia#forms",[384,2861,2862,2863,2866],{},"For one field's message from elsewhere, the control's own ",[391,2864,2865],{},"errors"," prop still\nworks: it is merged with the rule messages, not replaced by them.",[454,2868,2869],{"id":443},[458,2870,2871],{},"The required asterisk",[384,2873,2874,2875,2878,2879,2882,2883,2885],{},"Required fields carry a red ",[391,2876,2877],{},"*"," after the label, out of the box. The plugin\noption ",[391,2880,2881],{},"requiredAsterisk"," (default ",[391,2884,1648],{},") turns it off app-wide:",[475,2887,2889],{"className":639,"code":2888,"language":641,"meta":480,"style":480},"\u002F\u002F vite.config.ts: only to hide the marker everywhere\nbitbossUi({ requiredAsterisk: false });\n",[391,2890,2891,2896],{"__ignoreMap":480},[458,2892,2893],{"class":485,"line":141},[458,2894,2895],{"class":488},"\u002F\u002F vite.config.ts: only to hide the marker everywhere\n",[458,2897,2898,2901,2904,2907],{"class":485,"line":145},[458,2899,2900],{"class":764},"bitbossUi",[458,2902,2903],{"class":657},"({ requiredAsterisk: ",[458,2905,2906],{"class":890},"false",[458,2908,2909],{"class":657}," });\n",[1670,2911],{"name":2912},"GuidesForms\u002FRequiredMarker",[384,2914,2915,2916,2918,2919,2921,2922,2927,2928,542,2931,2934,2935,2938,2939,2941],{},"Inside a ",[391,2917,220],{}," it shows on a control whose ",[391,2920,400],{}," contain a ",[415,2923,2924,2926],{},[391,2925,438],{},"\nrule",", in the string form (",[391,2929,2930],{},"'required|email'",[391,2932,2933],{},"'required:true'",") or the object\nform (",[391,2936,2937],{},"{ required: true }","), or whose key the schema requires. Outside a form it\nfollows the ",[391,2940,438],{}," prop.",[384,2943,2944,2945,2947],{},"With a ",[391,2946,404],{},", the schema decides. A key gets the asterisk when it is not\noptional, has no default and is not nullable, and its parent object is required\ntoo. The marker follows a schema that changes per step.",[384,2949,2915,2950,2952,2953,2955,2956,2959],{},[391,2951,220],{},", the ",[391,2954,438],{}," prop is a hint. It shows the asterisk and\ntells assistive technology the field is required, and checks nothing: the form\nposts with ",[391,2957,2958],{},"novalidate"," and vee-validate never reads the attribute, so an empty\nfield submits and the server answers. That is the server-validated form:",[475,2961,2963],{"className":1083,"code":2962,"language":1085,"meta":480,"style":480},"\u003CBbForm :model=\"draft\" :field-errors=\"form.errors\" @submit=\"save\">\n    \u003C!-- the server checks it; the asterisk says so -->\n    \u003CBbTextInput name=\"email\" label=\"Email\" required \u002F>\n\u003C\u002FBbForm>\n",[391,2964,2965,3010,3015,3020],{"__ignoreMap":480},[458,2966,2967,2969,2971,2973,2975,2977,2979,2982,2984,2986,2988,2990,2992,2994,2996,2998,3000,3002,3004,3006,3008],{"class":485,"line":141},[458,2968,1092],{"class":657},[458,2970,220],{"class":1095},[458,2972,1314],{"class":657},[458,2974,2295],{"class":890},[458,2976,1105],{"class":657},[458,2978,1321],{"class":657},[458,2980,2981],{"class":657},"draft",[458,2983,1321],{"class":657},[458,2985,1314],{"class":657},[458,2987,2309],{"class":890},[458,2989,1105],{"class":657},[458,2991,1321],{"class":657},[458,2993,2003],{"class":657},[458,2995,1321],{"class":657},[458,2997,1329],{"class":657},[458,2999,1332],{"class":890},[458,3001,1105],{"class":657},[458,3003,1321],{"class":657},[458,3005,1339],{"class":657},[458,3007,1321],{"class":657},[458,3009,1111],{"class":657},[458,3011,3012],{"class":485,"line":145},[458,3013,3014],{"class":657},"    \u003C!-- the server checks it; the asterisk says so -->\n",[458,3016,3017],{"class":485,"line":149},[458,3018,3019],{"class":657},"    \u003CBbTextInput name=\"email\" label=\"Email\" required \u002F>\n",[458,3021,3022,3024,3026],{"class":485,"line":177},[458,3023,1287],{"class":657},[458,3025,220],{"class":1095},[458,3027,1111],{"class":657},[384,3029,3030],{},"To stop an empty submit on the client too, write the requirement where the\nform validates, and the asterisk follows:",[475,3032,3034],{"className":1083,"code":3033,"language":1085,"meta":480,"style":480},"\u003CBbTextInput name=\"email\" label=\"Email\" rules=\"required|email\" \u002F>\n\u003C!-- a condition goes in the rules too -->\n\u003CBbTextInput name=\"vat\" label=\"VAT number\" :rules=\"{ required: isCompany }\" \u002F>\n",[391,3035,3036,3064,3069],{"__ignoreMap":480},[458,3037,3038,3040,3042,3044,3046,3048,3050,3052,3054,3057,3059,3062],{"class":485,"line":141},[458,3039,1092],{"class":657},[458,3041,235],{"class":1095},[458,3043,1361],{"class":890},[458,3045,1105],{"class":657},[458,3047,1366],{"class":498},[458,3049,1353],{"class":890},[458,3051,1105],{"class":657},[458,3053,1358],{"class":498},[458,3055,3056],{"class":890}," rules",[458,3058,1105],{"class":657},[458,3060,3061],{"class":498},"\"required|email\"",[458,3063,1376],{"class":657},[458,3065,3066],{"class":485,"line":145},[458,3067,3068],{"class":488},"\u003C!-- a condition goes in the rules too -->\n",[458,3070,3071,3073,3075,3077,3079,3082,3084,3086,3089,3091,3093,3095,3097,3100,3102],{"class":485,"line":149},[458,3072,1092],{"class":657},[458,3074,235],{"class":1095},[458,3076,1361],{"class":890},[458,3078,1105],{"class":657},[458,3080,3081],{"class":498},"\"vat\"",[458,3083,1353],{"class":890},[458,3085,1105],{"class":657},[458,3087,3088],{"class":498},"\"VAT number\"",[458,3090,1314],{"class":657},[458,3092,400],{"class":890},[458,3094,1105],{"class":657},[458,3096,1321],{"class":657},[458,3098,3099],{"class":657},"{ required: isCompany }",[458,3101,1321],{"class":657},[458,3103,1376],{"class":657},[384,3105,3106,3107,3109,3110,3113],{},"Only ",[391,3108,438],{}," raises the marker, on purpose. Every other rule passes on an\nempty field, which is what makes \"optional, but at most 280 characters if\nfilled\" expressible. ",[391,3111,3112],{},"required_if"," and its relatives do not count either.",[384,3115,3116,3117,3119,3120,908,3122,3125],{},"A validator function is opaque to the marker: nothing can read what it does\nwith an empty value. Add the ",[391,3118,438],{}," hint beside it to mark the field, or\nmake the requirement a client check: register the function as a named rule and\nlist it after ",[391,3121,438],{},[391,3123,3124],{},"rules=\"required|vat\"","), or require the key in the\nschema.",[384,3127,3128,3129,3133,3134,3137,3138,3141],{},"The marker is ",[388,3130,3131],{"href":8},[391,3132,375],{},", rendered\n",[391,3135,3136],{},"aria-hidden","; drop it into a label you build yourself. Inside a form, a field\nits rules or schema require gets ",[391,3139,3140],{},"aria-required"," by itself, so assistive\ntechnology announces it.",[454,3143,3145],{"id":3144},"custom",[458,3146,3147],{},"A control of your own",[384,3149,3150,3153,3154,3156],{},[391,3151,3152],{},"useBbFormField(formId, { name, rules })"," makes a control you built a field of\nthe form: submitted, reset, counted in ",[391,3155,396],{}," and focused on a failed submit.",[3158,3159,3160,3163],"client-only",{},[1670,3161],{"name":3162},"GuidesForms\u002FCustomField",[1302,3164,3165],{"v-slot:fallback":480},[3166,3167],"div",{"className":3168,"style":3170},[3169],"docs-demo","min-height: 18rem",[384,3172,3173,3174,3177,3178,3181,3182,3185,3186,3191,3192,3195,3196,3199,3200,3202,3203,3206,3207,3209],{},"Name the workspace and press ",[415,3175,3176],{},"Save appearance"," without a colour: focus lands\non the swatches.\nBind ",[391,3179,3180],{},"controlAttrs"," once, on the element that is the field (here the swatch\ngroup), and ",[391,3183,3184],{},"errorAttrs"," on the message. A custom field follows the form's\n",[388,3187,3189],{"href":3188},"#modes",[391,3190,1828],{}," like any other. Assigning ",[391,3193,3194],{},"value"," is the change;\ncall ",[391,3197,3198],{},"handleBlur()"," when the user is done with the control (here, focus leaving\nthe group) and that is the leave. Without it the field is first checked at\nsubmit, and ",[391,3201,1891],{}," waits for it. Do not call ",[391,3204,3205],{},"validate()"," on every change: that\nis ",[391,3208,1878],{}," in any form.",[577,3211,3212,3226],{},[580,3213,3214,3219,3220,3222,3223,575],{},[415,3215,2944,3216,3218],{},[391,3217,404],{}," on the form",", the field's ",[391,3221,400],{}," are ignored: put its key\nin the schema, ",[391,3224,3225],{},"accent: z.string('Pick an accent colour.')",[580,3227,3228,3231,3232,3235,3236,3239,3240,575],{},[415,3229,3230],{},"Wrapping a library control"," instead? Its three form props are typed as\n",[391,3233,3234],{},"FormFieldProps",", and the mode as ",[391,3237,3238],{},"ValidationMode",", both from ",[391,3241,525],{},[384,3243,3244,3245,575],{},"For Inertia submissions, continue with\n",[388,3246,3247],{"href":2859},"Forms that return promises",[3249,3250,3251],"style",{},"html pre.shiki code .sLBg1, html code.shiki .sLBg1{--shiki-default:#66707B;--shiki-dark:#BDC4CC}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 .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":480,"searchDepth":149,"depth":149,"links":3253},[3254,3255,3256,3257,3258,3259,3260,3261],{"id":456,"depth":145,"text":460},{"id":400,"depth":145,"text":629},{"id":404,"depth":145,"text":1068},{"id":1651,"depth":145,"text":1654},{"id":1816,"depth":145,"text":1819},{"id":1982,"depth":145,"text":434},{"id":443,"depth":145,"text":2871},{"id":3144,"depth":145,"text":3147},"The form controls join the BbForm around them and validate with vee-validate string rules or one Standard Schema.","md",{},[3266,3267,3268,3269,3270,3271,3272,3273],{"id":456,"title":460},{"id":400,"title":629},{"id":404,"title":1068},{"id":1651,"title":1654},{"id":1816,"title":1819},{"id":1982,"title":434},{"id":443,"title":2871},{"id":3144,"title":3147},{"title":175,"description":3262},"guides\u002Fvalidated-forms","Db_SKjFwlr-vvjliZXo1QbCZaKDmQkxoxXcYGSmGwJE",1793055150949]