[{"data":1,"prerenderedAt":1684},["ShallowReactive",2],{"locale-alternates":3,"docs-nav-en":124,"api-none":352,"page-en-\u002Fguides\u002Foptions-and-items":353},{"\u002Fit\u002Fcomponenti\u002Fbb-accordion":4,"\u002Fen\u002Fcomponents\u002Fbb-accordion":5,"\u002Fit\u002Fcomponenti\u002Fbb-alert":6,"\u002Fen\u002Fcomponents\u002Fbb-alert":7,"\u002Fit\u002Fcomponenti\u002Fbb-asterisk":8,"\u002Fen\u002Fcomponents\u002Fbb-asterisk":9,"\u002Fit\u002Fcomponenti\u002Fbb-avatar":10,"\u002Fen\u002Fcomponents\u002Fbb-avatar":11,"\u002Fit\u002Fcomponenti\u002Fbb-badge":12,"\u002Fen\u002Fcomponents\u002Fbb-badge":13,"\u002Fit\u002Fcomponenti\u002Fbb-base-button":14,"\u002Fen\u002Fcomponents\u002Fbb-base-button":15,"\u002Fit\u002Fcomponenti\u002Fbb-breadcrumbs":16,"\u002Fen\u002Fcomponents\u002Fbb-breadcrumbs":17,"\u002Fit\u002Fcomponenti\u002Fbb-button":18,"\u002Fen\u002Fcomponents\u002Fbb-button":19,"\u002Fit\u002Fcomponenti\u002Fbb-checkbox":20,"\u002Fen\u002Fcomponents\u002Fbb-checkbox":21,"\u002Fit\u002Fcomponenti\u002Fbb-checkbox-group":22,"\u002Fen\u002Fcomponents\u002Fbb-checkbox-group":23,"\u002Fit\u002Fcomponenti\u002Fbb-collapsible":24,"\u002Fen\u002Fcomponents\u002Fbb-collapsible":25,"\u002Fit\u002Fcomponenti\u002Fbb-color-input":26,"\u002Fen\u002Fcomponents\u002Fbb-color-input":27,"\u002Fit\u002Fcomponenti\u002Fbb-color-palette":28,"\u002Fen\u002Fcomponents\u002Fbb-color-palette":29,"\u002Fit\u002Fcomponenti\u002Fbb-confirm":30,"\u002Fen\u002Fcomponents\u002Fbb-confirm":31,"\u002Fit\u002Fcomponenti\u002Fbb-date-picker":32,"\u002Fen\u002Fcomponents\u002Fbb-date-picker":33,"\u002Fit\u002Fcomponenti\u002Fbb-date-picker-input":34,"\u002Fen\u002Fcomponents\u002Fbb-date-picker-input":35,"\u002Fit\u002Fcomponenti\u002Fbb-dialog":36,"\u002Fen\u002Fcomponents\u002Fbb-dialog":37,"\u002Fit\u002Fcomponenti\u002Fbb-dropdown":38,"\u002Fen\u002Fcomponents\u002Fbb-dropdown":39,"\u002Fit\u002Fcomponenti\u002Fbb-dropdown-button":40,"\u002Fen\u002Fcomponents\u002Fbb-dropdown-button":41,"\u002Fit\u002Fcomponenti\u002Fbb-dropzone":42,"\u002Fen\u002Fcomponents\u002Fbb-dropzone":43,"\u002Fit\u002Fcomponenti\u002Fbb-form":44,"\u002Fen\u002Fcomponents\u002Fbb-form":45,"\u002Fit\u002Fcomponenti\u002Fbb-icon":46,"\u002Fen\u002Fcomponents\u002Fbb-icon":47,"\u002Fit\u002Fcomponenti\u002Fbb-indicator":48,"\u002Fen\u002Fcomponents\u002Fbb-indicator":49,"\u002Fit\u002Fcomponenti\u002Fbb-number-input":50,"\u002Fen\u002Fcomponents\u002Fbb-number-input":51,"\u002Fit\u002Fcomponenti\u002Fbb-off-canvas":52,"\u002Fen\u002Fcomponents\u002Fbb-off-canvas":53,"\u002Fit\u002Fcomponenti\u002Fbb-pagination":54,"\u002Fen\u002Fcomponents\u002Fbb-pagination":55,"\u002Fit\u002Fcomponenti\u002Fbb-popover":56,"\u002Fen\u002Fcomponents\u002Fbb-popover":57,"\u002Fit\u002Fcomponenti\u002Fbb-progress":58,"\u002Fen\u002Fcomponents\u002Fbb-progress":59,"\u002Fit\u002Fcomponenti\u002Fbb-radio":60,"\u002Fen\u002Fcomponents\u002Fbb-radio":61,"\u002Fit\u002Fcomponenti\u002Fbb-radio-group":62,"\u002Fen\u002Fcomponents\u002Fbb-radio-group":63,"\u002Fit\u002Fcomponenti\u002Fbb-rating":64,"\u002Fen\u002Fcomponents\u002Fbb-rating":65,"\u002Fit\u002Fcomponenti\u002Fbb-select":66,"\u002Fen\u002Fcomponents\u002Fbb-select":67,"\u002Fit\u002Fcomponenti\u002Fbb-select-popover":68,"\u002Fen\u002Fcomponents\u002Fbb-select-popover":69,"\u002Fit\u002Fcomponenti\u002Fbb-slider":70,"\u002Fen\u002Fcomponents\u002Fbb-slider":71,"\u002Fit\u002Fcomponenti\u002Fbb-smooth-height":72,"\u002Fen\u002Fcomponents\u002Fbb-smooth-height":73,"\u002Fit\u002Fcomponenti\u002Fbb-spinner":74,"\u002Fen\u002Fcomponents\u002Fbb-spinner":75,"\u002Fit\u002Fcomponenti\u002Fbb-switch":76,"\u002Fen\u002Fcomponents\u002Fbb-switch":77,"\u002Fit\u002Fcomponenti\u002Fbb-switch-group":78,"\u002Fen\u002Fcomponents\u002Fbb-switch-group":79,"\u002Fit\u002Fcomponenti\u002Fbb-table":80,"\u002Fen\u002Fcomponents\u002Fbb-table":81,"\u002Fit\u002Fcomponenti\u002Fbb-tabs":82,"\u002Fen\u002Fcomponents\u002Fbb-tabs":83,"\u002Fit\u002Fcomponenti\u002Fbb-tag":84,"\u002Fen\u002Fcomponents\u002Fbb-tag":85,"\u002Fit\u002Fcomponenti\u002Fbb-text-input":86,"\u002Fen\u002Fcomponents\u002Fbb-text-input":87,"\u002Fit\u002Fcomponenti\u002Fbb-textarea":88,"\u002Fen\u002Fcomponents\u002Fbb-textarea":89,"\u002Fit\u002Fcomponenti\u002Fbb-time-picker":90,"\u002Fen\u002Fcomponents\u002Fbb-time-picker":91,"\u002Fit\u002Fcomponenti\u002Fbb-time-picker-input":92,"\u002Fen\u002Fcomponents\u002Fbb-time-picker-input":93,"\u002Fit\u002Fcomponenti\u002Fbb-toast":94,"\u002Fen\u002Fcomponents\u002Fbb-toast":95,"\u002Fit\u002Fcomponenti\u002Fbb-tooltip":96,"\u002Fen\u002Fcomponents\u002Fbb-tooltip":97,"\u002Fit\u002Fcomponenti\u002Fbb-tree":98,"\u002Fen\u002Fcomponents\u002Fbb-tree":99,"\u002Fit\u002Fguide\u002Fai-agents":100,"\u002Fen\u002Fguides\u002Fai-agents":101,"\u002Fit\u002Fguide\u002Fcoherence":102,"\u002Fen\u002Fguides\u002Fcoherence":103,"\u002Fit\u002Fguide\u002Fdesign-language":104,"\u002Fen\u002Fguides\u002Fdesign-language":105,"\u002Fit\u002Fguide\u002Fdesign-tokens":106,"\u002Fen\u002Fguides\u002Fdesign-tokens":107,"\u002Fit\u002Fguide\u002Ffetching-data":108,"\u002Fen\u002Fguides\u002Ffetching-data":109,"\u002Fit\u002Fguide\u002Ficons":110,"\u002Fen\u002Fguides\u002Ficons":111,"\u002Fit\u002Fguide\u002Finertia":112,"\u002Fen\u002Fguides\u002Finertia":113,"\u002Fit\u002Fguide\u002Finstallation":114,"\u002Fen\u002Fguides\u002Finstallation":115,"\u002Fit\u002Fguide\u002Fmigration":116,"\u002Fen\u002Fguides\u002Fmigration":117,"\u002Fit\u002Fguide\u002Fnuxt":118,"\u002Fen\u002Fguides\u002Fnuxt":119,"\u002Fit\u002Fguide\u002Foptions-and-items":120,"\u002Fen\u002Fguides\u002Foptions-and-items":121,"\u002Fit\u002Fguide\u002Fvalidated-forms":122,"\u002Fen\u002Fguides\u002Fvalidated-forms":123},"\u002Fen\u002Fcomponents\u002Fbb-accordion","\u002Fit\u002Fcomponenti\u002Fbb-accordion","\u002Fen\u002Fcomponents\u002Fbb-alert","\u002Fit\u002Fcomponenti\u002Fbb-alert","\u002Fen\u002Fcomponents\u002Fbb-asterisk","\u002Fit\u002Fcomponenti\u002Fbb-asterisk","\u002Fen\u002Fcomponents\u002Fbb-avatar","\u002Fit\u002Fcomponenti\u002Fbb-avatar","\u002Fen\u002Fcomponents\u002Fbb-badge","\u002Fit\u002Fcomponenti\u002Fbb-badge","\u002Fen\u002Fcomponents\u002Fbb-base-button","\u002Fit\u002Fcomponenti\u002Fbb-base-button","\u002Fen\u002Fcomponents\u002Fbb-breadcrumbs","\u002Fit\u002Fcomponenti\u002Fbb-breadcrumbs","\u002Fen\u002Fcomponents\u002Fbb-button","\u002Fit\u002Fcomponenti\u002Fbb-button","\u002Fen\u002Fcomponents\u002Fbb-checkbox","\u002Fit\u002Fcomponenti\u002Fbb-checkbox","\u002Fen\u002Fcomponents\u002Fbb-checkbox-group","\u002Fit\u002Fcomponenti\u002Fbb-checkbox-group","\u002Fen\u002Fcomponents\u002Fbb-collapsible","\u002Fit\u002Fcomponenti\u002Fbb-collapsible","\u002Fen\u002Fcomponents\u002Fbb-color-input","\u002Fit\u002Fcomponenti\u002Fbb-color-input","\u002Fen\u002Fcomponents\u002Fbb-color-palette","\u002Fit\u002Fcomponenti\u002Fbb-color-palette","\u002Fen\u002Fcomponents\u002Fbb-confirm","\u002Fit\u002Fcomponenti\u002Fbb-confirm","\u002Fen\u002Fcomponents\u002Fbb-date-picker","\u002Fit\u002Fcomponenti\u002Fbb-date-picker","\u002Fen\u002Fcomponents\u002Fbb-date-picker-input","\u002Fit\u002Fcomponenti\u002Fbb-date-picker-input","\u002Fen\u002Fcomponents\u002Fbb-dialog","\u002Fit\u002Fcomponenti\u002Fbb-dialog","\u002Fen\u002Fcomponents\u002Fbb-dropdown","\u002Fit\u002Fcomponenti\u002Fbb-dropdown","\u002Fen\u002Fcomponents\u002Fbb-dropdown-button","\u002Fit\u002Fcomponenti\u002Fbb-dropdown-button","\u002Fen\u002Fcomponents\u002Fbb-dropzone","\u002Fit\u002Fcomponenti\u002Fbb-dropzone","\u002Fen\u002Fcomponents\u002Fbb-form","\u002Fit\u002Fcomponenti\u002Fbb-form","\u002Fen\u002Fcomponents\u002Fbb-icon","\u002Fit\u002Fcomponenti\u002Fbb-icon","\u002Fen\u002Fcomponents\u002Fbb-indicator","\u002Fit\u002Fcomponenti\u002Fbb-indicator","\u002Fen\u002Fcomponents\u002Fbb-number-input","\u002Fit\u002Fcomponenti\u002Fbb-number-input","\u002Fen\u002Fcomponents\u002Fbb-off-canvas","\u002Fit\u002Fcomponenti\u002Fbb-off-canvas","\u002Fen\u002Fcomponents\u002Fbb-pagination","\u002Fit\u002Fcomponenti\u002Fbb-pagination","\u002Fen\u002Fcomponents\u002Fbb-popover","\u002Fit\u002Fcomponenti\u002Fbb-popover","\u002Fen\u002Fcomponents\u002Fbb-progress","\u002Fit\u002Fcomponenti\u002Fbb-progress","\u002Fen\u002Fcomponents\u002Fbb-radio","\u002Fit\u002Fcomponenti\u002Fbb-radio","\u002Fen\u002Fcomponents\u002Fbb-radio-group","\u002Fit\u002Fcomponenti\u002Fbb-radio-group","\u002Fen\u002Fcomponents\u002Fbb-rating","\u002Fit\u002Fcomponenti\u002Fbb-rating","\u002Fen\u002Fcomponents\u002Fbb-select","\u002Fit\u002Fcomponenti\u002Fbb-select","\u002Fen\u002Fcomponents\u002Fbb-select-popover","\u002Fit\u002Fcomponenti\u002Fbb-select-popover","\u002Fen\u002Fcomponents\u002Fbb-slider","\u002Fit\u002Fcomponenti\u002Fbb-slider","\u002Fen\u002Fcomponents\u002Fbb-smooth-height","\u002Fit\u002Fcomponenti\u002Fbb-smooth-height","\u002Fen\u002Fcomponents\u002Fbb-spinner","\u002Fit\u002Fcomponenti\u002Fbb-spinner","\u002Fen\u002Fcomponents\u002Fbb-switch","\u002Fit\u002Fcomponenti\u002Fbb-switch","\u002Fen\u002Fcomponents\u002Fbb-switch-group","\u002Fit\u002Fcomponenti\u002Fbb-switch-group","\u002Fen\u002Fcomponents\u002Fbb-table","\u002Fit\u002Fcomponenti\u002Fbb-table","\u002Fen\u002Fcomponents\u002Fbb-tabs","\u002Fit\u002Fcomponenti\u002Fbb-tabs","\u002Fen\u002Fcomponents\u002Fbb-tag","\u002Fit\u002Fcomponenti\u002Fbb-tag","\u002Fen\u002Fcomponents\u002Fbb-text-input","\u002Fit\u002Fcomponenti\u002Fbb-text-input","\u002Fen\u002Fcomponents\u002Fbb-textarea","\u002Fit\u002Fcomponenti\u002Fbb-textarea","\u002Fen\u002Fcomponents\u002Fbb-time-picker","\u002Fit\u002Fcomponenti\u002Fbb-time-picker","\u002Fen\u002Fcomponents\u002Fbb-time-picker-input","\u002Fit\u002Fcomponenti\u002Fbb-time-picker-input","\u002Fen\u002Fcomponents\u002Fbb-toast","\u002Fit\u002Fcomponenti\u002Fbb-toast","\u002Fen\u002Fcomponents\u002Fbb-tooltip","\u002Fit\u002Fcomponenti\u002Fbb-tooltip","\u002Fen\u002Fcomponents\u002Fbb-tree","\u002Fit\u002Fcomponenti\u002Fbb-tree","\u002Fen\u002Fguides\u002Fai-agents","\u002Fit\u002Fguide\u002Fai-agents","\u002Fen\u002Fguides\u002Fcoherence","\u002Fit\u002Fguide\u002Fcoherence","\u002Fen\u002Fguides\u002Fdesign-language","\u002Fit\u002Fguide\u002Fdesign-language","\u002Fen\u002Fguides\u002Fdesign-tokens","\u002Fit\u002Fguide\u002Fdesign-tokens","\u002Fen\u002Fguides\u002Ffetching-data","\u002Fit\u002Fguide\u002Ffetching-data","\u002Fen\u002Fguides\u002Ficons","\u002Fit\u002Fguide\u002Ficons","\u002Fen\u002Fguides\u002Finertia","\u002Fit\u002Fguide\u002Finertia","\u002Fen\u002Fguides\u002Finstallation","\u002Fit\u002Fguide\u002Finstallation","\u002Fen\u002Fguides\u002Fmigration","\u002Fit\u002Fguide\u002Fmigration","\u002Fen\u002Fguides\u002Fnuxt","\u002Fit\u002Fguide\u002Fnuxt","\u002Fen\u002Fguides\u002Foptions-and-items","\u002Fit\u002Fguide\u002Foptions-and-items","\u002Fen\u002Fguides\u002Fvalidated-forms","\u002Fit\u002Fguide\u002Fvalidated-forms",[125,136,145,166,178,220,253,286,307,328,340,346],{"label":126,"entries":127},"Getting started",[128,132],{"title":129,"path":130,"order":131},"Installation","\u002Fguides\u002Finstallation",1,{"title":133,"path":134,"order":135},"Migrating from v2","\u002Fguides\u002Fmigration",2,{"label":137,"entries":138},"Design system",[139,142],{"title":140,"path":141,"order":131},"Design tokens","\u002Fguides\u002Fdesign-tokens",{"title":143,"path":144,"order":135},"Design language","\u002Fguides\u002Fdesign-language",{"label":146,"entries":147},"Playbooks",[148,151,154,158,162],{"title":149,"path":150,"order":131},"Options and items","\u002Fguides\u002Foptions-and-items",{"title":152,"path":153,"order":135},"Fetching data","\u002Fguides\u002Ffetching-data",{"title":155,"path":156,"order":157},"Coherence","\u002Fguides\u002Fcoherence",3,{"title":159,"path":160,"order":161},"Validated forms","\u002Fguides\u002Fvalidated-forms",4,{"title":163,"path":164,"order":165},"Icons","\u002Fguides\u002Ficons",5,{"label":167,"entries":168},"Ecosystem",[169,172,175],{"title":170,"path":171,"order":131},"Inertia and Laravel","\u002Fguides\u002Finertia",{"title":173,"path":174,"order":135},"Nuxt","\u002Fguides\u002Fnuxt",{"title":176,"path":177,"order":157},"AI agents","\u002Fguides\u002Fai-agents",{"label":179,"entries":180},"Inputs",[181,184,187,190,193,196,200,204,208,212,216],{"title":182,"path":183,"component":182,"order":131},"BbBaseButton","\u002Fcomponents\u002Fbb-base-button",{"title":185,"path":186,"component":185,"order":135},"BbButton","\u002Fcomponents\u002Fbb-button",{"title":188,"path":189,"component":188,"order":157},"BbColorInput","\u002Fcomponents\u002Fbb-color-input",{"title":191,"path":192,"component":191,"order":161},"BbDatePickerInput","\u002Fcomponents\u002Fbb-date-picker-input",{"title":194,"path":195,"component":194,"order":165},"BbDropzone","\u002Fcomponents\u002Fbb-dropzone",{"title":197,"path":198,"component":197,"order":199},"BbForm","\u002Fcomponents\u002Fbb-form",6,{"title":201,"path":202,"component":201,"order":203},"BbNumberInput","\u002Fcomponents\u002Fbb-number-input",7,{"title":205,"path":206,"component":205,"order":207},"BbTag","\u002Fcomponents\u002Fbb-tag",8,{"title":209,"path":210,"component":209,"order":211},"BbTextarea","\u002Fcomponents\u002Fbb-textarea",9,{"title":213,"path":214,"component":213,"order":215},"BbTextInput","\u002Fcomponents\u002Fbb-text-input",10,{"title":217,"path":218,"component":217,"order":219},"BbTimePickerInput","\u002Fcomponents\u002Fbb-time-picker-input",11,{"label":221,"entries":222},"Selection",[223,226,229,232,235,238,241,244,247,250],{"title":224,"path":225,"component":224,"order":131},"BbCheckbox","\u002Fcomponents\u002Fbb-checkbox",{"title":227,"path":228,"component":227,"order":135},"BbCheckboxGroup","\u002Fcomponents\u002Fbb-checkbox-group",{"title":230,"path":231,"component":230,"order":157},"BbRadio","\u002Fcomponents\u002Fbb-radio",{"title":233,"path":234,"component":233,"order":161},"BbRadioGroup","\u002Fcomponents\u002Fbb-radio-group",{"title":236,"path":237,"component":236,"order":165},"BbRating","\u002Fcomponents\u002Fbb-rating",{"title":239,"path":240,"component":239,"order":199},"BbSelect","\u002Fcomponents\u002Fbb-select",{"title":242,"path":243,"component":242,"order":203},"BbSelectPopover","\u002Fcomponents\u002Fbb-select-popover",{"title":245,"path":246,"component":245,"order":207},"BbSlider","\u002Fcomponents\u002Fbb-slider",{"title":248,"path":249,"component":248,"order":211},"BbSwitch","\u002Fcomponents\u002Fbb-switch",{"title":251,"path":252,"component":251,"order":215},"BbSwitchGroup","\u002Fcomponents\u002Fbb-switch-group",{"label":254,"entries":255},"Overlay",[256,259,262,265,268,271,274,277,280,283],{"title":257,"path":258,"component":257,"order":131},"BbColorPalette","\u002Fcomponents\u002Fbb-color-palette",{"title":260,"path":261,"component":260,"order":135},"BbConfirm","\u002Fcomponents\u002Fbb-confirm",{"title":263,"path":264,"component":263,"order":157},"BbDatePicker","\u002Fcomponents\u002Fbb-date-picker",{"title":266,"path":267,"component":266,"order":161},"BbDialog","\u002Fcomponents\u002Fbb-dialog",{"title":269,"path":270,"component":269,"order":165},"BbDropdown","\u002Fcomponents\u002Fbb-dropdown",{"title":272,"path":273,"component":272,"order":199},"BbDropdownButton","\u002Fcomponents\u002Fbb-dropdown-button",{"title":275,"path":276,"component":275,"order":203},"BbOffCanvas","\u002Fcomponents\u002Fbb-off-canvas",{"title":278,"path":279,"component":278,"order":207},"BbPopover","\u002Fcomponents\u002Fbb-popover",{"title":281,"path":282,"component":281,"order":211},"BbTimePicker","\u002Fcomponents\u002Fbb-time-picker",{"title":284,"path":285,"component":284,"order":215},"BbTooltip","\u002Fcomponents\u002Fbb-tooltip",{"label":287,"entries":288},"Navigation",[289,292,295,298,301,304],{"title":290,"path":291,"component":290,"order":131},"BbAccordion","\u002Fcomponents\u002Fbb-accordion",{"title":293,"path":294,"component":293,"order":135},"BbBreadcrumbs","\u002Fcomponents\u002Fbb-breadcrumbs",{"title":296,"path":297,"component":296,"order":157},"BbCollapsible","\u002Fcomponents\u002Fbb-collapsible",{"title":299,"path":300,"component":299,"order":161},"BbPagination","\u002Fcomponents\u002Fbb-pagination",{"title":302,"path":303,"component":302,"order":165},"BbTabs","\u002Fcomponents\u002Fbb-tabs",{"title":305,"path":306,"component":305,"order":199},"BbTree","\u002Fcomponents\u002Fbb-tree",{"label":308,"entries":309},"Feedback",[310,313,316,319,322,325],{"title":311,"path":312,"component":311,"order":131},"BbAlert","\u002Fcomponents\u002Fbb-alert",{"title":314,"path":315,"component":314,"order":135},"BbBadge","\u002Fcomponents\u002Fbb-badge",{"title":317,"path":318,"component":317,"order":157},"BbIndicator","\u002Fcomponents\u002Fbb-indicator",{"title":320,"path":321,"component":320,"order":161},"BbProgress","\u002Fcomponents\u002Fbb-progress",{"title":323,"path":324,"component":323,"order":165},"BbSpinner","\u002Fcomponents\u002Fbb-spinner",{"title":326,"path":327,"component":326,"order":199},"BbToast","\u002Fcomponents\u002Fbb-toast",{"label":329,"entries":330},"Data Display",[331,334,337],{"title":332,"path":333,"component":332,"order":131},"BbAvatar","\u002Fcomponents\u002Fbb-avatar",{"title":335,"path":336,"component":335,"order":135},"BbIcon","\u002Fcomponents\u002Fbb-icon",{"title":338,"path":339,"component":338,"order":157},"BbTable","\u002Fcomponents\u002Fbb-table",{"label":341,"entries":342},"Layout & Utility",[343],{"title":344,"path":345,"component":344,"order":131},"BbSmoothHeight","\u002Fcomponents\u002Fbb-smooth-height",{"label":347,"entries":348},"Other",[349],{"title":350,"path":351,"component":350,"order":131},"BbAsterisk","\u002Fcomponents\u002Fbb-asterisk",null,{"id":354,"title":149,"body":355,"component":352,"description":1670,"extension":1671,"group":146,"meta":1672,"navigation":573,"order":131,"path":150,"sections":1673,"seo":1681,"stem":1682,"__hash__":1683},"docs_en\u002Fguides\u002Foptions-and-items.md",{"type":356,"value":357,"toc":1661},"minimark",[358,367,380,388,397,495,613,632,646,652,655,669,683,689,1000,1013,1019,1034,1037,1040,1073,1098,1104,1114,1157,1160,1265,1271,1278,1296,1316,1411,1417,1486,1504,1510,1521,1524,1572,1583,1591,1597,1625,1640,1657],[359,360,361,362,366],"p",{},"Every component that takes an ",[363,364,365],"code",{},"items"," prop shares one contract. You hand it your\ndomain objects as they are, and you tell it which field to display and which to\nstore. Nothing in your code maps rows into option objects.",[359,368,369,370,373,374,376,377,379],{},"This is the page the other playbooks build on.\n",[371,372,152],"a",{"href":108}," covers ",[363,375,365],{}," as a function, and\n",[371,378,155],{"href":102}," covers what happens to a bound value when the\noptions underneath it change.",[381,382,384],"h2",{"id":383},"vocabularies",[385,386,387],"span",{},"Two item vocabularies",[359,389,390,392,393],{},[363,391,365],{}," means two different things in this library, and picking the wrong one is\nthe most common early mistake. The question that settles it is ",[394,395,396],"strong",{},"whose data is\nit?",[398,399,400,422],"table",{},[401,402,403],"thead",{},[404,405,406,409,416],"tr",{},[407,408],"th",{},[407,410,411,412],{},"Accessor mode — ",[413,414,415],"em",{},"your data",[407,417,418,419],{},"Authored mode — ",[413,420,421],{},"your UI",[423,424,425,456,467,484],"tbody",{},[404,426,427,431,444],{},[428,429,430],"td",{},"Components",[428,432,433,435,436,435,438,435,440,435,442],{},[363,434,239],{},", ",[363,437,242],{},[363,439,227],{},[363,441,233],{},[363,443,251],{},[428,445,446,435,448,435,450,435,452,435,454],{},[363,447,269],{},[363,449,272],{},[363,451,302],{},[363,453,293],{},[363,455,305],{},[404,457,458,461,464],{},[428,459,460],{},"Shape",[428,462,463],{},"any shape — raw API rows",[428,465,466],{},"entries you write by hand",[404,468,469,472,481],{},[428,470,471],{},"Caption",[428,473,474,475,435,478],{},"you point at a field: ",[363,476,477],{},"item-text",[363,479,480],{},"item-value",[428,482,483],{},"it is on the entry itself",[404,485,486,489,492],{},[428,487,488],{},"This page",[428,490,491],{},"applies",[428,493,494],{},"mostly does not",[496,497,502],"pre",{"className":498,"code":499,"language":500,"meta":501,"style":501},"language-vue shiki shiki-themes github-light-high-contrast github-dark-high-contrast","\u003C!-- Accessor mode: customers came from an API, so keep their field names. -->\n\u003CBbSelect v-model=\"customerId\" :items=\"customers\" item-text=\"name\" item-value=\"id\" \u002F>\n\n\u003C!-- Authored mode: a menu you typed out. The caption lives on the entry. -->\n\u003CBbDropdown :items=\"[{ text: 'Edit', value: 'edit' }]\" \u002F>\n","vue","",[363,503,504,511,569,575,580],{"__ignoreMap":501},[385,505,507],{"class":506,"line":131},"line",[385,508,510],{"class":509},"sLBg1","\u003C!-- Accessor mode: customers came from an API, so keep their field names. -->\n",[385,512,513,517,520,524,527,530,533,535,538,540,542,544,547,549,552,554,558,561,563,566],{"class":506,"line":135},[385,514,516],{"class":515},"suds8","\u003C",[385,518,239],{"class":519},"sne4z",[385,521,523],{"class":522},"s-5SL"," v-model",[385,525,526],{"class":515},"=",[385,528,529],{"class":515},"\"",[385,531,532],{"class":515},"customerId",[385,534,529],{"class":515},[385,536,537],{"class":515}," :",[385,539,365],{"class":522},[385,541,526],{"class":515},[385,543,529],{"class":515},[385,545,546],{"class":515},"customers",[385,548,529],{"class":515},[385,550,551],{"class":522}," item-text",[385,553,526],{"class":515},[385,555,557],{"class":556},"sT6z2","\"name\"",[385,559,560],{"class":522}," item-value",[385,562,526],{"class":515},[385,564,565],{"class":556},"\"id\"",[385,567,568],{"class":515}," \u002F>\n",[385,570,571],{"class":506,"line":157},[385,572,574],{"emptyLinePlaceholder":573},true,"\n",[385,576,577],{"class":506,"line":161},[385,578,579],{"class":509},"\u003C!-- Authored mode: a menu you typed out. The caption lives on the entry. -->\n",[385,581,582,584,586,588,590,592,594,597,600,603,606,609,611],{"class":506,"line":165},[385,583,516],{"class":515},[385,585,269],{"class":519},[385,587,537],{"class":515},[385,589,365],{"class":522},[385,591,526],{"class":515},[385,593,529],{"class":515},[385,595,596],{"class":515},"[{ text: ",[385,598,599],{"class":556},"'Edit'",[385,601,602],{"class":515},", value: ",[385,604,605],{"class":556},"'edit'",[385,607,608],{"class":515}," }]",[385,610,529],{"class":515},[385,612,568],{"class":515},[359,614,615,616,619,620,623,624,627,628,631],{},"The split is deliberate. A picker lists records that arrive with their own field\nnames, ",[363,617,618],{},"full_name"," and ",[363,621,622],{},"uuid",". Forcing them into ",[363,625,626],{},"{ label, value }"," would mean a\npointless ",[363,629,630],{},".map()"," over every list. For the async form it cannot work at all: the\ncomponent fetches the items itself and never sees your array. A dropdown or a tab\nstrip is the opposite. You are writing those captions by hand\nanyway, so an accessor would be indirection with nothing to point at.",[359,633,634,638,639,641,642,645],{},[371,635,636],{"href":80},[363,637,338],{}," sits between the two. Rows stay raw data and\n",[363,640,480],{}," is row identity, but the captions live on ",[363,643,644],{},"columns[].label"," rather\nthan on the rows.",[381,647,649],{"id":648},"mapping",[385,650,651],{},"Mapping text and value",[359,653,654],{},"Everything below is accessor mode. There are three ways to resolve a field, and\nthey are in order of preference.",[359,656,657,660,661,664,665,668],{},[394,658,659],{},"Primitives"," need nothing. For a ",[363,662,663],{},"string[]"," or a ",[363,666,667],{},"number[]",", omit both props\nand the value is the primitive itself.",[359,670,671,674,675,678,679,682],{},[394,672,673],{},"Dot paths"," cover nested objects: ",[363,676,677],{},"item-text=\"profile.fullName\"",",\n",[363,680,681],{},"item-value=\"profile.id\"",".",[359,684,685,688],{},[394,686,687],{},"Extractor functions"," are for what a path cannot express: a name assembled\nfrom two columns, a computed label.",[496,690,692],{"className":498,"code":691,"language":500,"meta":501,"style":501},"\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { BbSelect } from 'bitboss-ui';\nimport type { Member } from '@\u002Ftypes';\n\nconst assignee = ref\u003Cstring | null>(null);\nconst members = ref\u003CMember[]>([]); \u002F\u002F raw API rows\n\nconst memberText = (m: Member) => `${m.firstName} ${m.lastName}`;\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n    \u003CBbSelect\n        v-model=\"assignee\"\n        label=\"Assignee\"\n        :items=\"members\"\n        :item-text=\"memberText\"\n        item-value=\"uuid\"\n    \u002F>\n\u003C\u002Ftemplate>\n",[363,693,694,715,733,747,764,768,803,826,830,882,891,895,905,914,930,941,958,974,985,991],{"__ignoreMap":501},[385,695,696,698,701,704,707,709,712],{"class":506,"line":131},[385,697,516],{"class":515},[385,699,700],{"class":519},"script",[385,702,703],{"class":522}," setup",[385,705,706],{"class":522}," lang",[385,708,526],{"class":515},[385,710,711],{"class":556},"\"ts\"",[385,713,714],{"class":515},">\n",[385,716,717,721,724,727,730],{"class":506,"line":135},[385,718,720],{"class":719},"sHUrx","import",[385,722,723],{"class":515}," { ref } ",[385,725,726],{"class":719},"from",[385,728,729],{"class":556}," 'vue'",[385,731,732],{"class":515},";\n",[385,734,735,737,740,742,745],{"class":506,"line":157},[385,736,720],{"class":719},[385,738,739],{"class":515}," { BbSelect } ",[385,741,726],{"class":719},[385,743,744],{"class":556}," 'bitboss-ui'",[385,746,732],{"class":515},[385,748,749,751,754,757,759,762],{"class":506,"line":161},[385,750,720],{"class":719},[385,752,753],{"class":719}," type",[385,755,756],{"class":515}," { Member } ",[385,758,726],{"class":719},[385,760,761],{"class":556}," '@\u002Ftypes'",[385,763,732],{"class":515},[385,765,766],{"class":506,"line":165},[385,767,574],{"emptyLinePlaceholder":573},[385,769,770,773,776,779,783,785,788,791,794,797,800],{"class":506,"line":199},[385,771,772],{"class":719},"const",[385,774,775],{"class":522}," assignee",[385,777,778],{"class":719}," =",[385,780,782],{"class":781},"sKwhi"," ref",[385,784,516],{"class":515},[385,786,787],{"class":522},"string",[385,789,790],{"class":719}," |",[385,792,793],{"class":522}," null",[385,795,796],{"class":515},">(",[385,798,799],{"class":522},"null",[385,801,802],{"class":515},");\n",[385,804,805,807,810,812,814,816,820,823],{"class":506,"line":203},[385,806,772],{"class":719},[385,808,809],{"class":522}," members",[385,811,778],{"class":719},[385,813,782],{"class":781},[385,815,516],{"class":515},[385,817,819],{"class":818},"soyes","Member",[385,821,822],{"class":515},"[]>([]); ",[385,824,825],{"class":509},"\u002F\u002F raw API rows\n",[385,827,828],{"class":506,"line":207},[385,829,574],{"emptyLinePlaceholder":573},[385,831,832,834,837,839,842,845,848,851,854,857,860,862,864,867,870,872,874,877,880],{"class":506,"line":211},[385,833,772],{"class":719},[385,835,836],{"class":781}," memberText",[385,838,778],{"class":719},[385,840,841],{"class":515}," (",[385,843,844],{"class":818},"m",[385,846,847],{"class":719},":",[385,849,850],{"class":818}," Member",[385,852,853],{"class":515},") ",[385,855,856],{"class":719},"=>",[385,858,859],{"class":556}," `${",[385,861,844],{"class":515},[385,863,682],{"class":556},[385,865,866],{"class":515},"firstName",[385,868,869],{"class":556},"} ${",[385,871,844],{"class":515},[385,873,682],{"class":556},[385,875,876],{"class":515},"lastName",[385,878,879],{"class":556},"}`",[385,881,732],{"class":515},[385,883,884,887,889],{"class":506,"line":215},[385,885,886],{"class":515},"\u003C\u002F",[385,888,700],{"class":519},[385,890,714],{"class":515},[385,892,893],{"class":506,"line":219},[385,894,574],{"emptyLinePlaceholder":573},[385,896,898,900,903],{"class":506,"line":897},12,[385,899,516],{"class":515},[385,901,902],{"class":519},"template",[385,904,714],{"class":515},[385,906,908,911],{"class":506,"line":907},13,[385,909,910],{"class":515},"    \u003C",[385,912,913],{"class":519},"BbSelect\n",[385,915,917,920,922,924,927],{"class":506,"line":916},14,[385,918,919],{"class":522},"        v-model",[385,921,526],{"class":515},[385,923,529],{"class":515},[385,925,926],{"class":515},"assignee",[385,928,929],{"class":515},"\"\n",[385,931,933,936,938],{"class":506,"line":932},15,[385,934,935],{"class":522},"        label",[385,937,526],{"class":515},[385,939,940],{"class":556},"\"Assignee\"\n",[385,942,944,947,949,951,953,956],{"class":506,"line":943},16,[385,945,946],{"class":515},"        :",[385,948,365],{"class":522},[385,950,526],{"class":515},[385,952,529],{"class":515},[385,954,955],{"class":515},"members",[385,957,929],{"class":515},[385,959,961,963,965,967,969,972],{"class":506,"line":960},17,[385,962,946],{"class":515},[385,964,477],{"class":522},[385,966,526],{"class":515},[385,968,529],{"class":515},[385,970,971],{"class":515},"memberText",[385,973,929],{"class":515},[385,975,977,980,982],{"class":506,"line":976},18,[385,978,979],{"class":522},"        item-value",[385,981,526],{"class":515},[385,983,984],{"class":556},"\"uuid\"\n",[385,986,988],{"class":506,"line":987},19,[385,989,990],{"class":515},"    \u002F>\n",[385,992,994,996,998],{"class":506,"line":993},20,[385,995,886],{"class":515},[385,997,902],{"class":519},[385,999,714],{"class":515},[359,1001,1002,1003,1005,1006,1008,1009,1012],{},"For object items, always set both props. The default ",[363,1004,480],{}," is the whole\nitem and the default ",[363,1007,477],{}," is ",[363,1010,1011],{},"JSON.stringify(item)",". That is a legible\nfailure rather than a silent one, but a failure all the same.",[381,1014,1016],{"id":1015},"identity",[385,1017,1018],{},"How a value is matched",[359,1020,1021,1022,1025,1026,1029,1030,1033],{},"Selection compares ",[363,1023,1024],{},"hash(itemValue(item))"," against ",[363,1027,1028],{},"hash(modelValue)",". That is a\n",[394,1031,1032],{},"deep value comparison",", not reference identity, so an object value still\nmatches after a refetch replaces the array.",[359,1035,1036],{},"Prefer primitive ids anyway: they are stable across refetches, cheap to submit,\nand they make the hash trivial.",[359,1038,1039],{},"Two consequences worth knowing before they surprise you:",[1041,1042,1043,1053],"ul",{},[1044,1045,1046,1049,1050,1052],"li",{},[394,1047,1048],{},"Duplicate values are silently dropped."," The first occurrence wins.\nGuarantee a unique ",[363,1051,480],{}," per option.",[1044,1054,1055,1061,1062,1065,1066,619,1069,1072],{},[394,1056,1057,1060],{},[363,1058,1059],{},"modelValue"," holds the resolved value, never the option wrapper."," Slots\nreceive the raw ",[363,1063,1064],{},"item"," plus the resolved ",[363,1067,1068],{},"text",[363,1070,1071],{},"value",". A custom row\nstill has everything the record carried.",[359,1074,1075,1076,1079,1080,1084,1085,1088,1089,1093,1094,1097],{},"Clicking the selected option never clears a single select. A second click\nre-picks it and closes the panel; the value does not change. Emptying always\ntakes an explicit control: ",[363,1077,1078],{},"clearable"," on\n",[371,1081,1082],{"href":66},[363,1083,239],{},", or the ",[363,1086,1087],{},"clear"," callback on\n",[371,1090,1091],{"href":68},[363,1092,242],{},"'s slots. Multiple mode\nstill toggles, because there removing a pick ",[413,1095,1096],{},"is"," the interaction.",[381,1099,1101],{"id":1100},"seeding",[385,1102,1103],{},"Seeding the model",[359,1105,1106,1107,1110,1111,1113],{},"A component in multiple mode ",[394,1108,1109],{},"throws at setup"," when ",[363,1112,1059],{}," is not an\narray. This is loud on purpose: the alternative is a control that silently does\nnothing.",[496,1115,1119],{"className":1116,"code":1117,"language":1118,"meta":501,"style":501},"language-ts shiki shiki-themes github-light-high-contrast github-dark-high-contrast","const channels = ref\u003Cstring[]>([]); \u002F\u002F correct\nconst channels = ref(); \u002F\u002F throws: \"multiple … but modelValue is not an array\"\n","ts",[363,1120,1121,1141],{"__ignoreMap":501},[385,1122,1123,1125,1128,1130,1132,1134,1136,1138],{"class":506,"line":131},[385,1124,772],{"class":719},[385,1126,1127],{"class":522}," channels",[385,1129,778],{"class":719},[385,1131,782],{"class":781},[385,1133,516],{"class":515},[385,1135,787],{"class":522},[385,1137,822],{"class":515},[385,1139,1140],{"class":509},"\u002F\u002F correct\n",[385,1142,1143,1145,1147,1149,1151,1154],{"class":506,"line":135},[385,1144,772],{"class":719},[385,1146,1127],{"class":522},[385,1148,778],{"class":719},[385,1150,782],{"class":781},[385,1152,1153],{"class":515},"(); ",[385,1155,1156],{"class":509},"\u002F\u002F throws: \"multiple … but modelValue is not an array\"\n",[359,1158,1159],{},"The default differs per component, which is the part people get wrong:",[398,1161,1162,1178],{},[401,1163,1164],{},[404,1165,1166,1169,1175],{},[407,1167,1168],{},"Component",[407,1170,1171,1174],{},[363,1172,1173],{},"multiple"," default",[407,1176,1177],{},"Seed with",[423,1179,1180,1206,1229,1243],{},[404,1181,1182,1189,1194],{},[428,1183,1184,1186,1187],{},[363,1185,239],{}," \u002F ",[363,1188,242],{},[428,1190,1191],{},[363,1192,1193],{},"false",[428,1195,1196,1199,1200,1203,1204],{},[363,1197,1198],{},"ref(null)",", or ",[363,1201,1202],{},"ref([])"," with ",[363,1205,1173],{},[404,1207,1208,1214,1221],{},[428,1209,1210,1186,1212],{},[363,1211,227],{},[363,1213,251],{},[428,1215,1216],{},[394,1217,1218],{},[363,1219,1220],{},"true",[428,1222,1223,1225,1226],{},[363,1224,1202],{},", unless you set ",[363,1227,1228],{},":multiple=\"false\"",[404,1230,1231,1235,1238],{},[428,1232,1233],{},[363,1234,233],{},[428,1236,1237],{},"single only",[428,1239,1240],{},[363,1241,1242],{},"ref\u003Cstring | null>(null)",[404,1244,1245,1249,1255],{},[428,1246,1247],{},[363,1248,338],{},[428,1250,1251],{},[394,1252,1253],{},[363,1254,1220],{},[428,1256,1257,1258,1261,1262],{},"defaults to ",[363,1259,1260],{},"[]","; throws only on a non-array ",[363,1263,1264],{},"v-model",[381,1266,1268],{"id":1267},"all-option",[385,1269,1270],{},"An \"All\" option",[359,1272,1273,1274,1277],{},"A single select whose top row means ",[413,1275,1276],{},"everything",": \"All locations\", \"Any status\",\nthe no-filter row. This is not a select-all button, which fills a multiple array\nwith every value.",[359,1279,1280,1281,1284,1285,1288,1289,1292,1293,1295],{},"Model it as a real option with ",[363,1282,1283],{},"value: null",", returned by your provider or\npresent in your array like any other option. The components never synthesise it.\nIt resolves and renders as the selection, because matching is on ",[363,1286,1287],{},"hash(value)","\nand selection is marked with ",[363,1290,1291],{},"!== undefined",", so ",[363,1294,799],{}," is a legitimate value.",[1297,1298,1299],"warning",{},[359,1300,1301,1302,1305,1306,1308,1309,1312,1313,1315],{},"With a ",[394,1303,1304],{},"function"," ",[363,1307,365],{},", set ",[363,1310,1311],{},"prefill: true",". ",[363,1314,799],{}," is also the value the\nlibrary reads as \"nothing selected\", so the \"model has a value, load eagerly\"\nupgrade does not fire. Nothing loads, no text resolves, and the select renders\nits placeholder: greyed, indistinguishable from an empty field, while the model\nholds a real choice.",[496,1317,1319],{"className":498,"code":1318,"language":500,"meta":501,"style":501},"\u003C!-- null means \"All\", and items is a provider → say so -->\n\u003CBbSelect v-model=\"location\" :items=\"loadLocations\" :prefill=\"true\" \u002F>\n\n\u003C!-- array items: nothing needed, arrays are never lazy -->\n\u003CBbSelect v-model=\"location\" :items=\"locations\" \u002F>\n",[363,1320,1321,1326,1371,1375,1380],{"__ignoreMap":501},[385,1322,1323],{"class":506,"line":131},[385,1324,1325],{"class":509},"\u003C!-- null means \"All\", and items is a provider → say so -->\n",[385,1327,1328,1330,1332,1334,1336,1338,1341,1343,1345,1347,1349,1351,1354,1356,1358,1361,1363,1365,1367,1369],{"class":506,"line":135},[385,1329,516],{"class":515},[385,1331,239],{"class":519},[385,1333,523],{"class":522},[385,1335,526],{"class":515},[385,1337,529],{"class":515},[385,1339,1340],{"class":515},"location",[385,1342,529],{"class":515},[385,1344,537],{"class":515},[385,1346,365],{"class":522},[385,1348,526],{"class":515},[385,1350,529],{"class":515},[385,1352,1353],{"class":515},"loadLocations",[385,1355,529],{"class":515},[385,1357,537],{"class":515},[385,1359,1360],{"class":522},"prefill",[385,1362,526],{"class":515},[385,1364,529],{"class":515},[385,1366,1220],{"class":522},[385,1368,529],{"class":515},[385,1370,568],{"class":515},[385,1372,1373],{"class":506,"line":157},[385,1374,574],{"emptyLinePlaceholder":573},[385,1376,1377],{"class":506,"line":161},[385,1378,1379],{"class":509},"\u003C!-- array items: nothing needed, arrays are never lazy -->\n",[385,1381,1382,1384,1386,1388,1390,1392,1394,1396,1398,1400,1402,1404,1407,1409],{"class":506,"line":165},[385,1383,516],{"class":515},[385,1385,239],{"class":519},[385,1387,523],{"class":522},[385,1389,526],{"class":515},[385,1391,529],{"class":515},[385,1393,1340],{"class":515},[385,1395,529],{"class":515},[385,1397,537],{"class":515},[385,1399,365],{"class":522},[385,1401,526],{"class":515},[385,1403,529],{"class":515},[385,1405,1406],{"class":515},"locations",[385,1408,529],{"class":515},[385,1410,568],{"class":515},[359,1412,1413,1414,1416],{},"Overloading ",[363,1415,799],{}," is a supported pattern, and you inherit four behaviours with\nit, because the component cannot tell your two meanings apart:",[398,1418,1419,1429],{},[401,1420,1421],{},[404,1422,1423,1426],{},[407,1424,1425],{},"Behaviour",[407,1427,1428],{},"Consequence",[423,1430,1431,1446,1457,1474],{},[404,1432,1433,1440],{},[428,1434,1435,1437,1438],{},[363,1436,1087],{}," emits ",[363,1439,799],{},[428,1441,1442,1443],{},"The clear affordance ",[394,1444,1445],{},"selects \"All\"",[404,1447,1448,1451],{},[428,1449,1450],{},"empty is always coherent",[428,1452,1453,1456],{},[363,1454,1455],{},"enforce-coherence"," never prunes the \"All\" value",[404,1458,1459,1464],{},[428,1460,1461,1462],{},"single-mode enforcement emits ",[363,1463,799],{},[428,1465,1466,1467,1470,1471],{},"Pruning some ",[413,1468,1469],{},"other"," stale value ",[394,1472,1473],{},"widens to \"All\"",[404,1475,1476,1481],{},[428,1477,1478,1480],{},[363,1479,799],{}," reads as empty",[428,1482,1483,1484],{},"A null model stays lazy even with ",[363,1485,1455],{},[359,1487,1488,1489,1492,1493,1495,1496,1499,1500,1503],{},"Sometimes \"everything\" and \"nothing\" have to stay distinct: a required field, or\na filter where silently widening is unsafe. Use a sentinel such as\n",[363,1490,1491],{},"value: 'all'"," there. ",[363,1494,799],{}," then keeps meaning empty. The sentinel has to appear\nin ",[394,1497,1498],{},"every"," provider response or ",[371,1501,1502],{"href":102},"coherence"," prunes it,\nand it counts as a value, so it triggers the eager load by itself.",[381,1505,1507],{"id":1506},"disabling",[385,1508,1509],{},"Disabling a choice",[359,1511,1512,1513,1516,1517,1520],{},"A ",[363,1514,1515],{},"disabled"," field on the item object is ",[394,1518,1519],{},"plain domain data",". Every options\ncomponent ignores it. The per-item behaviour that existed in v2 was removed, and\nnothing warns, so a row you expected to be greyed is simply pickable.",[359,1522,1523],{},"The supported surface is three props:",[1041,1525,1526,1533,1564],{},[1044,1527,1528,1532],{},[394,1529,1530],{},[363,1531,1515],{}," turns off the whole control.",[1044,1534,1535,1540,1541,435,1543,678,1545,435,1547,435,1549,619,1551,1553,1554,1557,1558,1560,1561,1563],{},[394,1536,1537],{},[363,1538,1539],{},"selectable"," gates per option, on ",[363,1542,227],{},[363,1544,233],{},[363,1546,251],{},[363,1548,239],{},[363,1550,242],{},[363,1552,338],{},". It takes a\nglobal boolean or a predicate ",[363,1555,1556],{},"(item) => boolean","; rejected options render\ndisabled. It defaults to ",[363,1559,1220],{}," on the option components. On ",[363,1562,338],{}," it is\nunset until you pass it, and unset there means \"no selection column\", not\n\"every row selectable\".",[1044,1565,1566,1571],{},[394,1567,1568],{},[363,1569,1570],{},"max"," caps a multiple selection. At the cap, unselected options\nauto-disable while selected ones never do, so the user can always deselect.",[359,1573,1574,1575,1578,1579,1582],{},"Feed your own availability flag to the predicate:\n",[363,1576,1577],{},":selectable=\"(item) => !item.disabled\"",", or\n",[363,1580,1581],{},":selectable=\"(user) => user.active\"",". Filter the rows out entirely when a dead\none would only add noise.",[359,1584,1585,1587,1588,1590],{},[363,1586,269],{}," items are buttons rather than options, so ",[363,1589,1515],{}," there is an\nordinary button prop and works as you expect.",[381,1592,1594],{"id":1593},"navigating",[385,1595,1596],{},"Items that navigate",[359,1598,1599,1600,1602,1603,1606,1607,1610,1611,1203,1615,1617,1618,1620,1621,1624],{},"When an item is a link, the component navigates, never your code. ",[363,1601,269],{},"\nitems take ",[363,1604,1605],{},"href"," or ",[363,1608,1609],{},"to","; a table row link is a\n",[371,1612,1613],{"href":18},[363,1614,185],{},[363,1616,1605],{},"\u002F",[363,1619,1609],{}," in a cell or the\n",[363,1622,1623],{},"#actions"," slot.",[359,1626,1627,1628,1631,1632,1635,1636,1639],{},"Never write ",[363,1629,1630],{},"onClick: () => router.push(…)"," on an item, and never a row\n",[363,1633,1634],{},"@click"," that sets ",[363,1637,1638],{},"window.location",". Both throw away middle-click, open in a\nnew tab, and copy address. Neither is any shorter.",[359,1641,1642,1643,435,1645,1647,1648,1650,1651,1653,1654,1656],{},"Once an array-backed control works, keep the same ",[363,1644,477],{},[363,1646,480],{}," and\nmodel shape when moving to a provider. Only ",[363,1649,365],{}," changes from an array to a\nfunction. Continue with ",[371,1652,152],{"href":108},", then add\n",[371,1655,1502],{"href":102}," if another field can invalidate the current\nselection.",[1658,1659,1660],"style",{},"html pre.shiki code .sLBg1, html code.shiki .sLBg1{--shiki-default:#66707B;--shiki-dark:#BDC4CC}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);}html pre.shiki code .sHUrx, html code.shiki .sHUrx{--shiki-default:#A0111F;--shiki-dark:#FF9492}html pre.shiki code .sKwhi, html code.shiki .sKwhi{--shiki-default:#622CBC;--shiki-dark:#DBB7FF}html pre.shiki code .soyes, html code.shiki .soyes{--shiki-default:#702C00;--shiki-dark:#FFB757}",{"title":501,"searchDepth":157,"depth":157,"links":1662},[1663,1664,1665,1666,1667,1668,1669],{"id":383,"depth":135,"text":387},{"id":648,"depth":135,"text":651},{"id":1015,"depth":135,"text":1018},{"id":1100,"depth":135,"text":1103},{"id":1267,"depth":135,"text":1270},{"id":1506,"depth":135,"text":1509},{"id":1593,"depth":135,"text":1596},"How every component with an items prop turns your domain objects into options.","md",{},[1674,1675,1676,1677,1678,1679,1680],{"id":383,"title":387},{"id":648,"title":651},{"id":1015,"title":1018},{"id":1100,"title":1103},{"id":1267,"title":1270},{"id":1506,"title":1509},{"id":1593,"title":1596},{"title":149,"description":1670},"guides\u002Foptions-and-items","kaikhlKYIkblh5GEM4_gAvQSDegXfQxpaE0bmhuCQm0",1790005168682]