[{"data":1,"prerenderedAt":1527},["ShallowReactive",2],{"api-none":3,"docs-nav-en":4,"locale-alternates":247,"page-en-\u002Fcomponents\u002Fbb-checkbox":378,"pt-showcase-BbCheckbox":1286},null,[5,20,32,56,68,112,145,181,202,223,235,241],{"label":6,"entries":7},"Getting started",[8,12,16],{"title":9,"path":10,"component":-1,"order":11},"Installation","\u002Fguides\u002Finstallation",1,{"title":13,"path":14,"component":-1,"order":15},"Migrating from v2","\u002Fguides\u002Fmigration",2,{"title":17,"path":18,"component":-1,"order":19},"Adoption checklist","\u002Fguides\u002Fadoption-checklist",3,{"label":21,"entries":22},"Design system",[23,26,29],{"title":24,"path":25,"component":-1,"order":11},"Design tokens","\u002Fguides\u002Fdesign-tokens",{"title":27,"path":28,"component":-1,"order":15},"Design language","\u002Fguides\u002Fdesign-language",{"title":30,"path":31,"component":-1,"order":19},"Passthrough","\u002Fguides\u002Fpassthrough",{"label":33,"entries":34},"Playbooks",[35,38,41,44,48,52],{"title":36,"path":37,"component":-1,"order":11},"Options and items","\u002Fguides\u002Foptions-and-items",{"title":39,"path":40,"component":-1,"order":15},"Fetching data","\u002Fguides\u002Ffetching-data",{"title":42,"path":43,"component":-1,"order":19},"Coherence","\u002Fguides\u002Fcoherence",{"title":45,"path":46,"component":-1,"order":47},"Validated forms","\u002Fguides\u002Fvalidated-forms",4,{"title":49,"path":50,"component":-1,"order":51},"Icons","\u002Fguides\u002Ficons",5,{"title":53,"path":54,"component":-1,"order":55},"Preset components","\u002Fguides\u002Fpreset-components",6,{"label":57,"entries":58},"Ecosystem",[59,62,65],{"title":60,"path":61,"component":-1,"order":11},"Inertia and Laravel","\u002Fguides\u002Finertia",{"title":63,"path":64,"component":-1,"order":15},"Nuxt","\u002Fguides\u002Fnuxt",{"title":66,"path":67,"component":-1,"order":19},"AI agents","\u002Fguides\u002Fai-agents",{"label":69,"entries":70},"Inputs",[71,74,77,80,83,86,89,92,96,100,104,108],{"title":72,"path":73,"component":72,"order":11},"BbBaseButton","\u002Fcomponents\u002Fbb-base-button",{"title":75,"path":76,"component":75,"order":15},"BbButton","\u002Fcomponents\u002Fbb-button",{"title":78,"path":79,"component":78,"order":19},"BbCalendar","\u002Fcomponents\u002Fbb-calendar",{"title":81,"path":82,"component":81,"order":19},"BbColorInput","\u002Fcomponents\u002Fbb-color-input",{"title":84,"path":85,"component":84,"order":47},"BbDatePickerInput","\u002Fcomponents\u002Fbb-date-picker-input",{"title":87,"path":88,"component":87,"order":51},"BbDropzone","\u002Fcomponents\u002Fbb-dropzone",{"title":90,"path":91,"component":90,"order":55},"BbForm","\u002Fcomponents\u002Fbb-form",{"title":93,"path":94,"component":93,"order":95},"BbNumberInput","\u002Fcomponents\u002Fbb-number-input",7,{"title":97,"path":98,"component":97,"order":99},"BbTag","\u002Fcomponents\u002Fbb-tag",8,{"title":101,"path":102,"component":101,"order":103},"BbTextarea","\u002Fcomponents\u002Fbb-textarea",9,{"title":105,"path":106,"component":105,"order":107},"BbTextInput","\u002Fcomponents\u002Fbb-text-input",10,{"title":109,"path":110,"component":109,"order":111},"BbTimePickerInput","\u002Fcomponents\u002Fbb-time-picker-input",11,{"label":113,"entries":114},"Selection",[115,118,121,124,127,130,133,136,139,142],{"title":116,"path":117,"component":116,"order":11},"BbCheckbox","\u002Fcomponents\u002Fbb-checkbox",{"title":119,"path":120,"component":119,"order":15},"BbCheckboxGroup","\u002Fcomponents\u002Fbb-checkbox-group",{"title":122,"path":123,"component":122,"order":19},"BbRadio","\u002Fcomponents\u002Fbb-radio",{"title":125,"path":126,"component":125,"order":47},"BbRadioGroup","\u002Fcomponents\u002Fbb-radio-group",{"title":128,"path":129,"component":128,"order":51},"BbRating","\u002Fcomponents\u002Fbb-rating",{"title":131,"path":132,"component":131,"order":55},"BbSelect","\u002Fcomponents\u002Fbb-select",{"title":134,"path":135,"component":134,"order":95},"BbSelectPopover","\u002Fcomponents\u002Fbb-select-popover",{"title":137,"path":138,"component":137,"order":99},"BbSlider","\u002Fcomponents\u002Fbb-slider",{"title":140,"path":141,"component":140,"order":103},"BbSwitch","\u002Fcomponents\u002Fbb-switch",{"title":143,"path":144,"component":143,"order":107},"BbSwitchGroup","\u002Fcomponents\u002Fbb-switch-group",{"label":146,"entries":147},"Overlay",[148,151,154,157,160,163,166,169,172,175,178],{"title":149,"path":150,"component":149,"order":11},"BbColorPalette","\u002Fcomponents\u002Fbb-color-palette",{"title":152,"path":153,"component":152,"order":15},"BbConfirm","\u002Fcomponents\u002Fbb-confirm",{"title":155,"path":156,"component":155,"order":19},"BbDatePicker","\u002Fcomponents\u002Fbb-date-picker",{"title":158,"path":159,"component":158,"order":47},"BbDialog","\u002Fcomponents\u002Fbb-dialog",{"title":161,"path":162,"component":161,"order":51},"BbDropdown","\u002Fcomponents\u002Fbb-dropdown",{"title":164,"path":165,"component":164,"order":55},"BbDropdownButton","\u002Fcomponents\u002Fbb-dropdown-button",{"title":167,"path":168,"component":167,"order":95},"BbHoverCard","\u002Fcomponents\u002Fbb-hover-card",{"title":170,"path":171,"component":170,"order":95},"BbOffCanvas","\u002Fcomponents\u002Fbb-off-canvas",{"title":173,"path":174,"component":173,"order":99},"BbPopover","\u002Fcomponents\u002Fbb-popover",{"title":176,"path":177,"component":176,"order":103},"BbTimePicker","\u002Fcomponents\u002Fbb-time-picker",{"title":179,"path":180,"component":179,"order":107},"BbTooltip","\u002Fcomponents\u002Fbb-tooltip",{"label":182,"entries":183},"Navigation",[184,187,190,193,196,199],{"title":185,"path":186,"component":185,"order":11},"BbAccordion","\u002Fcomponents\u002Fbb-accordion",{"title":188,"path":189,"component":188,"order":15},"BbBreadcrumbs","\u002Fcomponents\u002Fbb-breadcrumbs",{"title":191,"path":192,"component":191,"order":19},"BbCollapsible","\u002Fcomponents\u002Fbb-collapsible",{"title":194,"path":195,"component":194,"order":47},"BbPagination","\u002Fcomponents\u002Fbb-pagination",{"title":197,"path":198,"component":197,"order":51},"BbTabs","\u002Fcomponents\u002Fbb-tabs",{"title":200,"path":201,"component":200,"order":55},"BbTree","\u002Fcomponents\u002Fbb-tree",{"label":203,"entries":204},"Feedback",[205,208,211,214,217,220],{"title":206,"path":207,"component":206,"order":11},"BbAlert","\u002Fcomponents\u002Fbb-alert",{"title":209,"path":210,"component":209,"order":15},"BbBadge","\u002Fcomponents\u002Fbb-badge",{"title":212,"path":213,"component":212,"order":19},"BbIndicator","\u002Fcomponents\u002Fbb-indicator",{"title":215,"path":216,"component":215,"order":47},"BbProgress","\u002Fcomponents\u002Fbb-progress",{"title":218,"path":219,"component":218,"order":51},"BbSpinner","\u002Fcomponents\u002Fbb-spinner",{"title":221,"path":222,"component":221,"order":55},"BbToast","\u002Fcomponents\u002Fbb-toast",{"label":224,"entries":225},"Data Display",[226,229,232],{"title":227,"path":228,"component":227,"order":11},"BbAvatar","\u002Fcomponents\u002Fbb-avatar",{"title":230,"path":231,"component":230,"order":15},"BbIcon","\u002Fcomponents\u002Fbb-icon",{"title":233,"path":234,"component":233,"order":19},"BbTable","\u002Fcomponents\u002Fbb-table",{"label":236,"entries":237},"Layout & Utility",[238],{"title":239,"path":240,"component":239,"order":11},"BbSmoothHeight","\u002Fcomponents\u002Fbb-smooth-height",{"label":242,"entries":243},"Other",[244],{"title":245,"path":246,"component":245,"order":11},"BbAsterisk","\u002Fcomponents\u002Fbb-asterisk",{"\u002Fit\u002Fcomponenti\u002Fbb-accordion":248,"\u002Fen\u002Fcomponents\u002Fbb-accordion":249,"\u002Fit\u002Fcomponenti\u002Fbb-alert":250,"\u002Fen\u002Fcomponents\u002Fbb-alert":251,"\u002Fit\u002Fcomponenti\u002Fbb-asterisk":252,"\u002Fen\u002Fcomponents\u002Fbb-asterisk":253,"\u002Fit\u002Fcomponenti\u002Fbb-avatar":254,"\u002Fen\u002Fcomponents\u002Fbb-avatar":255,"\u002Fit\u002Fcomponenti\u002Fbb-badge":256,"\u002Fen\u002Fcomponents\u002Fbb-badge":257,"\u002Fit\u002Fcomponenti\u002Fbb-base-button":258,"\u002Fen\u002Fcomponents\u002Fbb-base-button":259,"\u002Fit\u002Fcomponenti\u002Fbb-breadcrumbs":260,"\u002Fen\u002Fcomponents\u002Fbb-breadcrumbs":261,"\u002Fit\u002Fcomponenti\u002Fbb-button":262,"\u002Fen\u002Fcomponents\u002Fbb-button":263,"\u002Fit\u002Fcomponenti\u002Fbb-calendar":264,"\u002Fen\u002Fcomponents\u002Fbb-calendar":265,"\u002Fit\u002Fcomponenti\u002Fbb-checkbox":266,"\u002Fen\u002Fcomponents\u002Fbb-checkbox":267,"\u002Fit\u002Fcomponenti\u002Fbb-checkbox-group":268,"\u002Fen\u002Fcomponents\u002Fbb-checkbox-group":269,"\u002Fit\u002Fcomponenti\u002Fbb-collapsible":270,"\u002Fen\u002Fcomponents\u002Fbb-collapsible":271,"\u002Fit\u002Fcomponenti\u002Fbb-color-input":272,"\u002Fen\u002Fcomponents\u002Fbb-color-input":273,"\u002Fit\u002Fcomponenti\u002Fbb-color-palette":274,"\u002Fen\u002Fcomponents\u002Fbb-color-palette":275,"\u002Fit\u002Fcomponenti\u002Fbb-confirm":276,"\u002Fen\u002Fcomponents\u002Fbb-confirm":277,"\u002Fit\u002Fcomponenti\u002Fbb-date-picker":278,"\u002Fen\u002Fcomponents\u002Fbb-date-picker":279,"\u002Fit\u002Fcomponenti\u002Fbb-date-picker-input":280,"\u002Fen\u002Fcomponents\u002Fbb-date-picker-input":281,"\u002Fit\u002Fcomponenti\u002Fbb-dialog":282,"\u002Fen\u002Fcomponents\u002Fbb-dialog":283,"\u002Fit\u002Fcomponenti\u002Fbb-dropdown":284,"\u002Fen\u002Fcomponents\u002Fbb-dropdown":285,"\u002Fit\u002Fcomponenti\u002Fbb-dropdown-button":286,"\u002Fen\u002Fcomponents\u002Fbb-dropdown-button":287,"\u002Fit\u002Fcomponenti\u002Fbb-dropzone":288,"\u002Fen\u002Fcomponents\u002Fbb-dropzone":289,"\u002Fit\u002Fcomponenti\u002Fbb-form":290,"\u002Fen\u002Fcomponents\u002Fbb-form":291,"\u002Fit\u002Fcomponenti\u002Fbb-hover-card":292,"\u002Fen\u002Fcomponents\u002Fbb-hover-card":293,"\u002Fit\u002Fcomponenti\u002Fbb-icon":294,"\u002Fen\u002Fcomponents\u002Fbb-icon":295,"\u002Fit\u002Fcomponenti\u002Fbb-indicator":296,"\u002Fen\u002Fcomponents\u002Fbb-indicator":297,"\u002Fit\u002Fcomponenti\u002Fbb-number-input":298,"\u002Fen\u002Fcomponents\u002Fbb-number-input":299,"\u002Fit\u002Fcomponenti\u002Fbb-off-canvas":300,"\u002Fen\u002Fcomponents\u002Fbb-off-canvas":301,"\u002Fit\u002Fcomponenti\u002Fbb-pagination":302,"\u002Fen\u002Fcomponents\u002Fbb-pagination":303,"\u002Fit\u002Fcomponenti\u002Fbb-popover":304,"\u002Fen\u002Fcomponents\u002Fbb-popover":305,"\u002Fit\u002Fcomponenti\u002Fbb-progress":306,"\u002Fen\u002Fcomponents\u002Fbb-progress":307,"\u002Fit\u002Fcomponenti\u002Fbb-radio":308,"\u002Fen\u002Fcomponents\u002Fbb-radio":309,"\u002Fit\u002Fcomponenti\u002Fbb-radio-group":310,"\u002Fen\u002Fcomponents\u002Fbb-radio-group":311,"\u002Fit\u002Fcomponenti\u002Fbb-rating":312,"\u002Fen\u002Fcomponents\u002Fbb-rating":313,"\u002Fit\u002Fcomponenti\u002Fbb-select":314,"\u002Fen\u002Fcomponents\u002Fbb-select":315,"\u002Fit\u002Fcomponenti\u002Fbb-select-popover":316,"\u002Fen\u002Fcomponents\u002Fbb-select-popover":317,"\u002Fit\u002Fcomponenti\u002Fbb-slider":318,"\u002Fen\u002Fcomponents\u002Fbb-slider":319,"\u002Fit\u002Fcomponenti\u002Fbb-smooth-height":320,"\u002Fen\u002Fcomponents\u002Fbb-smooth-height":321,"\u002Fit\u002Fcomponenti\u002Fbb-spinner":322,"\u002Fen\u002Fcomponents\u002Fbb-spinner":323,"\u002Fit\u002Fcomponenti\u002Fbb-switch":324,"\u002Fen\u002Fcomponents\u002Fbb-switch":325,"\u002Fit\u002Fcomponenti\u002Fbb-switch-group":326,"\u002Fen\u002Fcomponents\u002Fbb-switch-group":327,"\u002Fit\u002Fcomponenti\u002Fbb-table":328,"\u002Fen\u002Fcomponents\u002Fbb-table":329,"\u002Fit\u002Fcomponenti\u002Fbb-tabs":330,"\u002Fen\u002Fcomponents\u002Fbb-tabs":331,"\u002Fit\u002Fcomponenti\u002Fbb-tag":332,"\u002Fen\u002Fcomponents\u002Fbb-tag":333,"\u002Fit\u002Fcomponenti\u002Fbb-text-input":334,"\u002Fen\u002Fcomponents\u002Fbb-text-input":335,"\u002Fit\u002Fcomponenti\u002Fbb-textarea":336,"\u002Fen\u002Fcomponents\u002Fbb-textarea":337,"\u002Fit\u002Fcomponenti\u002Fbb-time-picker":338,"\u002Fen\u002Fcomponents\u002Fbb-time-picker":339,"\u002Fit\u002Fcomponenti\u002Fbb-time-picker-input":340,"\u002Fen\u002Fcomponents\u002Fbb-time-picker-input":341,"\u002Fit\u002Fcomponenti\u002Fbb-toast":342,"\u002Fen\u002Fcomponents\u002Fbb-toast":343,"\u002Fit\u002Fcomponenti\u002Fbb-tooltip":344,"\u002Fen\u002Fcomponents\u002Fbb-tooltip":345,"\u002Fit\u002Fcomponenti\u002Fbb-tree":346,"\u002Fen\u002Fcomponents\u002Fbb-tree":347,"\u002Fit\u002Fguide\u002Fadoption-checklist":348,"\u002Fen\u002Fguides\u002Fadoption-checklist":349,"\u002Fit\u002Fguide\u002Fai-agents":350,"\u002Fen\u002Fguides\u002Fai-agents":351,"\u002Fit\u002Fguide\u002Fcoherence":352,"\u002Fen\u002Fguides\u002Fcoherence":353,"\u002Fit\u002Fguide\u002Fdesign-language":354,"\u002Fen\u002Fguides\u002Fdesign-language":355,"\u002Fit\u002Fguide\u002Fdesign-tokens":356,"\u002Fen\u002Fguides\u002Fdesign-tokens":357,"\u002Fit\u002Fguide\u002Ffetching-data":358,"\u002Fen\u002Fguides\u002Ffetching-data":359,"\u002Fit\u002Fguide\u002Ficons":360,"\u002Fen\u002Fguides\u002Ficons":361,"\u002Fit\u002Fguide\u002Finertia":362,"\u002Fen\u002Fguides\u002Finertia":363,"\u002Fit\u002Fguide\u002Finstallation":364,"\u002Fen\u002Fguides\u002Finstallation":365,"\u002Fit\u002Fguide\u002Fmigration":366,"\u002Fen\u002Fguides\u002Fmigration":367,"\u002Fit\u002Fguide\u002Fnuxt":368,"\u002Fen\u002Fguides\u002Fnuxt":369,"\u002Fit\u002Fguide\u002Foptions-and-items":370,"\u002Fen\u002Fguides\u002Foptions-and-items":371,"\u002Fit\u002Fguide\u002Fpassthrough":372,"\u002Fen\u002Fguides\u002Fpassthrough":373,"\u002Fit\u002Fguide\u002Fpreset-components":374,"\u002Fen\u002Fguides\u002Fpreset-components":375,"\u002Fit\u002Fguide\u002Fvalidated-forms":376,"\u002Fen\u002Fguides\u002Fvalidated-forms":377},"\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",{"id":379,"title":116,"body":380,"component":116,"description":1272,"extension":1273,"group":113,"meta":1274,"navigation":1275,"order":11,"path":117,"sections":1276,"seo":1283,"stem":1284,"__hash__":1285},"docs_en\u002Fcomponents\u002Fbb-checkbox.md",{"type":381,"value":382,"toc":1259},"minimark",[383,438,444,455,471,479,496,500,518,524,527,530,557,584,595,606,627,639,645,670,673,695,715,722,767,771,774,777,786,799,805,824,830,833,836,857,863,902,912,918,928,931,987,996,1005,1046,1052,1059,1062,1087,1112,1156,1163,1215,1241,1255],[384,385,386,394],"when",{},[387,388,389,390,393],"p",{},"Reach for ",[391,392,116],"code",{}," when the answer is one yes\u002Fno standing on its own: accept\nthe terms, remember this device, include archived records.",[395,396,398],"template",{"v-slot:else":397},"",[399,400,401,412,419,426],"ul",{},[402,403,404,409,410],"li",{},[405,406,407],"a",{"href":268},[391,408,119],{},": several boxes inside\none set. Never hand-stack ",[391,411,116],{},[402,413,414,418],{},[405,415,416],{"href":310},[391,417,125],{},": exactly one choice out of the\nset",[402,420,421,425],{},[405,422,423],{"href":314},[391,424,131],{},": the set is long, searchable or fetched",[402,427,428,432,433,437],{},[405,429,430],{"href":324},[391,431,140],{},": it is the ",[434,435,436],"strong",{},"state of a thing",", like\nnotifications or dark mode",[387,439,440,441,443],{},"Also see: ",[405,442,45],{"href":376},".",[387,445,446,447,450,451,454],{},"A checkbox is an ",[434,448,449],{},"answer",", a switch is a ",[434,452,453],{},"state",". A Save button below the\nfield changes nothing about which of the two you have.",[387,456,457,458,462,463,467,468,470],{},"This page also covers the field states and the layout of\n",[405,459,460],{"href":308},[391,461,122],{}," and ",[405,464,465],{"href":324},[391,466,140],{},",\nand the value contract of ",[391,469,140],{},"; those pages link back here.",[472,473,475],"h2",{"id":474},"default",[476,477,478],"span",{},"Default",[387,480,481,482,488,489,495],{},"You need a ",[405,483,485],{"href":484},"\u002Fen\u002Fcomponents\u002Fbb-checkbox\u002Fapi#prop-label",[391,486,487],{},"label"," and a bound ",[405,490,492],{"href":491},"\u002Fen\u002Fcomponents\u002Fbb-checkbox\u002Fapi#model-modelValue",[391,493,494],{},"v-model",". Clicking the box or the label toggles\nthe value.",[497,498],"demo",{"name":499},"BbCheckbox\u002FBasic",[387,501,502,504,505,462,511,517],{},[391,503,487],{}," is required: it is the control's accessible name. ",[405,506,508],{"href":507},"\u002Fen\u002Fcomponents\u002Fbb-checkbox\u002Fapi#prop-id",[391,509,510],{},"id",[405,512,514],{"href":513},"\u002Fen\u002Fcomponents\u002Fbb-checkbox\u002Fapi#prop-name",[391,515,516],{},"name"," are\ngenerated when you leave them off, but pass both in a form that posts.",[472,519,521],{"id":520},"states",[476,522,523],{},"States and messages",[387,525,526],{},"A checkbox carries the same chrome as every other field in the library, and the\nfour message channels are not interchangeable.",[497,528],{"name":529},"BbCheckbox\u002FStates",[387,531,532,533,539,540,546,547,549,550,556],{},"Put durable information in ",[405,534,536],{"href":535},"\u002Fen\u002Fcomponents\u002Fbb-checkbox\u002Fapi#prop-description",[391,537,538],{},"description"," and momentary guidance in ",[405,541,543],{"href":542},"\u002Fen\u002Fcomponents\u002Fbb-checkbox\u002Fapi#prop-hint",[391,544,545],{},"hint",".\n",[391,548,545],{}," shows only while the field has focus, unless ",[405,551,553],{"href":552},"\u002Fen\u002Fcomponents\u002Fbb-checkbox\u002Fapi#prop-persistentHint",[391,554,555],{},"persistent-hint"," pins it\nopen.",[387,558,559,565,566,572,573,579,580,583],{},[405,560,562],{"href":561},"\u002Fen\u002Fcomponents\u002Fbb-checkbox\u002Fapi#prop-errors",[391,563,564],{},"errors"," takes a string or an array, and a non-empty value puts the field into\nthe error state on its own. ",[405,567,569],{"href":568},"\u002Fen\u002Fcomponents\u002Fbb-checkbox\u002Fapi#prop-hasErrors",[391,570,571],{},"has-errors"," gives you the styling without a\nmessage. ",[405,574,576],{"href":575},"\u002Fen\u002Fcomponents\u002Fbb-checkbox\u002Fapi#prop-warnings",[391,577,578],{},"warnings"," is the amber counterpart and does not set ",[391,581,582],{},"aria-invalid",".\nWhen both are set errors win, so the field is never red and amber at once.",[387,585,586,587,590,591,594],{},"All four are wired into ",[391,588,589],{},"aria-describedby"," in that order: errors, warnings,\ndescription, hint. An ",[391,592,593],{},"aria-live=\"polite\""," region announces them when they\nappear and re-reads them on focus, so keep them short.",[596,597,599,602,603],"h3",{"id":598},"readonly-is-not-disabled",[391,600,601],{},"readonly"," is not ",[391,604,605],{},"disabled",[387,607,608,613,614,619,620,626],{},[405,609,611],{"href":610},"\u002Fen\u002Fcomponents\u002Fbb-checkbox\u002Fapi#prop-disabled",[391,612,605],{}," sets the native attribute: the box leaves the tab order and its value\nis never submitted. ",[405,615,617],{"href":616},"\u002Fen\u002Fcomponents\u002Fbb-checkbox\u002Fapi#prop-readonly",[391,618,601],{}," keeps it focusable and submitted, and blocks only\nthe changes. Clicks and Space do nothing, and ",[405,621,623],{"href":622},"\u002Fen\u002Fcomponents\u002Fbb-checkbox\u002Fapi#event-update:modelValue",[391,624,625],{},"update:modelValue"," never fires.",[387,628,629,630,632,633,635,636,638],{},"Use ",[391,631,601],{}," for a value that must reach the server without changing, and\n",[391,634,605],{}," for a value that must not post. When you disable, say why in the\n",[391,637,538],{},": a box that is off for no visible reason reads as a bug.",[472,640,642],{"id":641},"values",[476,643,644],{},"What the model holds",[387,646,647,648,651,652,655,656,662,663,669],{},"With nothing else set the model is ",[391,649,650],{},"true"," or ",[391,653,654],{},"false",". Point ",[405,657,659],{"href":658},"\u002Fen\u002Fcomponents\u002Fbb-checkbox\u002Fapi#prop-trueValue",[391,660,661],{},"true-value"," and\n",[405,664,666],{"href":665},"\u002Fen\u002Fcomponents\u002Fbb-checkbox\u002Fapi#prop-falseValue",[391,667,668],{},"false-value"," at your own values and it holds those.",[497,671],{"name":672},"BbCheckbox\u002FDomainValues",[387,674,675,676,678,679,681,682,684,685,651,688,691,692,694],{},"Any serializable value works, matched structurally rather than by reference.\n",[391,677,625],{}," emits ",[391,680,661],{}," on check and ",[391,683,668],{}," on uncheck, so\nnever read the checked state off a ",[391,686,687],{},"@click",[391,689,690],{},"@change"," handler. Bind an array\ninstead and the checkbox adds or removes its ",[391,693,661],{}," in it, as a native\ncheckbox does.",[387,696,697,698,700,701,704,705,711,712,714],{},"For a classic form post the native input carries ",[391,699,516],{}," and a serialized value.\nAn unchecked box posts ",[434,702,703],{},"nothing",", which is standard HTML and a recurring\nsurprise on the server. ",[405,706,708],{"href":707},"\u002Fen\u002Fcomponents\u002Fbb-checkbox\u002Fapi#prop-submitWhenFalse",[391,709,710],{},"submit-when-false"," renders a hidden input carrying\n",[391,713,668],{},", so the field always arrives.",[387,716,717,718,662,720,443],{},"In an SPA or an Inertia app you bind into form state and drop both ",[391,719,516],{},[391,721,710],{},[723,724,728],"pre",{"className":725,"code":726,"language":727,"meta":397,"style":397},"language-vue shiki shiki-themes github-light-high-contrast github-dark-high-contrast","\u003CBbCheckbox v-model=\"form.newsletter\" label=\"Subscribe to the newsletter\" \u002F>\n","vue",[391,729,730],{"__ignoreMap":397},[476,731,733,737,740,744,747,750,753,755,758,760,764],{"class":732,"line":11},"line",[476,734,736],{"class":735},"suds8","\u003C",[476,738,116],{"class":739},"sne4z",[476,741,743],{"class":742},"s-5SL"," v-model",[476,745,746],{"class":735},"=",[476,748,749],{"class":735},"\"",[476,751,752],{"class":735},"form.newsletter",[476,754,749],{"class":735},[476,756,757],{"class":742}," label",[476,759,746],{"class":735},[476,761,763],{"class":762},"sT6z2","\"Subscribe to the newsletter\"",[476,765,766],{"class":735}," \u002F>\n",[596,768,770],{"id":769},"a-select-all-box","A select-all box",[387,772,773],{},"Not everything a box shows comes from its model. A parent box that summarises a group is checked when every child is on, and\nindeterminate when only some are.",[497,775],{"name":776},"BbCheckbox\u002FSelectAll",[387,778,779,785],{},[405,780,782],{"href":781},"\u002Fen\u002Fcomponents\u002Fbb-checkbox\u002Fapi#prop-indeterminate",[391,783,784],{},"indeterminate"," is a purely visual third state, a dash instead of a check. It\nnever enters the model, and the component re-applies it after every click. If\nyour server needs a real tri-state value, model it separately.",[387,787,788,789,795,796,798],{},"The master box is driven from outside, so it takes ",[405,790,792],{"href":791},"\u002Fen\u002Fcomponents\u002Fbb-checkbox\u002Fapi#prop-checked",[391,793,794],{},"checked"," rather than a\n",[391,797,494],{},". Passing both gives it two sources of truth: pick one.",[387,800,801,802,804],{},"The children are a ",[391,803,119],{},", not a hand-stacked row.",[806,807,808],"migration",{},[387,809,810,812,813,462,816,819,820,823],{},[391,811,794],{}," used to accept the strings ",[391,814,815],{},"'true'",[391,817,818],{},"'false'"," too. In v3 it is a\nplain boolean, so ",[391,821,822],{},"checked=\"false\""," no longer compiles. That string was truthy\nand checked the box, so this is a loud failure replacing a silent one.",[472,825,827],{"id":826},"consent",[476,828,829],{},"Consent that gates an action",[387,831,832],{},"The \"I agree\" box, with links inside its label, that unlocks the primary action.",[497,834],{"name":835},"BbCheckbox\u002FConsentGate",[387,837,838,839,844,845,848,849,852,853,856],{},"The ",[405,840,842],{"href":841},"\u002Fen\u002Fcomponents\u002Fbb-checkbox\u002Fapi#slot-label",[391,843,487],{}," slot decorates the text without touching the accessible name, and\nreceives ",[391,846,847],{},"{ text, hasErrors, hasWarnings }",". The whole control is one ",[391,850,851],{},"\u003Clabel>",",\nso the links inside it have to be real anchors. A click on an ",[391,854,855],{},"\u003Ca>"," navigates, a\nclick on anything else toggles the box.",[387,858,859,860,862],{},"Bind the button's ",[391,861,605],{}," to the model, rather than intercepting the click\nand reading the box state by hand.",[387,864,865,866,870,871,873,874,880,881,885,886,892,893,899,900,443],{},"Inside a ",[405,867,868],{"href":290},[391,869,90],{}," the box joins the form under its\n",[391,872,516],{},". Give it ",[405,875,877],{"href":876},"\u002Fen\u002Fcomponents\u002Fbb-checkbox\u002Fapi#prop-rules",[391,878,879],{},"rules=\"required\"",", a rule you ",[405,882,884],{"href":883},"\u002Fen\u002Fguides\u002Fvalidated-forms#rules","register once",",\nand the form holds the submit until the box is ticked. The label is a sentence, so\nname the field for the message with ",[405,887,889],{"href":888},"\u002Fen\u002Fcomponents\u002Fbb-checkbox\u002Fapi#prop-validationLabel",[391,890,891],{},"validation-label=\"Terms\"",", or write the\nmessage in the rule itself. The ",[405,894,896],{"href":895},"\u002Fen\u002Fcomponents\u002Fbb-checkbox\u002Fapi#prop-required",[391,897,898],{},"required"," prop on a box inside a form is a hint:\nit marks the box and enforces nothing. Outside a form it sets the native\nattribute, as in the demo; write your own message in ",[391,901,564],{},[387,903,904,905,911],{},"A box that is not form data, such as a \"show archived\" filter, takes\n",[405,906,908],{"href":907},"\u002Fen\u002Fcomponents\u002Fbb-checkbox\u002Fapi#prop-formless",[391,909,910],{},"formless"," and stays out of the submitted values.",[472,913,915],{"id":914},"layout",[476,916,917],{},"Layout",[387,919,920,921,927],{},"By default the box comes first and the label follows. ",[405,922,924],{"href":923},"\u002Fen\u002Fcomponents\u002Fbb-checkbox\u002Fapi#prop-reverse",[391,925,926],{},"reverse"," swaps them, and\nthat is what turns a checkbox into a settings row.",[497,929],{"name":930},"BbCheckbox\u002FLayout",[387,932,933,938,939,942,943,946,947,950,951,954,955,958,959,962,963,462,969,975,976,979,980,979,983,986],{},[405,934,936],{"href":935},"\u002Fen\u002Fcomponents\u002Fbb-checkbox\u002Fapi#prop-layout",[391,937,914],{}," decides how the two halves share the width. ",[391,940,941],{},"auto",", the default,\nsizes each to its content on one line. ",[391,944,945],{},"label-fill"," gives the label the free\nwidth and ",[391,948,949],{},"input-fill"," the other way round; ",[391,952,953],{},"horizontal"," splits them evenly and\n",[391,956,957],{},"vertical"," stacks them. A two-token pattern like ",[391,960,961],{},"\"x xxxxxxx\""," splits them by\ntoken length, the first token sizing the element that renders first.\n",[405,964,966],{"href":965},"\u002Fen\u002Fcomponents\u002Fbb-checkbox\u002Fapi#prop-inputPosition",[391,967,968],{},"input-position",[405,970,972],{"href":971},"\u002Fen\u002Fcomponents\u002Fbb-checkbox\u002Fapi#prop-labelPosition",[391,973,974],{},"label-position"," (",[391,977,978],{},"left",", ",[391,981,982],{},"center",[391,984,985],{},"right",") then align the\nbox and the text inside their columns.",[387,988,989,995],{},[405,990,992],{"href":991},"\u002Fen\u002Fcomponents\u002Fbb-checkbox\u002Fapi#prop-compact",[391,993,994],{},"compact"," tightens the gap between the label and the description, as on\nthe first row, for dense forms and settings panels.",[387,997,998,1004],{},[405,999,1001],{"href":1000},"\u002Fen\u002Fcomponents\u002Fbb-checkbox\u002Fapi#prop-hideLabel",[391,1002,1003],{},"hide-label"," keeps the label for screen readers and hides it on screen. It is\nfor a table's selection column, where visible text already labels the box, and\nnothing else.",[806,1006,1007],{},[387,1008,1009,1011,1012,1015,1016,1018,1019,1021,1022,662,1024,1027,1028,1030,1031,1033,1034,462,1036,1039,1040,1042,1043,1045],{},[391,1010,926],{}," ",[434,1013,1014],{},"means the opposite of what it used to",", and the compiler cannot see\nit. The default layout is unchanged, so a checkbox with no ",[391,1017,926],{}," is fine.\nWhat changed is the explicit value. In v2 ",[391,1020,926],{}," defaulted to ",[391,1023,650],{},[391,1025,1026],{},":reverse=\"false\""," produced the swap. In v3 ",[391,1029,926],{}," defaults to ",[391,1032,654],{},", and\npassing it opts into the swap. Delete ",[391,1035,926],{},[391,1037,1038],{},":reverse=\"true\"",",\nrewrite ",[391,1041,1026],{}," as a bare ",[391,1044,926],{},", and grep for the prop on all\nthree single controls.",[472,1047,1049],{"id":1048},"custom-markup",[476,1050,1051],{},"Custom markup",[387,1053,1054,1055,1058],{},"Sometimes the design is not a labelled row at all: a grid of selectable cards,\nsay. ",[391,1056,1057],{},"BbBaseCheckboxIcon"," gives you the library's box, and you own everything\naround it.",[497,1060],{"name":1061},"BbCheckbox\u002FCustomMarkup",[387,1063,1064,1066,1067,979,1069,979,1071,979,1073,1075,1076,979,1078,979,1081,462,1084,443],{},[391,1065,1057],{}," draws and nothing more: the rounded box, the animated check\nand the indeterminate dash, with no input, no events and no state. You tell it\nhow to look with ",[391,1068,794],{},[391,1070,784],{},[391,1072,605],{},[391,1074,601],{},",\n",[391,1077,571],{},[391,1079,1080],{},"has-warnings",[391,1082,1083],{},"focused",[391,1085,1086],{},"focus-visible",[387,1088,1089,1090,1093,1094,1096,1097,1100,1101,1104,1105,1108,1109,1111],{},"Because it is ",[391,1091,1092],{},"aria-hidden"," and cannot be focused, it has to sit on a real\ncontrol. Copy the shape in the demo: a ",[391,1095,851],{}," wrapping an\n",[391,1098,1099],{},"\u003Cinput type=\"checkbox\">"," hidden with ",[391,1102,1103],{},"sr-only",". Never ",[391,1106,1107],{},"display: none",", which\ntakes the input out of the tab order and out of the form. Keyboard, focus and\nform submission come free. The icon cannot see the input's focus, so pass\n",[391,1110,1086],{}," yourself, as the demo does, or a keyboard user gets no ring.\nTab into the cards to see it.",[387,1113,1114,1115,1121,1122,1124,1125,979,1127,979,1129,1075,1131,979,1133,979,1136,979,1139,979,1141,979,1144,1075,1147,979,1150,462,1153,443],{},"There is a smaller step before that one. The ",[405,1116,1118],{"href":1117},"\u002Fen\u002Fcomponents\u002Fbb-checkbox\u002Fapi#slot-icon",[391,1119,1120],{},"icon"," slot on ",[391,1123,116],{},"\nreplaces only the box visual and keeps the input, the label and the field\nchrome. It receives the current state: ",[391,1126,794],{},[391,1128,784],{},[391,1130,605],{},[391,1132,601],{},[391,1134,1135],{},"hasErrors",[391,1137,1138],{},"hasWarnings",[391,1140,1083],{},[391,1142,1143],{},"focusVisible",[391,1145,1146],{},"value",[391,1148,1149],{},"trueValue",[391,1151,1152],{},"falseValue",[391,1154,1155],{},"text",[387,1157,1158,1159,1162],{},"Set the box's custom properties through ",[391,1160,1161],{},"pt:icon",", so they land on the box\nelement and not on an ancestor:",[723,1164,1166],{"className":725,"code":1165,"language":727,"meta":397,"style":397},"\u003CBbCheckbox\n    v-model=\"done\"\n    label=\"Mark as done\"\n    pt:icon=\"[--size:20px] [--r:6px] [--accent:#16a34a] [--check-color:white]\"\n\u002F>\n",[391,1167,1168,1175,1190,1200,1210],{"__ignoreMap":397},[476,1169,1170,1172],{"class":732,"line":11},[476,1171,736],{"class":735},[476,1173,1174],{"class":739},"BbCheckbox\n",[476,1176,1177,1180,1182,1184,1187],{"class":732,"line":15},[476,1178,1179],{"class":742},"    v-model",[476,1181,746],{"class":735},[476,1183,749],{"class":735},[476,1185,1186],{"class":735},"done",[476,1188,1189],{"class":735},"\"\n",[476,1191,1192,1195,1197],{"class":732,"line":19},[476,1193,1194],{"class":742},"    label",[476,1196,746],{"class":735},[476,1198,1199],{"class":762},"\"Mark as done\"\n",[476,1201,1202,1205,1207],{"class":732,"line":47},[476,1203,1204],{"class":742},"    pt:icon",[476,1206,746],{"class":735},[476,1208,1209],{"class":762},"\"[--size:20px] [--r:6px] [--accent:#16a34a] [--check-color:white]\"\n",[476,1211,1212],{"class":732,"line":51},[476,1213,1214],{"class":735},"\u002F>\n",[387,1216,1217,1220,1221,1224,1225,1228,1229,1232,1233,1236,1237,1240],{},[391,1218,1219],{},"--size"," is the box edge (default ",[391,1222,1223],{},"16px","), ",[391,1226,1227],{},"--r"," the corner radius, ",[391,1230,1231],{},"--accent","\nthe fill and border when checked, ",[391,1234,1235],{},"--check-color"," the checkmark stroke and\n",[391,1238,1239],{},"--border-color"," the unchecked border.",[387,1242,1243,1244,1247,1248,1250,1251,1254],{},"This is where v2's ",[391,1245,1246],{},"color"," prop went, removed with no replacement. Recolor\nthrough ",[391,1249,1231],{},", or through the theme's ",[391,1252,1253],{},"--bb-primary"," when the whole product\nshould follow.",[1256,1257,1258],"style",{},"html pre.shiki code .suds8, html code.shiki .suds8{--shiki-default:#0E1116;--shiki-dark:#F0F3F6}html pre.shiki code .sne4z, html code.shiki .sne4z{--shiki-default:#024C1A;--shiki-dark:#72F088}html pre.shiki code .s-5SL, html code.shiki .s-5SL{--shiki-default:#023B95;--shiki-dark:#91CBFF}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);}",{"title":397,"searchDepth":19,"depth":19,"links":1260},[1261,1262,1266,1269,1270,1271],{"id":474,"depth":15,"text":478},{"id":520,"depth":15,"text":523,"children":1263},[1264],{"id":598,"depth":19,"text":1265},"readonly is not disabled",{"id":641,"depth":15,"text":644,"children":1267},[1268],{"id":769,"depth":19,"text":770},{"id":826,"depth":15,"text":829},{"id":914,"depth":15,"text":917},{"id":1048,"depth":15,"text":1051},"One checkbox for a yes\u002Fno that stands on its own, with the full field surface.","md",{},true,[1277,1278,1279,1280,1281,1282],{"id":474,"title":478},{"id":520,"title":523},{"id":641,"title":644},{"id":826,"title":829},{"id":914,"title":917},{"id":1048,"title":1051},{"title":116,"description":1272},"components\u002Fbb-checkbox","yAvvHO2lWZgk8JbIqp7qTfc50GW9lkhfOo5BrUcygCc",{"name":116,"slug":1287,"group":113,"description":1288,"entrypoint":1289,"docs":1290,"props":1293,"models":1411,"events":1414,"slots":1446,"exposed":1458,"pt":1459,"validated":3,"migration":1492},"bb-checkbox","Toggles a single boolean option.","bitboss-ui",{"contract":1291,"source":1292},"ai\u002FBbCheckbox.md","ai\u002Fsource\u002FBbCheckbox.md",[1294,1299,1303,1305,1309,1312,1316,1319,1321,1323,1325,1329,1332,1334,1337,1341,1346,1350,1353,1356,1361,1364,1367,1370,1374,1379,1382,1385,1388,1393,1397,1400,1404,1408],{"name":1295,"type":1296,"required":1297,"default":3,"description":1298,"note":3,"demo":3},"autofocus","Booleanish | undefined",false,"Focuses the field when it mounts (a dialog already open included), unless the user is typing in another field.",{"name":794,"type":1300,"required":1297,"default":3,"description":1301,"note":1302,"demo":641},"boolean | undefined","Defines the input as checked.","Overrides the model-derived display, so it is how a select-all master paints itself from its children. Passing it together with a `v-model` gives the box two sources of truth and `checked` wins: pick one. Narrowed to a plain boolean in v3: the v2 `checked=\"false\"` no longer compiles, which is the loud version of a bug that used to check the box.",{"name":994,"type":1300,"required":1297,"default":654,"description":1304,"note":3,"demo":914},"Compact density. Swaps `--bb-label-spacing-y` for `--bb-label-spacing-y-compact`, so tune a compact field's label gap with the `-compact` token, not the base one. The same meaning as on the checkbox, radio and switch groups.",{"name":538,"type":1306,"required":1297,"default":3,"description":1307,"note":1308,"demo":520},"string | undefined","Text between the label and the input. Unlike the hint it is always visible; it joins the input's `aria-describedby` after any `errors` \u002F `warnings`, before the `hint`.","Always visible, unlike `hint`. Put durable information here, including the reason a box is disabled, which otherwise reads as a bug.",{"name":605,"type":1300,"required":1297,"default":654,"description":1310,"note":1311,"demo":520},"Disables the component.","Takes the box out of the tab order and out of the form post. When the value must still reach the server, you want `readonly` instead.",{"name":564,"type":1313,"required":1297,"default":3,"description":1314,"note":1315,"demo":520},"string | string[] | undefined","Error messages under the field, a string or array, in an `aria-live=\"polite\"` region and first in the control's `aria-describedby`, so they are re-read when it regains focus.","A non-empty value puts the field in the error state by itself; `has-errors` is for the styling without a message. Referenced first from `aria-describedby`, so it is what a screen reader reads when the field regains focus.",{"name":1152,"type":1317,"required":1297,"default":3,"description":1318,"note":3,"demo":641},"any","Value of the input when unchecked. It handles any kind of serializable object.",{"name":910,"type":1300,"required":1297,"default":654,"description":1320,"note":3,"demo":3},"Keep this control out of the enclosing `BbForm` entirely: not submitted, not dirty, not reset, not validated. For a control that is not form data (a filter, a \"show advanced\" switch).",{"name":1135,"type":1300,"required":1297,"default":654,"description":1322,"note":3,"demo":3},"Define if the component should be in an error state. It usually attaches a CSS class for styling purposes.",{"name":1138,"type":1300,"required":1297,"default":654,"description":1324,"note":3,"demo":3},"Define if the component should be in a warning state. Same chrome as errors with `--bb-warn`; errors take priority.",{"name":1326,"type":1300,"required":1297,"default":654,"description":1327,"note":1328,"demo":3},"hideLabel","Visually hides the label of the input while maintaining accessibility.","For dense composites where visible text already labels the box, such as a selection column in a table. It hides the label, it does not remove it: `label` is still required.",{"name":545,"type":1306,"required":1297,"default":3,"description":1330,"note":1331,"demo":520},"Text box to be displayed near the input, usually to indicate instructions.","Hidden until the field has focus unless `persistent-hint` pins it open. Guidance for the moment of filling in; anything durable belongs in `description`.",{"name":510,"type":1306,"required":1297,"default":3,"description":1333,"note":3,"demo":3},"The `id` of the native control; the label's `for` and the description and message ids derive from it. Generated when omitted.",{"name":784,"type":1300,"required":1297,"default":654,"description":1335,"note":1336,"demo":641},"Sets the input in an indeterminate state.","Visual only: it never enters the model, and the component re-applies it after a click because the native state resets on interaction. If the server needs a real tri-state value, model it explicitly.",{"name":1338,"type":1339,"required":1297,"default":3,"description":1340,"note":3,"demo":3},"inputAlign","FieldCrossAlign | undefined","Vertical position of the control in a side-by-side row; not `inputPosition`, the horizontal one. Omitted, the control's first line meets the label's.",{"name":1342,"type":1343,"required":1297,"default":1344,"description":1345,"note":3,"demo":914},"inputPosition","\"left\" | \"center\" | \"right\" | undefined","\"left\"","Sets the alignment of the input. Since inputs are inline block they can be aligned just as text can.",{"name":487,"type":1347,"required":1275,"default":3,"description":1348,"note":1349,"demo":474},"string","Text content of the label of the element.","Required, because it is the accessible name. It stays required when you replace the rendered text through the `label` slot: the slot decorates the string, it does not replace its role.",{"name":1351,"type":1339,"required":1297,"default":3,"description":1352,"note":3,"demo":3},"labelAlign","Vertical position of the label block in a side-by-side row; not `labelPosition`, the horizontal one. Omitted, the label's first line meets the control's.",{"name":1354,"type":1343,"required":1297,"default":3,"description":1355,"note":3,"demo":3},"labelPosition","Sets the text alignment of the label.",{"name":914,"type":1357,"required":1297,"default":1358,"description":1359,"note":1360,"demo":914},"Responsive\u003CFieldLayout> | undefined","\"auto\"","How label and input sit together: `'vertical'`, `'horizontal'` (50\u002F50), `'auto'`, `'label-fill'`, `'input-fill'`, a ratio like `'xx xxxxx'`, or a per-breakpoint map (`{ default: 'vertical', md: 'xx xxxxx' }`).","A two-token pattern such as `\"x xxxxxxx\"` splits the width by token length, the first token sizing whichever element renders first, which `reverse` decides.",{"name":1362,"type":1317,"required":1297,"default":3,"description":1363,"note":3,"demo":3},"modelValue","Used by v-model. Can be any serializable type.",{"name":516,"type":1306,"required":1297,"default":3,"description":1365,"note":1366,"demo":641},"Defines the name of the input.","Generated when omitted, which is fine in an SPA and not in a form that posts. Pass it whenever the value has to arrive under a known key.",{"name":1368,"type":1300,"required":1297,"default":654,"description":1369,"note":3,"demo":520},"persistentHint","Keeps the hint displayed.",{"name":1371,"type":1372,"required":1297,"default":3,"description":1373,"note":3,"demo":3},"pt","PtMap\u003CTogglePtPart, CheckablePtState> | undefined","Passthrough, object form: the same keys as the `pt:*` attributes without the prefix. See the `pt:\u003Cpart>` row.",{"name":1375,"type":1376,"required":1297,"default":3,"description":1377,"note":3,"demo":1378},"pt:\u003Cpart>","PtValue | undefined","Passthrough, attribute form: one attribute per part, `pt:\u003Cpart>`, and per part and state, `pt:\u003Cpart>:\u003Cstate>`. Parts: `description`, `hint`, `icon`, `label`, `message`, `root`. States: `checked`, `disabled`, `errors`, `focused`, `focusVisible`, `indeterminate`, `readonly`, `warnings`.","passthrough",{"name":601,"type":1300,"required":1297,"default":654,"description":1380,"note":1381,"demo":520},"Sets the input in a readonly state.","Not the same as `disabled`: it sets no native attribute, so the box stays focusable and still submits, while every change is swallowed and `update:modelValue` never fires. Use it for a value the user may see and must not change.",{"name":898,"type":1300,"required":1297,"default":654,"description":1383,"note":1384,"demo":826},"Sets the input as required.","Sets the native attribute and the marker (unless `requiredAsterisk` is off). Inside a `BbForm` it is a hint and checks nothing; the message comes from `rules=\"required\"` there, from `errors` outside one.",{"name":926,"type":1300,"required":1297,"default":654,"description":1386,"note":1387,"demo":914},"Reverses the layout: in every direction the order of the label and the input is swapped from the standard arrangement.","Its meaning inverted in v3 and the compiler cannot see it. The default rendering is unchanged, but `:reverse=\"false\"` from v2 becomes a bare `reverse`, and a v2 `reverse` is simply deleted.",{"name":1389,"type":1390,"required":1297,"default":3,"description":1391,"note":1392,"demo":826},"rules","RuleExpression\u003Cany>","vee-validate rules for this field. Only inside a `BbForm`.","Inside a `BbForm`, `rules=\"required\"` fails until the box is ticked (an unticked box holds `false`, or your `false-value`).",{"name":1394,"type":1300,"required":1297,"default":654,"description":1395,"note":1396,"demo":641},"submitWhenFalse","Will submit \"falseValue\" if the input is not checked. Otherwise \"trueValue\" will be submitted.","An unchecked box posts nothing at all: standard HTML, and a recurring surprise on the server. This renders a hidden input carrying `false-value` so the field always arrives. Irrelevant in an SPA, where you bind into form state instead.",{"name":1149,"type":1317,"required":1297,"default":3,"description":1398,"note":1399,"demo":641},"Value of the input when checked. It handles any kind of serializable object.","Checked-ness is derived by deep equality against this value, so object values match structurally rather than by reference.",{"name":1401,"type":1306,"required":1297,"default":3,"description":1402,"note":1403,"demo":826},"validationLabel","The field's name in validation messages (`{field}`): \"Email is not valid\". Defaults to the `label` (or `legend`), then \"This field\"; never the `name`. Set it when the label is hidden or reads badly in a sentence (icon-only, a question). `BbForm` only.","The name the rule messages use for `{field}`. A consent label is a sentence (\"I agree to the terms…\"), so give the message a noun such as \"Terms\".",{"name":1405,"type":1406,"required":1297,"default":3,"description":1407,"note":3,"demo":3},"validationMode","ValidationMode | undefined","When the field validates: `aggressive` (each change), `balanced` (on leave, then live while in error), `lazy` (on leave), `submit-only`, `submit-live`. Unset: the `BbForm`'s `validation-mode`, then `formControls.validationMode` (`'balanced'`). `BbForm` only.",{"name":578,"type":1313,"required":1297,"default":3,"description":1409,"note":1410,"demo":520},"Warning messages under the field, a string or array: amber, in their own `aria-live` region and in the control's `aria-describedby` after the errors. Non-empty turns on the warning state; errors win when both are set.","The amber counterpart of `errors`, for a value that is valid but worth a second look. It does not set `aria-invalid`, and errors suppress it when both are set.",[1412],{"name":1362,"type":1317,"note":1413,"demo":474},"Carries `true-value` on check and `false-value` on uncheck, and nothing else. Never derive the state from a `@click` or `@change` handler; those are for side concerns.",[1415,1419,1423,1427,1430,1433,1437,1440,1443],{"name":1416,"signature":1417,"description":1418,"note":3,"demo":3},"blur","(event: FocusEvent): void","Emitted when the native input loses focus. Forwards the original DOM `FocusEvent`.",{"name":1420,"signature":1421,"description":1422,"note":3,"demo":3},"change","(event: Event): void","Emitted when the checkbox checked state changes. Forwards the original DOM `Event` from the input.",{"name":1424,"signature":1425,"description":1426,"note":3,"demo":3},"click","(event: MouseEvent): void","Emitted when the input receives a click interaction. Forwards the original DOM `MouseEvent`.",{"name":1428,"signature":1417,"description":1429,"note":3,"demo":3},"focus","Emitted when the native input gains focus. Forwards the original DOM `FocusEvent`.",{"name":1431,"signature":1421,"description":1432,"note":3,"demo":3},"input","Emitted on native input events from the checkbox input. Forwards the original DOM `Event`.",{"name":1434,"signature":1435,"description":1436,"note":3,"demo":3},"keydown","(event: KeyboardEvent): void","Emitted for keyboard interaction on the input. Forwards the original DOM `KeyboardEvent`.",{"name":1438,"signature":1425,"description":1439,"note":3,"demo":3},"mousedown","Emitted when a pointing device button is pressed over the input. Forwards the original DOM `MouseEvent`.",{"name":1441,"signature":1425,"description":1442,"note":3,"demo":3},"mouseup","Emitted when a pointing device button is released over the input. Forwards the original DOM `MouseEvent`.",{"name":625,"signature":1444,"description":1445,"note":3,"demo":3},"(value: any): void","Emitted on checked-state changes with the effective model value:\n- `trueValue` when checked\n- `falseValue` when unchecked",[1447,1450,1454],{"name":538,"type":1448,"description":1449,"note":3,"demo":3},"BbCheckboxDescriptionSlotProps","Replaces the description text. Provided alone (no `description` prop) it still renders the description region and wires it into `aria-describedby`.",{"name":1120,"type":1451,"description":1452,"note":1453,"demo":1048},"BbCheckboxIconSlotProps","Replaces the default checkmark SVG inside the checkbox box. Receives the checkbox state plus the label text.","Replaces the entire box visual (border, background and checkmark), so the slot content has to communicate every state itself. When the row around it is the problem rather than the box, drop to `BbBaseCheckboxIcon` instead.",{"name":487,"type":1455,"description":1456,"note":1457,"demo":826},"BbCheckboxLabelSlotProps","Replaces the default label text rendered next to the checkbox.","Receives `{ text, hasErrors, hasWarnings }`. The whole control is one `\u003Clabel>`, so interactive children have to be real anchors: a click on an `\u003Ca>` navigates, a click on anything else toggles the box.",[],{"parts":1460,"states":1475},[1461,1464,1466,1468,1471,1473],{"name":1462,"description":1463},"root","The toggle's container: the glyph, the label and the lines under them.",{"name":487,"description":1465},"The label text beside the glyph (the `label` prop).",{"name":538,"description":1467},"The muted line under the label (the `description` prop).",{"name":1469,"description":1470},"message","The errors \u002F warnings line. A node of its own: it can show at the same time as `hint`.",{"name":545,"description":1472},"The helper line (the `hint` prop), shown on focus, or always with `persistent-hint`.",{"name":1120,"description":1474},"The drawn glyph — the box, the dot or the switch track. The default one: a consumer `icon` slot replaces it. The hidden native input is not a part.",[1476,1478,1480,1482,1484,1486,1488,1490],{"name":794,"description":1477},"Component-wide: the toggle is on.",{"name":605,"description":1479},"Component-wide: the toggle is `disabled`.",{"name":564,"description":1481},"Component-wide: the toggle shows errors — the glyph and the message line turn red.",{"name":1083,"description":1483},"Component-wide: the native input has focus — any focus, mouse included, like the `focused` slot prop.",{"name":1143,"description":1485},"Component-wide: that focus is keyboard-visible — where a focus ring belongs.",{"name":784,"description":1487},"Component-wide: the mixed state (the `indeterminate` prop) — neither on nor off.",{"name":601,"description":1489},"Component-wide: the toggle is `readonly` — focusable, cannot change.",{"name":578,"description":1491},"Component-wide: the toggle shows warnings and no errors.",{"removed":1493,"renamed":1520},[1494,1500,1505,1510,1515],{"name":1246,"surface":1495,"replacedBy":3,"hint":3,"since":1496,"migration":1497,"silent":1275,"fix":1498},"prop","3.0.0-alpha.1","ai\u002Fguides\u002Fmigration\u002Fcomponents\u002Fbb-checkbox.md",{"kind":1499},"manual",{"name":1501,"surface":1495,"replacedBy":914,"hint":3,"since":1502,"migration":1497,"silent":1275,"fix":1503},"direction","3.0.0-beta.33",{"kind":1504},"rename",{"name":1506,"surface":1495,"replacedBy":1138,"hint":3,"since":1507,"migration":1508,"silent":1275,"fix":1509},"hasWarning","3.0.0-beta.26","ai\u002Fguides\u002Fmigration\u002Fv2-to-v3.md",{"kind":1504},{"name":1511,"surface":1495,"replacedBy":1405,"hint":1512,"since":1513,"migration":1508,"silent":1275,"fix":1514},"validateOn","an array of events became one mode (`aggressive` | `balanced` | `lazy` | `submit-only` | `submit-live`). The old defaults (`['blur']`, `['inactive']`, a toggle's `['update:modelValue', 'change', 'blur']`) are `balanced`, the new default: delete the prop. A text field on `['update:modelValue']` is `validation-mode=\"aggressive\"`. Set it once on `\u003CBbForm validation-mode>` instead of per field","3.0.0-beta.41",{"kind":1499},{"name":1516,"surface":1495,"replacedBy":3,"hint":1517,"since":1513,"migration":1508,"silent":1275,"fix":1518},"vid","a display name (v2: `vid=\"Email address\"`) is now `validation-label`; a field path (3.0 betas: `vid=\"address.city\"`) is now `name` (brackets for a native post: `address[city]`). `check --fix` picks by the value",{"kind":1519,"display":1401,"key":516},"byValue",[1521,1523,1525],{"from":1501,"to":914,"surface":1495,"since":1502,"migration":1497,"fix":1522},{"kind":1504},{"from":1506,"to":1138,"surface":1495,"since":1507,"migration":1508,"fix":1524},{"kind":1504},{"from":1511,"to":1405,"surface":1495,"since":1513,"migration":1508,"fix":1526},{"kind":1499},1793055138216]