[{"data":1,"prerenderedAt":1791},["ShallowReactive",2],{"locale-alternates":3,"docs-nav-en":134,"api-none":377,"page-en-\u002Fcomponents\u002Fbb-text-input":378,"pt-showcase-BbTextInput":1442},{"\u002Fit\u002Fcomponenti\u002Fbb-accordion":4,"\u002Fen\u002Fcomponents\u002Fbb-accordion":5,"\u002Fit\u002Fcomponenti\u002Fbb-alert":6,"\u002Fen\u002Fcomponents\u002Fbb-alert":7,"\u002Fit\u002Fcomponenti\u002Fbb-asterisk":8,"\u002Fen\u002Fcomponents\u002Fbb-asterisk":9,"\u002Fit\u002Fcomponenti\u002Fbb-avatar":10,"\u002Fen\u002Fcomponents\u002Fbb-avatar":11,"\u002Fit\u002Fcomponenti\u002Fbb-badge":12,"\u002Fen\u002Fcomponents\u002Fbb-badge":13,"\u002Fit\u002Fcomponenti\u002Fbb-base-button":14,"\u002Fen\u002Fcomponents\u002Fbb-base-button":15,"\u002Fit\u002Fcomponenti\u002Fbb-breadcrumbs":16,"\u002Fen\u002Fcomponents\u002Fbb-breadcrumbs":17,"\u002Fit\u002Fcomponenti\u002Fbb-button":18,"\u002Fen\u002Fcomponents\u002Fbb-button":19,"\u002Fit\u002Fcomponenti\u002Fbb-calendar":20,"\u002Fen\u002Fcomponents\u002Fbb-calendar":21,"\u002Fit\u002Fcomponenti\u002Fbb-checkbox":22,"\u002Fen\u002Fcomponents\u002Fbb-checkbox":23,"\u002Fit\u002Fcomponenti\u002Fbb-checkbox-group":24,"\u002Fen\u002Fcomponents\u002Fbb-checkbox-group":25,"\u002Fit\u002Fcomponenti\u002Fbb-collapsible":26,"\u002Fen\u002Fcomponents\u002Fbb-collapsible":27,"\u002Fit\u002Fcomponenti\u002Fbb-color-input":28,"\u002Fen\u002Fcomponents\u002Fbb-color-input":29,"\u002Fit\u002Fcomponenti\u002Fbb-color-palette":30,"\u002Fen\u002Fcomponents\u002Fbb-color-palette":31,"\u002Fit\u002Fcomponenti\u002Fbb-confirm":32,"\u002Fen\u002Fcomponents\u002Fbb-confirm":33,"\u002Fit\u002Fcomponenti\u002Fbb-date-picker":34,"\u002Fen\u002Fcomponents\u002Fbb-date-picker":35,"\u002Fit\u002Fcomponenti\u002Fbb-date-picker-input":36,"\u002Fen\u002Fcomponents\u002Fbb-date-picker-input":37,"\u002Fit\u002Fcomponenti\u002Fbb-dialog":38,"\u002Fen\u002Fcomponents\u002Fbb-dialog":39,"\u002Fit\u002Fcomponenti\u002Fbb-dropdown":40,"\u002Fen\u002Fcomponents\u002Fbb-dropdown":41,"\u002Fit\u002Fcomponenti\u002Fbb-dropdown-button":42,"\u002Fen\u002Fcomponents\u002Fbb-dropdown-button":43,"\u002Fit\u002Fcomponenti\u002Fbb-dropzone":44,"\u002Fen\u002Fcomponents\u002Fbb-dropzone":45,"\u002Fit\u002Fcomponenti\u002Fbb-form":46,"\u002Fen\u002Fcomponents\u002Fbb-form":47,"\u002Fit\u002Fcomponenti\u002Fbb-hover-card":48,"\u002Fen\u002Fcomponents\u002Fbb-hover-card":49,"\u002Fit\u002Fcomponenti\u002Fbb-icon":50,"\u002Fen\u002Fcomponents\u002Fbb-icon":51,"\u002Fit\u002Fcomponenti\u002Fbb-indicator":52,"\u002Fen\u002Fcomponents\u002Fbb-indicator":53,"\u002Fit\u002Fcomponenti\u002Fbb-number-input":54,"\u002Fen\u002Fcomponents\u002Fbb-number-input":55,"\u002Fit\u002Fcomponenti\u002Fbb-off-canvas":56,"\u002Fen\u002Fcomponents\u002Fbb-off-canvas":57,"\u002Fit\u002Fcomponenti\u002Fbb-pagination":58,"\u002Fen\u002Fcomponents\u002Fbb-pagination":59,"\u002Fit\u002Fcomponenti\u002Fbb-popover":60,"\u002Fen\u002Fcomponents\u002Fbb-popover":61,"\u002Fit\u002Fcomponenti\u002Fbb-progress":62,"\u002Fen\u002Fcomponents\u002Fbb-progress":63,"\u002Fit\u002Fcomponenti\u002Fbb-radio":64,"\u002Fen\u002Fcomponents\u002Fbb-radio":65,"\u002Fit\u002Fcomponenti\u002Fbb-radio-group":66,"\u002Fen\u002Fcomponents\u002Fbb-radio-group":67,"\u002Fit\u002Fcomponenti\u002Fbb-rating":68,"\u002Fen\u002Fcomponents\u002Fbb-rating":69,"\u002Fit\u002Fcomponenti\u002Fbb-select":70,"\u002Fen\u002Fcomponents\u002Fbb-select":71,"\u002Fit\u002Fcomponenti\u002Fbb-select-popover":72,"\u002Fen\u002Fcomponents\u002Fbb-select-popover":73,"\u002Fit\u002Fcomponenti\u002Fbb-slider":74,"\u002Fen\u002Fcomponents\u002Fbb-slider":75,"\u002Fit\u002Fcomponenti\u002Fbb-smooth-height":76,"\u002Fen\u002Fcomponents\u002Fbb-smooth-height":77,"\u002Fit\u002Fcomponenti\u002Fbb-spinner":78,"\u002Fen\u002Fcomponents\u002Fbb-spinner":79,"\u002Fit\u002Fcomponenti\u002Fbb-switch":80,"\u002Fen\u002Fcomponents\u002Fbb-switch":81,"\u002Fit\u002Fcomponenti\u002Fbb-switch-group":82,"\u002Fen\u002Fcomponents\u002Fbb-switch-group":83,"\u002Fit\u002Fcomponenti\u002Fbb-table":84,"\u002Fen\u002Fcomponents\u002Fbb-table":85,"\u002Fit\u002Fcomponenti\u002Fbb-tabs":86,"\u002Fen\u002Fcomponents\u002Fbb-tabs":87,"\u002Fit\u002Fcomponenti\u002Fbb-tag":88,"\u002Fen\u002Fcomponents\u002Fbb-tag":89,"\u002Fit\u002Fcomponenti\u002Fbb-text-input":90,"\u002Fen\u002Fcomponents\u002Fbb-text-input":91,"\u002Fit\u002Fcomponenti\u002Fbb-textarea":92,"\u002Fen\u002Fcomponents\u002Fbb-textarea":93,"\u002Fit\u002Fcomponenti\u002Fbb-time-picker":94,"\u002Fen\u002Fcomponents\u002Fbb-time-picker":95,"\u002Fit\u002Fcomponenti\u002Fbb-time-picker-input":96,"\u002Fen\u002Fcomponents\u002Fbb-time-picker-input":97,"\u002Fit\u002Fcomponenti\u002Fbb-toast":98,"\u002Fen\u002Fcomponents\u002Fbb-toast":99,"\u002Fit\u002Fcomponenti\u002Fbb-tooltip":100,"\u002Fen\u002Fcomponents\u002Fbb-tooltip":101,"\u002Fit\u002Fcomponenti\u002Fbb-tree":102,"\u002Fen\u002Fcomponents\u002Fbb-tree":103,"\u002Fit\u002Fguide\u002Fadoption-checklist":104,"\u002Fen\u002Fguides\u002Fadoption-checklist":105,"\u002Fit\u002Fguide\u002Fai-agents":106,"\u002Fen\u002Fguides\u002Fai-agents":107,"\u002Fit\u002Fguide\u002Fcoherence":108,"\u002Fen\u002Fguides\u002Fcoherence":109,"\u002Fit\u002Fguide\u002Fdesign-language":110,"\u002Fen\u002Fguides\u002Fdesign-language":111,"\u002Fit\u002Fguide\u002Fdesign-tokens":112,"\u002Fen\u002Fguides\u002Fdesign-tokens":113,"\u002Fit\u002Fguide\u002Ffetching-data":114,"\u002Fen\u002Fguides\u002Ffetching-data":115,"\u002Fit\u002Fguide\u002Ficons":116,"\u002Fen\u002Fguides\u002Ficons":117,"\u002Fit\u002Fguide\u002Finertia":118,"\u002Fen\u002Fguides\u002Finertia":119,"\u002Fit\u002Fguide\u002Finstallation":120,"\u002Fen\u002Fguides\u002Finstallation":121,"\u002Fit\u002Fguide\u002Fmigration":122,"\u002Fen\u002Fguides\u002Fmigration":123,"\u002Fit\u002Fguide\u002Fnuxt":124,"\u002Fen\u002Fguides\u002Fnuxt":125,"\u002Fit\u002Fguide\u002Foptions-and-items":126,"\u002Fen\u002Fguides\u002Foptions-and-items":127,"\u002Fit\u002Fguide\u002Fpassthrough":128,"\u002Fen\u002Fguides\u002Fpassthrough":129,"\u002Fit\u002Fguide\u002Fpreset-components":130,"\u002Fen\u002Fguides\u002Fpreset-components":131,"\u002Fit\u002Fguide\u002Fvalidated-forms":132,"\u002Fen\u002Fguides\u002Fvalidated-forms":133},"\u002Fen\u002Fcomponents\u002Fbb-accordion","\u002Fit\u002Fcomponenti\u002Fbb-accordion","\u002Fen\u002Fcomponents\u002Fbb-alert","\u002Fit\u002Fcomponenti\u002Fbb-alert","\u002Fen\u002Fcomponents\u002Fbb-asterisk","\u002Fit\u002Fcomponenti\u002Fbb-asterisk","\u002Fen\u002Fcomponents\u002Fbb-avatar","\u002Fit\u002Fcomponenti\u002Fbb-avatar","\u002Fen\u002Fcomponents\u002Fbb-badge","\u002Fit\u002Fcomponenti\u002Fbb-badge","\u002Fen\u002Fcomponents\u002Fbb-base-button","\u002Fit\u002Fcomponenti\u002Fbb-base-button","\u002Fen\u002Fcomponents\u002Fbb-breadcrumbs","\u002Fit\u002Fcomponenti\u002Fbb-breadcrumbs","\u002Fen\u002Fcomponents\u002Fbb-button","\u002Fit\u002Fcomponenti\u002Fbb-button","\u002Fen\u002Fcomponents\u002Fbb-calendar","\u002Fit\u002Fcomponenti\u002Fbb-calendar","\u002Fen\u002Fcomponents\u002Fbb-checkbox","\u002Fit\u002Fcomponenti\u002Fbb-checkbox","\u002Fen\u002Fcomponents\u002Fbb-checkbox-group","\u002Fit\u002Fcomponenti\u002Fbb-checkbox-group","\u002Fen\u002Fcomponents\u002Fbb-collapsible","\u002Fit\u002Fcomponenti\u002Fbb-collapsible","\u002Fen\u002Fcomponents\u002Fbb-color-input","\u002Fit\u002Fcomponenti\u002Fbb-color-input","\u002Fen\u002Fcomponents\u002Fbb-color-palette","\u002Fit\u002Fcomponenti\u002Fbb-color-palette","\u002Fen\u002Fcomponents\u002Fbb-confirm","\u002Fit\u002Fcomponenti\u002Fbb-confirm","\u002Fen\u002Fcomponents\u002Fbb-date-picker","\u002Fit\u002Fcomponenti\u002Fbb-date-picker","\u002Fen\u002Fcomponents\u002Fbb-date-picker-input","\u002Fit\u002Fcomponenti\u002Fbb-date-picker-input","\u002Fen\u002Fcomponents\u002Fbb-dialog","\u002Fit\u002Fcomponenti\u002Fbb-dialog","\u002Fen\u002Fcomponents\u002Fbb-dropdown","\u002Fit\u002Fcomponenti\u002Fbb-dropdown","\u002Fen\u002Fcomponents\u002Fbb-dropdown-button","\u002Fit\u002Fcomponenti\u002Fbb-dropdown-button","\u002Fen\u002Fcomponents\u002Fbb-dropzone","\u002Fit\u002Fcomponenti\u002Fbb-dropzone","\u002Fen\u002Fcomponents\u002Fbb-form","\u002Fit\u002Fcomponenti\u002Fbb-form","\u002Fen\u002Fcomponents\u002Fbb-hover-card","\u002Fit\u002Fcomponenti\u002Fbb-hover-card","\u002Fen\u002Fcomponents\u002Fbb-icon","\u002Fit\u002Fcomponenti\u002Fbb-icon","\u002Fen\u002Fcomponents\u002Fbb-indicator","\u002Fit\u002Fcomponenti\u002Fbb-indicator","\u002Fen\u002Fcomponents\u002Fbb-number-input","\u002Fit\u002Fcomponenti\u002Fbb-number-input","\u002Fen\u002Fcomponents\u002Fbb-off-canvas","\u002Fit\u002Fcomponenti\u002Fbb-off-canvas","\u002Fen\u002Fcomponents\u002Fbb-pagination","\u002Fit\u002Fcomponenti\u002Fbb-pagination","\u002Fen\u002Fcomponents\u002Fbb-popover","\u002Fit\u002Fcomponenti\u002Fbb-popover","\u002Fen\u002Fcomponents\u002Fbb-progress","\u002Fit\u002Fcomponenti\u002Fbb-progress","\u002Fen\u002Fcomponents\u002Fbb-radio","\u002Fit\u002Fcomponenti\u002Fbb-radio","\u002Fen\u002Fcomponents\u002Fbb-radio-group","\u002Fit\u002Fcomponenti\u002Fbb-radio-group","\u002Fen\u002Fcomponents\u002Fbb-rating","\u002Fit\u002Fcomponenti\u002Fbb-rating","\u002Fen\u002Fcomponents\u002Fbb-select","\u002Fit\u002Fcomponenti\u002Fbb-select","\u002Fen\u002Fcomponents\u002Fbb-select-popover","\u002Fit\u002Fcomponenti\u002Fbb-select-popover","\u002Fen\u002Fcomponents\u002Fbb-slider","\u002Fit\u002Fcomponenti\u002Fbb-slider","\u002Fen\u002Fcomponents\u002Fbb-smooth-height","\u002Fit\u002Fcomponenti\u002Fbb-smooth-height","\u002Fen\u002Fcomponents\u002Fbb-spinner","\u002Fit\u002Fcomponenti\u002Fbb-spinner","\u002Fen\u002Fcomponents\u002Fbb-switch","\u002Fit\u002Fcomponenti\u002Fbb-switch","\u002Fen\u002Fcomponents\u002Fbb-switch-group","\u002Fit\u002Fcomponenti\u002Fbb-switch-group","\u002Fen\u002Fcomponents\u002Fbb-table","\u002Fit\u002Fcomponenti\u002Fbb-table","\u002Fen\u002Fcomponents\u002Fbb-tabs","\u002Fit\u002Fcomponenti\u002Fbb-tabs","\u002Fen\u002Fcomponents\u002Fbb-tag","\u002Fit\u002Fcomponenti\u002Fbb-tag","\u002Fen\u002Fcomponents\u002Fbb-text-input","\u002Fit\u002Fcomponenti\u002Fbb-text-input","\u002Fen\u002Fcomponents\u002Fbb-textarea","\u002Fit\u002Fcomponenti\u002Fbb-textarea","\u002Fen\u002Fcomponents\u002Fbb-time-picker","\u002Fit\u002Fcomponenti\u002Fbb-time-picker","\u002Fen\u002Fcomponents\u002Fbb-time-picker-input","\u002Fit\u002Fcomponenti\u002Fbb-time-picker-input","\u002Fen\u002Fcomponents\u002Fbb-toast","\u002Fit\u002Fcomponenti\u002Fbb-toast","\u002Fen\u002Fcomponents\u002Fbb-tooltip","\u002Fit\u002Fcomponenti\u002Fbb-tooltip","\u002Fen\u002Fcomponents\u002Fbb-tree","\u002Fit\u002Fcomponenti\u002Fbb-tree","\u002Fen\u002Fguides\u002Fadoption-checklist","\u002Fit\u002Fguide\u002Fadoption-checklist","\u002Fen\u002Fguides\u002Fai-agents","\u002Fit\u002Fguide\u002Fai-agents","\u002Fen\u002Fguides\u002Fcoherence","\u002Fit\u002Fguide\u002Fcoherence","\u002Fen\u002Fguides\u002Fdesign-language","\u002Fit\u002Fguide\u002Fdesign-language","\u002Fen\u002Fguides\u002Fdesign-tokens","\u002Fit\u002Fguide\u002Fdesign-tokens","\u002Fen\u002Fguides\u002Ffetching-data","\u002Fit\u002Fguide\u002Ffetching-data","\u002Fen\u002Fguides\u002Ficons","\u002Fit\u002Fguide\u002Ficons","\u002Fen\u002Fguides\u002Finertia","\u002Fit\u002Fguide\u002Finertia","\u002Fen\u002Fguides\u002Finstallation","\u002Fit\u002Fguide\u002Finstallation","\u002Fen\u002Fguides\u002Fmigration","\u002Fit\u002Fguide\u002Fmigration","\u002Fen\u002Fguides\u002Fnuxt","\u002Fit\u002Fguide\u002Fnuxt","\u002Fen\u002Fguides\u002Foptions-and-items","\u002Fit\u002Fguide\u002Foptions-and-items","\u002Fen\u002Fguides\u002Fpassthrough","\u002Fit\u002Fguide\u002Fpassthrough","\u002Fen\u002Fguides\u002Fpreset-components","\u002Fit\u002Fguide\u002Fpreset-components","\u002Fen\u002Fguides\u002Fvalidated-forms","\u002Fit\u002Fguide\u002Fvalidated-forms",[135,150,162,186,198,242,275,311,332,353,365,371],{"label":136,"entries":137},"Getting started",[138,142,146],{"title":139,"path":140,"order":141},"Installation","\u002Fguides\u002Finstallation",1,{"title":143,"path":144,"order":145},"Migrating from v2","\u002Fguides\u002Fmigration",2,{"title":147,"path":148,"order":149},"Adoption checklist","\u002Fguides\u002Fadoption-checklist",3,{"label":151,"entries":152},"Design system",[153,156,159],{"title":154,"path":155,"order":141},"Design tokens","\u002Fguides\u002Fdesign-tokens",{"title":157,"path":158,"order":145},"Design language","\u002Fguides\u002Fdesign-language",{"title":160,"path":161,"order":149},"Passthrough","\u002Fguides\u002Fpassthrough",{"label":163,"entries":164},"Playbooks",[165,168,171,174,178,182],{"title":166,"path":167,"order":141},"Options and items","\u002Fguides\u002Foptions-and-items",{"title":169,"path":170,"order":145},"Fetching data","\u002Fguides\u002Ffetching-data",{"title":172,"path":173,"order":149},"Coherence","\u002Fguides\u002Fcoherence",{"title":175,"path":176,"order":177},"Validated forms","\u002Fguides\u002Fvalidated-forms",4,{"title":179,"path":180,"order":181},"Icons","\u002Fguides\u002Ficons",5,{"title":183,"path":184,"order":185},"Preset components","\u002Fguides\u002Fpreset-components",6,{"label":187,"entries":188},"Ecosystem",[189,192,195],{"title":190,"path":191,"order":141},"Inertia and Laravel","\u002Fguides\u002Finertia",{"title":193,"path":194,"order":145},"Nuxt","\u002Fguides\u002Fnuxt",{"title":196,"path":197,"order":149},"AI agents","\u002Fguides\u002Fai-agents",{"label":199,"entries":200},"Inputs",[201,204,207,210,213,216,219,222,226,230,234,238],{"title":202,"path":203,"component":202,"order":141},"BbBaseButton","\u002Fcomponents\u002Fbb-base-button",{"title":205,"path":206,"component":205,"order":145},"BbButton","\u002Fcomponents\u002Fbb-button",{"title":208,"path":209,"component":208,"order":149},"BbCalendar","\u002Fcomponents\u002Fbb-calendar",{"title":211,"path":212,"component":211,"order":149},"BbColorInput","\u002Fcomponents\u002Fbb-color-input",{"title":214,"path":215,"component":214,"order":177},"BbDatePickerInput","\u002Fcomponents\u002Fbb-date-picker-input",{"title":217,"path":218,"component":217,"order":181},"BbDropzone","\u002Fcomponents\u002Fbb-dropzone",{"title":220,"path":221,"component":220,"order":185},"BbForm","\u002Fcomponents\u002Fbb-form",{"title":223,"path":224,"component":223,"order":225},"BbNumberInput","\u002Fcomponents\u002Fbb-number-input",7,{"title":227,"path":228,"component":227,"order":229},"BbTag","\u002Fcomponents\u002Fbb-tag",8,{"title":231,"path":232,"component":231,"order":233},"BbTextarea","\u002Fcomponents\u002Fbb-textarea",9,{"title":235,"path":236,"component":235,"order":237},"BbTextInput","\u002Fcomponents\u002Fbb-text-input",10,{"title":239,"path":240,"component":239,"order":241},"BbTimePickerInput","\u002Fcomponents\u002Fbb-time-picker-input",11,{"label":243,"entries":244},"Selection",[245,248,251,254,257,260,263,266,269,272],{"title":246,"path":247,"component":246,"order":141},"BbCheckbox","\u002Fcomponents\u002Fbb-checkbox",{"title":249,"path":250,"component":249,"order":145},"BbCheckboxGroup","\u002Fcomponents\u002Fbb-checkbox-group",{"title":252,"path":253,"component":252,"order":149},"BbRadio","\u002Fcomponents\u002Fbb-radio",{"title":255,"path":256,"component":255,"order":177},"BbRadioGroup","\u002Fcomponents\u002Fbb-radio-group",{"title":258,"path":259,"component":258,"order":181},"BbRating","\u002Fcomponents\u002Fbb-rating",{"title":261,"path":262,"component":261,"order":185},"BbSelect","\u002Fcomponents\u002Fbb-select",{"title":264,"path":265,"component":264,"order":225},"BbSelectPopover","\u002Fcomponents\u002Fbb-select-popover",{"title":267,"path":268,"component":267,"order":229},"BbSlider","\u002Fcomponents\u002Fbb-slider",{"title":270,"path":271,"component":270,"order":233},"BbSwitch","\u002Fcomponents\u002Fbb-switch",{"title":273,"path":274,"component":273,"order":237},"BbSwitchGroup","\u002Fcomponents\u002Fbb-switch-group",{"label":276,"entries":277},"Overlay",[278,281,284,287,290,293,296,299,302,305,308],{"title":279,"path":280,"component":279,"order":141},"BbColorPalette","\u002Fcomponents\u002Fbb-color-palette",{"title":282,"path":283,"component":282,"order":145},"BbConfirm","\u002Fcomponents\u002Fbb-confirm",{"title":285,"path":286,"component":285,"order":149},"BbDatePicker","\u002Fcomponents\u002Fbb-date-picker",{"title":288,"path":289,"component":288,"order":177},"BbDialog","\u002Fcomponents\u002Fbb-dialog",{"title":291,"path":292,"component":291,"order":181},"BbDropdown","\u002Fcomponents\u002Fbb-dropdown",{"title":294,"path":295,"component":294,"order":185},"BbDropdownButton","\u002Fcomponents\u002Fbb-dropdown-button",{"title":297,"path":298,"component":297,"order":225},"BbHoverCard","\u002Fcomponents\u002Fbb-hover-card",{"title":300,"path":301,"component":300,"order":225},"BbOffCanvas","\u002Fcomponents\u002Fbb-off-canvas",{"title":303,"path":304,"component":303,"order":229},"BbPopover","\u002Fcomponents\u002Fbb-popover",{"title":306,"path":307,"component":306,"order":233},"BbTimePicker","\u002Fcomponents\u002Fbb-time-picker",{"title":309,"path":310,"component":309,"order":237},"BbTooltip","\u002Fcomponents\u002Fbb-tooltip",{"label":312,"entries":313},"Navigation",[314,317,320,323,326,329],{"title":315,"path":316,"component":315,"order":141},"BbAccordion","\u002Fcomponents\u002Fbb-accordion",{"title":318,"path":319,"component":318,"order":145},"BbBreadcrumbs","\u002Fcomponents\u002Fbb-breadcrumbs",{"title":321,"path":322,"component":321,"order":149},"BbCollapsible","\u002Fcomponents\u002Fbb-collapsible",{"title":324,"path":325,"component":324,"order":177},"BbPagination","\u002Fcomponents\u002Fbb-pagination",{"title":327,"path":328,"component":327,"order":181},"BbTabs","\u002Fcomponents\u002Fbb-tabs",{"title":330,"path":331,"component":330,"order":185},"BbTree","\u002Fcomponents\u002Fbb-tree",{"label":333,"entries":334},"Feedback",[335,338,341,344,347,350],{"title":336,"path":337,"component":336,"order":141},"BbAlert","\u002Fcomponents\u002Fbb-alert",{"title":339,"path":340,"component":339,"order":145},"BbBadge","\u002Fcomponents\u002Fbb-badge",{"title":342,"path":343,"component":342,"order":149},"BbIndicator","\u002Fcomponents\u002Fbb-indicator",{"title":345,"path":346,"component":345,"order":177},"BbProgress","\u002Fcomponents\u002Fbb-progress",{"title":348,"path":349,"component":348,"order":181},"BbSpinner","\u002Fcomponents\u002Fbb-spinner",{"title":351,"path":352,"component":351,"order":185},"BbToast","\u002Fcomponents\u002Fbb-toast",{"label":354,"entries":355},"Data Display",[356,359,362],{"title":357,"path":358,"component":357,"order":141},"BbAvatar","\u002Fcomponents\u002Fbb-avatar",{"title":360,"path":361,"component":360,"order":145},"BbIcon","\u002Fcomponents\u002Fbb-icon",{"title":363,"path":364,"component":363,"order":149},"BbTable","\u002Fcomponents\u002Fbb-table",{"label":366,"entries":367},"Layout & Utility",[368],{"title":369,"path":370,"component":369,"order":141},"BbSmoothHeight","\u002Fcomponents\u002Fbb-smooth-height",{"label":372,"entries":373},"Other",[374],{"title":375,"path":376,"component":375,"order":141},"BbAsterisk","\u002Fcomponents\u002Fbb-asterisk",null,{"id":379,"title":235,"body":380,"component":235,"description":1426,"extension":1427,"group":199,"meta":1428,"navigation":714,"order":237,"path":236,"sections":1429,"seo":1439,"stem":1440,"__hash__":1441},"docs_en\u002Fcomponents\u002Fbb-text-input.md",{"type":381,"value":382,"toc":1415},"minimark",[383,436,442,445,453,469,473,506,528,571,576,597,600,610,615,634,648,654,682,685,695,726,743,760,763,789,795,810,813,842,849,855,880,883,896,912,918,934,937,944,947,1033,1054,1057,1078,1102,1119,1125,1128,1131,1164,1170,1212,1215,1247,1266,1272,1299,1302,1315,1318,1357,1360,1386,1411],[384,385,386,394],"when",{},[387,388,389,390,393],"p",{},"Reach for ",[391,392,235],"code",{}," for any short, single-line string: a name, an email, a\nURL, a coupon code, a search box.",[395,396,398],"template",{"v-slot:else":397},"",[399,400,401,410,417,424],"ul",{},[402,403,404,409],"li",{},[405,406,407],"a",{"href":92},[391,408,231],{},", when the text runs to a second\nline",[402,411,412,416],{},[405,413,414],{"href":54},[391,415,223],{},", when it is a number you\nclamp or step",[402,418,419,423],{},[405,420,421],{"href":36},[391,422,214],{},", when it is a\ncalendar date",[402,425,426,430,431,435],{},[405,427,428],{"href":70},[391,429,261],{}," or\n",[405,432,433],{"href":66},[391,434,255],{},", when the value comes from a\nknown set",[387,437,438,439,441],{},"Also see: ",[405,440,175],{"href":132},".",[387,443,444],{},"This page also defines the shared field chrome used by the other inputs.",[446,447,449],"h2",{"id":448},"default",[450,451,452],"span",{},"Default",[387,454,455,456,462,463,441],{},"Pass a ",[405,457,459],{"href":458},"\u002Fen\u002Fcomponents\u002Fbb-text-input\u002Fapi#prop-label",[391,460,461],{},"label"," and bind ",[405,464,466],{"href":465},"\u002Fen\u002Fcomponents\u002Fbb-text-input\u002Fapi#model-modelValue",[391,467,468],{},"v-model",[470,471],"demo",{"name":472},"BbTextInput\u002FBasic",[387,474,475,476,479,480,483,484,487,488,491,492,498,499,505],{},"The model is ",[391,477,478],{},"string | null",". An emptied field emits ",[391,481,482],{},"null",", so write\n",[391,485,486],{},"value ?? ''"," for an API that insists on a string. To emit ",[391,489,490],{},"''"," instead, set\n",[405,493,495],{"href":494},"\u002Fen\u002Fcomponents\u002Fbb-text-input\u002Fapi#prop-nullValue",[391,496,497],{},"null-value=\"string\""," on one\nfield, or the plugin option\n",[405,500,502],{"href":501},"\u002Fen\u002Fguides\u002Finstallation#options",[391,503,504],{},"formControls.textInputNullValue"," once for\nthe whole app.",[387,507,508,510,511,517,518,520,521,527],{},[391,509,461],{}," does not set ",[405,512,514],{"href":513},"\u002Fen\u002Fcomponents\u002Fbb-text-input\u002Fapi#prop-name",[391,515,516],{},"name",". Pass ",[391,519,516],{}," for native form submission and an\nexplicit ",[405,522,524],{"href":523},"\u002Fen\u002Fcomponents\u002Fbb-text-input\u002Fapi#prop-id",[391,525,526],{},"id"," for stable prerendered markup.",[529,530,532],"migration",{"title":531},"template ref removed",[387,533,534,535,538,539,542,543,546,547,550,551,554,555,558,559,562,563,566,567,570],{},"v3 removed the imperative handle: ",[391,536,537],{},"focus()",", ",[391,540,541],{},"blur()"," and ",[391,544,545],{},"select()"," are gone.\nA leftover ",[391,548,549],{},"inputRef.value?.focus()"," is ",[391,552,553],{},"undefined"," at runtime, not a compile\nerror. Use ",[391,556,557],{},"autofocus"," for focus on mount. For anything else, take the native\n",[391,560,561],{},"\u003Cinput>"," through passthrough, ",[391,564,565],{},":pt=\"{ input: { attrs: { ref: (el) => (input = el) } } }\"",",\nand call ",[391,568,569],{},"input.focus()"," on it.",[446,572,573],{"id":461},[450,574,575],{},"Label modes",[387,577,578,584,585,588,589,592,593,596],{},[405,579,581],{"href":580},"\u002Fen\u002Fcomponents\u002Fbb-text-input\u002Fapi#prop-labelMode",[391,582,583],{},"label-mode"," puts the label above the field (",[391,586,587],{},"outside",", the default), resting\ninside it like a placeholder (",[391,590,591],{},"floating","), or pinned small inside the top edge\n(",[391,594,595],{},"inside",").",[470,598],{"name":599},"BbTextInput\u002FLabelModes",[387,601,602,603,606,607,609],{},"Set the product default with ",[391,604,605],{},"defaultInputLabelMode",". Do not combine ",[391,608,591],{},"\nwith a placeholder; both occupy the same space.",[387,611,612,614],{},[391,613,591],{}," alone is not a prop; it falls through to the root and does nothing:",[616,617,621],"pre",{"className":618,"code":619,"language":620,"meta":397,"style":397},"language-diff shiki shiki-themes github-light-high-contrast github-dark-high-contrast","- \u003CBbTextInput v-model=\"email\" label=\"Email\" floating \u002F>\n+ \u003CBbTextInput v-model=\"email\" label=\"Email\" label-mode=\"floating\" \u002F>\n","diff",[391,622,623,629],{"__ignoreMap":397},[450,624,626],{"class":625,"line":141},"line",[450,627,628],{},"- \u003CBbTextInput v-model=\"email\" label=\"Email\" floating \u002F>\n",[450,630,631],{"class":625,"line":145},[450,632,633],{},"+ \u003CBbTextInput v-model=\"email\" label=\"Email\" label-mode=\"floating\" \u002F>\n",[387,635,636,642,643,647],{},[405,637,639],{"href":638},"\u002Fen\u002Fcomponents\u002Fbb-text-input\u002Fapi#prop-hideLabel",[391,640,641],{},"hide-label"," drops the label from view and keeps the accessible name, which is\nwhat a search box with nothing but a placeholder wants. Dropping ",[405,644,645],{"href":458},[391,646,461],{}," itself\nis never the answer.",[446,649,651],{"id":650},"type",[450,652,653],{},"Type and keyboard",[387,655,656,661,662,538,665,538,668,671,672,538,675,538,678,681],{},[405,657,659],{"href":658},"\u002Fen\u002Fcomponents\u002Fbb-text-input\u002Fapi#prop-type",[391,660,650],{}," tells the browser what kind of text this is: ",[391,663,664],{},"text",[391,666,667],{},"email",[391,669,670],{},"url",",\n",[391,673,674],{},"tel",[391,676,677],{},"search",[391,679,680],{},"password",". That is the whole list.",[470,683],{"name":684},"BbTextInput\u002FTypes",[387,686,687,688,542,691,694],{},"v3 narrowed it to those six. ",[391,689,690],{},"type=\"number\"",[391,692,693],{},"type=\"date\""," no longer\ncompile, and the fix is a different component rather than a different value:",[616,696,698],{"className":618,"code":697,"language":620,"meta":397,"style":397},"- \u003CBbTextInput v-model=\"qty\" type=\"number\" label=\"Quantity\" \u002F>\n+ \u003CBbNumberInput v-model=\"qty\" label=\"Quantity\" \u002F>\n\n- \u003CBbTextInput v-model=\"due\" type=\"date\" label=\"Due date\" \u002F>\n+ \u003CBbDatePickerInput v-model=\"due\" label=\"Due date\" \u002F>\n",[391,699,700,705,710,716,721],{"__ignoreMap":397},[450,701,702],{"class":625,"line":141},[450,703,704],{},"- \u003CBbTextInput v-model=\"qty\" type=\"number\" label=\"Quantity\" \u002F>\n",[450,706,707],{"class":625,"line":145},[450,708,709],{},"+ \u003CBbNumberInput v-model=\"qty\" label=\"Quantity\" \u002F>\n",[450,711,712],{"class":625,"line":149},[450,713,715],{"emptyLinePlaceholder":714},true,"\n",[450,717,718],{"class":625,"line":177},[450,719,720],{},"- \u003CBbTextInput v-model=\"due\" type=\"date\" label=\"Due date\" \u002F>\n",[450,722,723],{"class":625,"line":181},[450,724,725],{},"+ \u003CBbDatePickerInput v-model=\"due\" label=\"Due date\" \u002F>\n",[387,727,728,729,735,736,742],{},"Set ",[405,730,732],{"href":731},"\u002Fen\u002Fcomponents\u002Fbb-text-input\u002Fapi#prop-autocomplete",[391,733,734],{},"autocomplete"," in auth and checkout flows. Use ",[405,737,739],{"href":738},"\u002Fen\u002Fcomponents\u002Fbb-text-input\u002Fapi#prop-inputMode",[391,740,741],{},"input-mode"," to request the\nright mobile keyboard without changing the value type.",[387,744,745,746,749,750,752,753,759],{},"There is no ",[391,747,748],{},"revealable"," prop. A reveal toggle is a ",[391,751,650],{}," that changes plus a\nbutton in the ",[405,754,756],{"href":755},"\u002Fen\u002Fcomponents\u002Fbb-text-input\u002Fapi#slot-append",[391,757,758],{},"#append"," slot.",[470,761],{"name":762},"BbTextInput\u002FPasswordReveal",[387,764,765,766,671,769,538,772,542,775,778,779,781,782,788],{},"Native attributes that only mean something on the input, such as ",[391,767,768],{},"maxlength",[391,770,771],{},"pattern",[391,773,774],{},"spellcheck",[391,776,777],{},"enterkeyhint",", go straight to the ",[391,780,561],{},". Any\nother attribute lands on the outer element; reach the input with\n",[405,783,785],{"href":784},"\u002Fen\u002Fcomponents\u002Fbb-text-input\u002Fapi#prop-pt:%3Cpart%3E",[391,786,787],{},"pt:input"," instead.",[446,790,792],{"id":791},"mask",[450,793,794],{},"Masks",[387,796,455,797,803,804,809],{},[405,798,802],{"href":799,"rel":800},"https:\u002F\u002Fbeholdr.github.io\u002Fmaska\u002Fv3",[801],"nofollow","maska"," config to ",[405,805,807],{"href":806},"\u002Fen\u002Fcomponents\u002Fbb-text-input\u002Fapi#prop-mask",[391,808,791],{}," and the\nfield formats as the user types: card numbers, VAT ids, licence keys.",[470,811],{"name":812},"BbTextInput\u002FMask",[387,814,815,816,820,821,538,824,828,829,517,832,838,839,841],{},"By default the model holds the ",[817,818,819],"strong",{},"unmasked"," value: the field shows\n",[391,822,823],{},"4242 4242 4242 4242",[405,825,826],{"href":465},[391,827,468],{}," holds ",[391,830,831],{},"4242424242424242",[405,833,835],{"href":834},"\u002Fen\u002Fcomponents\u002Fbb-text-input\u002Fapi#prop-emitMasked",[391,836,837],{},"emit-masked","\nwhen the formatted string is the value, as it is for a VAT id people copy and\npaste. Either way an emptied field emits ",[391,840,482],{},", like an unmasked one.",[387,843,844,845,441],{},"Masks format, they do not validate. A complete but wrong card number passes the\nmask and still needs an ",[405,846,848],{"href":847},"#validation","error",[446,850,852],{"id":851},"messaging",[450,853,854],{},"Description and hint",[387,856,857,858,864,865,868,869,875,876,879],{},"Two channels sit around the field, and the difference is timing. ",[405,859,861],{"href":860},"\u002Fen\u002Fcomponents\u002Fbb-text-input\u002Fapi#prop-description",[391,862,863],{},"description","\nis always visible between the label and the field, read ",[817,866,867],{},"before"," typing.\n",[405,870,872],{"href":871},"\u002Fen\u002Fcomponents\u002Fbb-text-input\u002Fapi#prop-hint",[391,873,874],{},"hint"," appears below the field on focus, read ",[817,877,878],{},"while"," typing.",[470,881],{"name":882},"BbTextInput\u002FDescriptionAndHint",[387,884,885,891,892,895],{},[405,886,888],{"href":887},"\u002Fen\u002Fcomponents\u002Fbb-text-input\u002Fapi#prop-persistentHint",[391,889,890],{},"persistent-hint"," keeps the hint visible. Both channels are connected through\n",[391,893,894],{},"aria-describedby",", so keep them useful and concise.",[387,897,898,904,905,907,908,911],{},[405,899,901],{"href":900},"\u002Fen\u002Fcomponents\u002Fbb-text-input\u002Fapi#prop-counter",[391,902,903],{},"counter"," adds a character\ncount at the end of the hint row. With a native ",[391,906,768],{}," it reads\n",[391,909,910],{},"12 \u002F 20"," and the input stops at the limit.",[446,913,915],{"id":914},"validation",[450,916,917],{},"Errors and warnings",[387,919,920,926,927,933],{},[405,921,923],{"href":922},"\u002Fen\u002Fcomponents\u002Fbb-text-input\u002Fapi#prop-errors",[391,924,925],{},"errors"," says the value cannot be accepted. ",[405,928,930],{"href":929},"\u002Fen\u002Fcomponents\u002Fbb-text-input\u002Fapi#prop-warnings",[391,931,932],{},"warnings"," says the value is\naccepted and worth a second look. Two channels, not one channel with a severity\nflag.",[470,935],{"name":936},"BbTextInput\u002FValidationStates",[387,938,939,940,943],{},"Non-empty messages imply their visual state. Errors set ",[391,941,942],{},"aria-invalid",";\nwarnings do not. When both exist, errors win.",[387,945,946],{},"Bind server-side errors straight in. With Inertia:",[616,948,952],{"className":949,"code":950,"language":951,"meta":397,"style":397},"language-vue shiki shiki-themes github-light-high-contrast github-dark-high-contrast","\u003CBbTextInput\n    v-model=\"form.email\"\n    label=\"Billing email\"\n    type=\"email\"\n    autocomplete=\"email\"\n    :errors=\"form.errors.email\"\n\u002F>\n","vue",[391,953,954,964,982,993,1003,1012,1028],{"__ignoreMap":397},[450,955,956,960],{"class":625,"line":141},[450,957,959],{"class":958},"suds8","\u003C",[450,961,963],{"class":962},"sne4z","BbTextInput\n",[450,965,966,970,973,976,979],{"class":625,"line":145},[450,967,969],{"class":968},"s-5SL","    v-model",[450,971,972],{"class":958},"=",[450,974,975],{"class":958},"\"",[450,977,978],{"class":958},"form.email",[450,980,981],{"class":958},"\"\n",[450,983,984,987,989],{"class":625,"line":149},[450,985,986],{"class":968},"    label",[450,988,972],{"class":958},[450,990,992],{"class":991},"sT6z2","\"Billing email\"\n",[450,994,995,998,1000],{"class":625,"line":177},[450,996,997],{"class":968},"    type",[450,999,972],{"class":958},[450,1001,1002],{"class":991},"\"email\"\n",[450,1004,1005,1008,1010],{"class":625,"line":181},[450,1006,1007],{"class":968},"    autocomplete",[450,1009,972],{"class":958},[450,1011,1002],{"class":991},[450,1013,1014,1017,1019,1021,1023,1026],{"class":625,"line":185},[450,1015,1016],{"class":958},"    :",[450,1018,925],{"class":968},[450,1020,972],{"class":958},[450,1022,975],{"class":958},[450,1024,1025],{"class":958},"form.errors.email",[450,1027,981],{"class":958},[450,1029,1030],{"class":625,"line":225},[450,1031,1032],{"class":958},"\u002F>\n",[387,1034,1035,1036,1040,1041,1047,1048,1050,1051,1053],{},"For client rules, put the field inside a ",[405,1037,1038],{"href":46},[391,1039,220],{},"\nand give it ",[405,1042,1044],{"href":1043},"\u002Fen\u002Fcomponents\u002Fbb-text-input\u002Fapi#prop-rules",[391,1045,1046],{},"rules",". It joins\nthe form under its ",[391,1049,516],{},", so it needs no ",[391,1052,468],{},". Tab out of the empty\nEmail, or send the invite, to see the rule.",[470,1055],{"name":1056},"BbTextInput\u002FInForm",[387,1058,1059,1060,1062,1063,1066,1067,1070,1071,1077],{},"A field joined to a ",[391,1061,220],{}," is checked as required through ",[391,1064,1065],{},"rules=\"required\"","\nor the form's ",[391,1068,1069],{},"schema",", and the asterisk beside the label follows. The\n",[405,1072,1074],{"href":1073},"\u002Fen\u002Fcomponents\u002Fbb-text-input\u002Fapi#prop-required",[391,1075,1076],{},"required"," prop there is a\nhint: it draws the asterisk and tells assistive technology, and an empty field\nstill submits, so use it when the server does the checking.",[387,1079,1080,1081,1083,1084,1086,1087,1093,1094,538,1096,1098,1099,1101],{},"The rule messages render in the same ",[391,1082,925],{}," channel, merged with any\n",[391,1085,925],{}," you pass. A field checks itself when you leave it, then on every\nkeystroke while it shows an error; ",[405,1088,1090],{"href":1089},"\u002Fen\u002Fcomponents\u002Fbb-text-input\u002Fapi#prop-validationMode",[391,1091,1092],{},"validation-mode","\nchanges that timing. Outside a ",[391,1095,220],{},[391,1097,1046],{}," do nothing, and ",[391,1100,1076],{}," is the right prop:\nit forwards to the native input and produces no message of its own.",[387,1103,1104,1105,1111,1112,1118],{},"A field inside a form that is not form data, such as a filter, takes\n",[405,1106,1108],{"href":1107},"\u002Fen\u002Fcomponents\u002Fbb-text-input\u002Fapi#prop-formless",[391,1109,1110],{},"formless",": it stays out of\nthe data, the validation and the save lock. When the label\nreads badly in a message (\"Search orders is required\"), set\n",[405,1113,1115],{"href":1114},"\u002Fen\u002Fcomponents\u002Fbb-text-input\u002Fapi#prop-validationLabel",[391,1116,1117],{},"validation-label"," on\na joined field.",[446,1120,1122],{"id":1121},"states",[450,1123,1124],{},"Clearable, loading, disabled and readonly",[387,1126,1127],{},"Four flags change what the field lets you do, and only two of them stop\nanything.",[470,1129],{"name":1130},"BbTextInput\u002FStates",[387,1132,1133,1139,1140,1142,1143,1149,1150,1156,1157,1163],{},[405,1134,1136],{"href":1135},"\u002Fen\u002Fcomponents\u002Fbb-text-input\u002Fapi#prop-clearable",[391,1137,1138],{},"clearable"," emits ",[391,1141,482],{}," and restores focus. ",[405,1144,1146],{"href":1145},"\u002Fen\u002Fcomponents\u002Fbb-text-input\u002Fapi#prop-loading",[391,1147,1148],{},"loading"," only shows status; it\ndoes not lock the field. ",[405,1151,1153],{"href":1152},"\u002Fen\u002Fcomponents\u002Fbb-text-input\u002Fapi#prop-disabled",[391,1154,1155],{},"disabled"," removes interaction, while ",[405,1158,1160],{"href":1159},"\u002Fen\u002Fcomponents\u002Fbb-text-input\u002Fapi#prop-readonly",[391,1161,1162],{},"readonly"," keeps\nthe value focusable and copyable.",[446,1165,1167],{"id":1166},"affixes",[450,1168,1169],{},"Icons and affixes",[387,1171,1172,1173,1179,1180,1186,1187,1179,1193,1198,1199,1179,1205,1211],{},"The slots ring the field from the value outward.\n",[405,1174,1176],{"href":1175},"\u002Fen\u002Fcomponents\u002Fbb-text-input\u002Fapi#slot-prefix",[391,1177,1178],{},"prefix"," and\n",[405,1181,1183],{"href":1182},"\u002Fen\u002Fcomponents\u002Fbb-text-input\u002Fapi#slot-suffix",[391,1184,1185],{},"suffix"," are short text at the\ninner edges of the box, either side of the value.\n",[405,1188,1190],{"href":1189},"\u002Fen\u002Fcomponents\u002Fbb-text-input\u002Fapi#slot-prepend",[391,1191,1192],{},"prepend",[405,1194,1195],{"href":755},[391,1196,1197],{},"append"," sit inside the chrome.\n",[405,1200,1202],{"href":1201},"\u002Fen\u002Fcomponents\u002Fbb-text-input\u002Fapi#slot-prepend:outer",[391,1203,1204],{},"prepend:outer",[405,1206,1208],{"href":1207},"\u002Fen\u002Fcomponents\u002Fbb-text-input\u002Fapi#slot-append:outer",[391,1209,1210],{},"append:outer"," sit beside\nthe field entirely.",[470,1213],{"name":1214},"BbTextInput\u002FAffixes",[387,1216,1217,1218,671,1224,1230,1231,1233,1234,1236,1237,1239,1240,1244,1245,441],{},"Icons (",[405,1219,1221],{"href":1220},"\u002Fen\u002Fcomponents\u002Fbb-text-input\u002Fapi#prop-prepend:icon",[391,1222,1223],{},"prepend:icon",[405,1225,1227],{"href":1226},"\u002Fen\u002Fcomponents\u002Fbb-text-input\u002Fapi#prop-append:icon",[391,1228,1229],{},"append:icon",") and\n",[391,1232,1178],{},"\u002F",[391,1235,1185],{}," text are decoration and never take focus. A small button can\ngo in ",[391,1238,758],{},", as the ",[405,1241,1243],{"href":1242},"#type","password toggle"," does; anything larger sits in\n",[391,1246,1210],{},[387,1248,1249,1250,1255,1256,1258,1259,1263,1264,441],{},"The append icon position shows one thing at a time, by priority: ",[817,1251,1252,1253],{},"clear button\n→ spinner → error or warning icon → your ",[391,1254,1229],{},". An ",[391,1257,1229],{}," on a\nfield that is also ",[405,1260,1261],{"href":1135},[391,1262,1138],{},"\nor validated disappears as soon as there is a value to clear or an error to\nshow. Put anything that must stay visible in ",[391,1265,1210],{},[446,1267,1269],{"id":1268},"layout",[450,1270,1271],{},"Variants, density and layout",[387,1273,1274,1280,1281,1284,1285,430,1288,1291,1292,1298],{},[405,1275,1277],{"href":1276},"\u002Fen\u002Fcomponents\u002Fbb-text-input\u002Fapi#prop-variant",[391,1278,1279],{},"variant"," changes only the colours of the box: ",[391,1282,1283],{},"outline"," (default), ",[391,1286,1287],{},"secondary",[391,1289,1290],{},"ghost",". ",[405,1293,1295],{"href":1294},"\u002Fen\u002Fcomponents\u002Fbb-text-input\u002Fapi#prop-compact",[391,1296,1297],{},"compact"," reduces the control height. Use one density across a form.",[470,1300],{"name":1301},"BbTextInput\u002FVariants",[387,1303,1304,1305,1308,1309,1314],{},"A search box in a table toolbar belongs to the bar, not to a form.\n",[391,1306,1307],{},"variant=\"none\""," is the blank base for it: the box keeps its height and\npadding, loses every colour, and ",[405,1310,1311],{"href":784},[391,1312,1313],{},"pt:box"," takes your classes. The focus\nring goes with the colours, so draw your own focus state.",[470,1316],{"name":1317},"BbTextInput\u002FFlatField",[387,1319,1320,1325,1326,1329,1330,1333,1334,1340,1341,1344,1345,1348,1349,1352,1353,1356],{},[405,1321,1323],{"href":1322},"\u002Fen\u002Fcomponents\u002Fbb-text-input\u002Fapi#prop-layout",[391,1324,1268],{}," puts the label beside the field instead of above it.\n",[391,1327,1328],{},"layout=\"horizontal\""," splits the row 50\u002F50. Two space-separated tokens read\nas a ratio: ",[391,1331,1332],{},"\"xx xxxxx\""," gives the label two parts and the field five. Use the\nsame value on every row so the fields line up. ",[405,1335,1337],{"href":1336},"\u002Fen\u002Fcomponents\u002Fbb-text-input\u002Fapi#prop-reverse",[391,1338,1339],{},"reverse"," swaps the two columns.\n",[391,1342,1343],{},"auto"," keeps both at their natural width, ",[391,1346,1347],{},"label-fill"," gives the free space to\nthe label (a settings row with a short field on the right), and ",[391,1350,1351],{},"input-fill","\ngives it to the field. None of them wraps, so stack them on a phone with a\nper-breakpoint map: ",[391,1354,1355],{},":layout=\"{ default: 'vertical', md: 'xx xxxxx' }\"",", as the\ndemo does.",[470,1358],{"name":1359},"BbTextInput\u002FLayout",[387,1361,1362,1364,1365,1368,1369,1371,1372,1379,1380,1382,1383,1385],{},[391,1363,1268],{}," applies only while the ",[817,1366,1367],{},"resolved"," label mode is ",[391,1370,587],{},", which\nis the library default. ",[405,1373,1375,542,1377],{"href":1374},"#label",[391,1376,591],{},[391,1378,595],{}," put the label inside\nthe field and always stack vertically. The resolved mode is ",[391,1381,583],{},", or\n",[391,1384,605],{}," when the prop is unset.",[529,1387,1389],{"title":1388},"input wrapper classes",[387,1390,1391,1392,1395,1396,1399,1400,1403,1404,1407,1408,441],{},"Selectors on ",[391,1393,1394],{},".bb-common-input-inner-container*"," move to\n",[391,1397,1398],{},".bb-field-input*",". The layout class\n",[391,1401,1402],{},"bb-base-input-container__layout--hidden-label"," is gone as well: it always\nappeared on exactly the same condition as ",[391,1405,1406],{},"--reverse",", and nothing in the\nlibrary ever painted it. Target ",[391,1409,1410],{},".bb-field__layout--reverse",[1412,1413,1414],"style",{},"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 .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}",{"title":397,"searchDepth":149,"depth":149,"links":1416},[1417,1418,1419,1420,1421,1422,1423,1424,1425],{"id":448,"depth":145,"text":452},{"id":461,"depth":145,"text":575},{"id":650,"depth":145,"text":653},{"id":791,"depth":145,"text":794},{"id":851,"depth":145,"text":854},{"id":914,"depth":145,"text":917},{"id":1121,"depth":145,"text":1124},{"id":1166,"depth":145,"text":1169},{"id":1268,"depth":145,"text":1271},"The single-line text field, and the chrome every other input in the family shares.","md",{},[1430,1431,1432,1433,1434,1435,1436,1437,1438],{"id":448,"title":452},{"id":461,"title":575},{"id":650,"title":653},{"id":791,"title":794},{"id":851,"title":854},{"id":914,"title":917},{"id":1121,"title":1124},{"id":1166,"title":1169},{"id":1268,"title":1271},{"title":235,"description":1426},"components\u002Fbb-text-input","LuvjoeAkb32WPANuUaHizcq1MflCH0zPNeN3Nso0fRE",{"name":235,"slug":1443,"group":199,"description":1444,"entrypoint":1445,"docs":1446,"props":1449,"models":1601,"events":1604,"slots":1652,"exposed":1675,"pt":1676,"validated":377,"migration":1736},"bb-text-input","Captures single-line text values.","bitboss-ui",{"contract":1447,"source":1448},"ai\u002FBbTextInput.md","ai\u002Fsource\u002FBbTextInput.md",[1450,1455,1458,1462,1467,1470,1472,1475,1478,1482,1486,1489,1493,1497,1501,1504,1506,1510,1515,1519,1522,1527,1531,1535,1538,1542,1546,1549,1553,1556,1559,1561,1565,1570,1573,1576,1578,1582,1587,1590,1594,1598],{"name":1229,"type":1451,"required":1452,"default":377,"description":1453,"note":1454,"demo":1166},"string | undefined",false,"Name of the icon to be added at the end of the input.","The append icon position shows one thing at a time, by priority: clear button, then spinner, then the error or warning icon, then this. On a `clearable` or validated field it disappears as soon as there is a value to clear or an error to show. Put anything that must stay visible in `append:outer`.",{"name":734,"type":1451,"required":1452,"default":377,"description":1456,"note":1457,"demo":650},"Guides to the browser as to the type of information expected in the field.","Set it on every field in an auth or checkout flow. Search and filter boxes need `autocomplete=\"off\"` just as much: they are text inputs on a page that has seen a login, so the browser offers a saved email over the results being filtered.",{"name":557,"type":1459,"required":1452,"default":377,"description":1460,"note":1461,"demo":448},"Booleanish | undefined","Focuses the field when it mounts (a dialog already open included), unless the user is typing in another field.","The replacement for the template-ref API v3 removed: there is no exposed `focus()` \u002F `blur()` \u002F `select()`, and a leftover call is `undefined` at runtime rather than a compile error. Use at most one per view. For anything more, take the native `\u003Cinput>` through `pt:input` (`attrs: { ref }`).",{"name":1138,"type":1463,"required":1452,"default":1464,"description":1465,"note":1466,"demo":1121},"boolean | undefined","false","Displays a clear button when the input has a value and is being interacted with.","There is no `clear` event: the button emits `null` through the model, so watch the model instead. Suppressed on `disabled` and `readonly` fields, and never worth rebuilding in an `append` slot.",{"name":1297,"type":1463,"required":1452,"default":1464,"description":1468,"note":1469,"demo":1268},"Compact density: the field uses the `-compact` twins of `--bb-input-h`, `--bb-input-py` and `--bb-label-spacing-y`, so a `--bb-input-h` set on the component is ignored while it is on. Size a compact field with `--bb-input-h-compact` (and `--bb-input-py-compact`).","A property of a view, not of a field. Two densities in one form read as a seam.",{"name":903,"type":1463,"required":1452,"default":1464,"description":1471,"note":377,"demo":377},"Shows a character count at the end of the hint row: `42`, or `42 \u002F 140` with the native `maxlength` (which also stops input). It brightens from 90 % and takes the warning colour at the limit; screen readers hear it only when it crosses 90 % or the limit.",{"name":863,"type":1451,"required":1452,"default":377,"description":1473,"note":1474,"demo":851},"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, and read before typing: the place for an instruction. `hint` is the one that speaks while the field has focus.",{"name":1155,"type":1463,"required":1452,"default":1464,"description":1476,"note":1477,"demo":1121},"Disables the component.","Blocks the keyboard too, so a disabled value is unreachable for someone navigating that way. Prefer `readonly` for derived or provisioned values.",{"name":1479,"type":1463,"required":1452,"default":1464,"description":1480,"note":1481,"demo":791},"emitMasked","Emits the masked value of the input.","Off by default, so the model holds the digits while the field shows the separators. Turn it on when the formatted string is the value you store, and do not strip formatting server-side that was never sent.",{"name":925,"type":1483,"required":1452,"default":377,"description":1484,"note":1485,"demo":914},"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 implies the error state, so `has-errors` is only for when the message lives elsewhere. Rendered in an `aria-live` region and referenced first from `aria-describedby`, so it is announced on change and re-read on focus.",{"name":1110,"type":1463,"required":1452,"default":1464,"description":1487,"note":1488,"demo":377},"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).","For a field inside a `BbForm` that is not form data, such as a filter above a list. Without it, a field with no `name` joins the form under its label slug.",{"name":1490,"type":1463,"required":1452,"default":1464,"description":1491,"note":1492,"demo":914},"hasErrors","Define if the component should be in an error state. It usually attaches a CSS class for styling purposes.","Sets `aria-invalid` and the error chrome without a message, for a field whose error is reported by a form-level summary.",{"name":1494,"type":1463,"required":1452,"default":1464,"description":1495,"note":1496,"demo":914},"hasWarnings","Define if the component should be in a warning state. Same chrome as errors with `--bb-warn`; errors take priority.","The warning counterpart of `has-errors`: amber chrome, no `aria-invalid`. Errors win when both states are set.",{"name":1498,"type":1463,"required":1452,"default":1464,"description":1499,"note":1500,"demo":461},"hideLabel","Visually hides the label of the input while maintaining accessibility.","Keeps the accessible name and removes only the visible text. It is the answer for a search box that shows just a placeholder; omitting `label` is not the same thing and never is.",{"name":874,"type":1451,"required":1452,"default":377,"description":1502,"note":1503,"demo":851},"Text box to be displayed near the input, usually to indicate instructions.","Shown while the field has focus, unless `persistent-hint` keeps it. A form where every field carries permanent text below it is a form nobody reads.",{"name":526,"type":1451,"required":1452,"default":377,"description":1505,"note":377,"demo":377},"The `id` of the native control; the label's `for` and the description and message ids derive from it. Generated when omitted.",{"name":1507,"type":1508,"required":1452,"default":377,"description":1509,"note":377,"demo":377},"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":1511,"type":1512,"required":1452,"default":377,"description":1513,"note":1514,"demo":650},"inputMode","\"text\" | \"none\" | \"search\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined","The inputmode of the input.","Steers the mobile keyboard independently of `type`: that is how a masked code field stays `type=\"text\"` and still gets a number pad.",{"name":461,"type":1516,"required":714,"default":377,"description":1517,"note":1518,"demo":448},"string","Text content of the label of the element.","Required, and display and accessibility only: it does not set the `name` attribute. Hide it with `hide-label` rather than dropping it.",{"name":1520,"type":1508,"required":1452,"default":377,"description":1521,"note":377,"demo":377},"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":1523,"type":1524,"required":1452,"default":377,"description":1525,"note":1526,"demo":461},"labelMode","\"outside\" | \"floating\" | \"inside\" | undefined","Label rendering mode.","A bare `floating` attribute is not a prop and never was: it falls through `$attrs` and does nothing. The spelling is `label-mode=\"floating\"`. Unset, the value comes from `defaultInputLabelMode` in the plugin config, so a project can float every field without touching call sites.",{"name":1528,"type":1529,"required":1452,"default":377,"description":1530,"note":377,"demo":377},"labelPosition","\"left\" | \"center\" | \"right\" | undefined","Sets the text alignment of the label.",{"name":1268,"type":1532,"required":1452,"default":377,"description":1533,"note":1534,"demo":1268},"Responsive\u003CFieldLayout> | undefined","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' }`).","Applies only while the resolved label mode is `outside`. `floating` and `inside` embed the label in the field and force the vertical layout, ignoring this without a warning. Check `defaultInputLabelMode` before concluding the prop is broken.",{"name":1148,"type":1463,"required":1452,"default":1464,"description":1536,"note":1537,"demo":1121},"Sets the component in a loading state, usually triggering some visual styles.","Visual only: the field stays editable. If the value must not change while an async check runs, write that guard yourself and tag requests so a stale response cannot overwrite a newer one.",{"name":791,"type":1539,"required":1452,"default":377,"description":1540,"note":1541,"demo":791},"MaskInputOptions | undefined","A maska options object, not a string: `{ mask: '#### #### #### ####' }`. Please visit https:\u002F\u002Fbeholdr.github.io\u002Fmaska\u002Fv3 for syntax examples.","A [maska](https:\u002F\u002Fbeholdr.github.io\u002Fmaska\u002Fv3) config, live-reactive: changing the options reformats the current value. Masks format, they do not validate: a complete-but-wrong value still needs an error.",{"name":1543,"type":1544,"required":1452,"default":377,"description":1545,"note":377,"demo":377},"modelValue","string | null | undefined","Used by v-model.",{"name":516,"type":1451,"required":1452,"default":377,"description":1547,"note":1548,"demo":448},"Defines the name of the input.","Unset, the rendered `\u003Cinput>` carries no name at all, so a native form post or a `FormData` read drops the value silently. `label` does not fill this in.",{"name":1550,"type":1551,"required":1452,"default":377,"description":1552,"note":377,"demo":377},"nullValue","E | undefined","What the field emits once emptied (typing, the clear button, an empty mask): `'null'` emits `null`, `'string'` emits `''`. Unset: `formControls.textInputNullValue` (`'null'`). With `'string'`, the `update:modelValue` payload types as `string`.",{"name":1554,"type":1463,"required":1452,"default":1464,"description":1555,"note":377,"demo":377},"persistentHint","Keeps the hint displayed.",{"name":1557,"type":1451,"required":1452,"default":377,"description":1558,"note":377,"demo":377},"placeholder","Text shown while the field is empty.",{"name":1223,"type":1451,"required":1452,"default":377,"description":1560,"note":377,"demo":377},"Name of the icon to be added at the start of the input.",{"name":1562,"type":1563,"required":1452,"default":377,"description":1564,"note":377,"demo":377},"pt","(PtMap\u003CBbTextInputPtPart, BbTextInputPtState> & { \"root:outline\"?: PtValue | undefined; \"icon:outline\"?: PtValue | undefined; \"root:secondary\"?: PtValue | undefined; \"icon:secondary\"?: PtValue | undefined; \"spinner:outline\"?: PtValue | undefined; \"spinner:secondary\"?: PtValue | undefined; \"clear:outline\"?: PtValue | undefined; \"clear:secondary\"?: PtValue | undefined; \"root:ghost\"?: PtValue | undefined; \"icon:ghost\"?: PtValue | undefined; \"spinner:ghost\"?: PtValue | undefined; \"clear:ghost\"?: PtValue | undefined; \"label:outline\"?: PtValue | undefined; \"label:secondary\"?: PtValue | undefined; \"label:ghost\"?: PtValue | undefined; \"description:outline\"?: PtValue | undefined; \"description:secondary\"?: PtValue | undefined; \"description:ghost\"?: PtValue | undefined; \"message:outline\"?: PtValue | undefined; \"message:secondary\"?: PtValue | undefined; \"message:ghost\"?: PtValue | undefined; \"hint:outline\"?: PtValue | undefined; \"hint:secondary\"?: PtValue | undefined; \"hint:ghost\"?: PtValue | undefined; \"input:outline\"?: PtValue | undefined; \"input:secondary\"?: PtValue | undefined; \"input:ghost\"?: PtValue | undefined; \"box:outline\"?: PtValue | undefined; \"box:secondary\"?: PtValue | undefined; \"box:ghost\"?: PtValue | undefined; \"prefix:outline\"?: PtValue | undefined; \"prefix:secondary\"?: PtValue | undefined; \"prefix:ghost\"?: PtValue | undefined; \"suffix:outline\"?: PtValue | undefined; \"suffix:secondary\"?: PtValue | undefined; \"suffix:ghost\"?: PtValue | undefined; }) | undefined","Passthrough, object form: `{ box: '…', 'box:errors': '…' }` — the same keys as the `pt:*` attributes without the prefix. See the `pt:\u003Cpart>` row.",{"name":1566,"type":1567,"required":1452,"default":377,"description":1568,"note":377,"demo":1569},"pt:\u003Cpart>","PtValue | undefined","Passthrough, attribute form: one attribute per part, `pt:\u003Cpart>`, and per part and state, `pt:\u003Cpart>:\u003Cstate>`. Parts: `box`, `clear`, `counter`, `description`, `hint`, `icon`, `input`, `label`, `message`, `prefix`, `root`, `spinner`, `suffix`. States: `atLimit`, `disabled`, `errors`, `ghost`, `hasValue`, `loading`, `nearLimit`, `outline`, `readonly`, `secondary`, `warnings`.","passthrough",{"name":1162,"type":1463,"required":1452,"default":1464,"description":1571,"note":1572,"demo":1121},"Sets the input in a readonly state.","Keeps the value focusable, selectable and copyable while refusing edits: the right choice for a value the user did not set but may need to read or copy.",{"name":1076,"type":1463,"required":1452,"default":1464,"description":1574,"note":1575,"demo":914},"Sets the native `required` attribute, for a plain `\u003Cform>`. Inside a `BbForm` it is an error (nothing enforces it): use `rules=\"required\"` or the form `schema` instead.","Forwards to the native input for the browser's own validation. It does not produce a message: `errors` still owns that.",{"name":1339,"type":1463,"required":1452,"default":1464,"description":1577,"note":377,"demo":377},"Reverses the layout. Applicable in every direction the order of the label and the input is swapped.",{"name":1046,"type":1579,"required":1452,"default":377,"description":1580,"note":1581,"demo":914},"RuleExpression\u003Cstring | null>","vee-validate rules for this field. Only inside a `BbForm`.","Read only inside a `BbForm`; outside one the field is plain and the rules do nothing. Whatever you pass to `errors` is merged with the rule messages rather than replaced.",{"name":650,"type":1583,"required":1452,"default":1584,"description":1585,"note":1586,"demo":650},"\"text\" | \"search\" | \"tel\" | \"url\" | \"email\" | \"password\" | undefined","\"text\"","Type of the input. Restricted to the textual input types this component supports — use `BbNumberInput` for numbers and `BbDatePickerInput` for dates.","Narrowed in v3 to the text-like types. `type=\"number\"` and `type=\"date\"` no longer compile; those values move to `BbNumberInput` and `BbDatePickerInput`. There is no `revealable`: a password toggle is a `type` that changes plus a button in `#append`.",{"name":1588,"type":1451,"required":1452,"default":377,"description":1589,"note":377,"demo":377},"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.",{"name":1591,"type":1592,"required":1452,"default":377,"description":1593,"note":377,"demo":914},"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":1279,"type":1595,"required":1452,"default":1596,"description":1597,"note":377,"demo":377},"InputVariantType | undefined","'outline'","The field box's look, with `BbButton`'s names and tokens. Colours only, so a form never reflows; `'ghost'` has no border in any state, `'none'` no look at all (you own hover, focus and the states). Register more with the plugin's `inputVariants`.",{"name":932,"type":1483,"required":1452,"default":377,"description":1599,"note":1600,"demo":914},"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 channel, for a value that is accepted and still worth a second look. Unlike `errors` it does not set `aria-invalid`, and it is suppressed entirely when the field also has errors.",[1602],{"name":1543,"type":1544,"note":1603,"demo":448},"`string | null`: an emptied field emits `null`, or `''` when the plugin option `formControls.textInputNullValue` says so. Inside a `BbForm` the binding is optional: the form holds the value under `name`.",[1605,1609,1614,1618,1622,1625,1628,1631,1635,1638,1641,1644,1648],{"name":1606,"signature":1607,"description":1608,"note":377,"demo":377},"blur","(event: FocusEvent): void","Emitted when the native input loses focus. Forwards the original DOM `FocusEvent`.",{"name":1610,"signature":1611,"description":1612,"note":1613,"demo":377},"change","(event: Event): void","Emitted when the native input fires a change event. Forwards the original DOM `Event`.","Fires on commit (blur or Enter), which makes it the right hook for an expensive side effect. `input` fires on every keystroke.",{"name":1615,"signature":1616,"description":1617,"note":377,"demo":377},"click","(event: MouseEvent): void","Emitted when the input receives a click interaction. Forwards the original DOM `MouseEvent`.",{"name":1619,"signature":1620,"description":1621,"note":377,"demo":377},"compositionend","(event: CompositionEvent): void","Emitted when a composition session ends (e.g. CJK IME confirmed). Forwards the original DOM `CompositionEvent`.",{"name":1623,"signature":1620,"description":1624,"note":377,"demo":377},"compositionstart","Emitted when a composition session starts (e.g. CJK IME begins). Forwards the original DOM `CompositionEvent`.",{"name":1626,"signature":1607,"description":1627,"note":377,"demo":377},"focus","Emitted when the native input gains focus. Forwards the original DOM `FocusEvent`.",{"name":1629,"signature":1611,"description":1630,"note":377,"demo":377},"input","Emitted on native input events from the text field. Forwards the original DOM `Event`.",{"name":1632,"signature":1633,"description":1634,"note":377,"demo":377},"keydown","(event: KeyboardEvent): void","Emitted for keyboard interaction on the input. Forwards the original DOM `KeyboardEvent`.",{"name":1636,"signature":1633,"description":1637,"note":377,"demo":377},"keyup","Emitted when a key is released over the input. Forwards the original DOM `KeyboardEvent`.",{"name":1639,"signature":1616,"description":1640,"note":377,"demo":377},"mousedown","Emitted when a pointing device button is pressed over the input. Forwards the original DOM `MouseEvent`.",{"name":1642,"signature":1616,"description":1643,"note":377,"demo":377},"mouseup","Emitted when a pointing device button is released over the input. Forwards the original DOM `MouseEvent`.",{"name":1645,"signature":1646,"description":1647,"note":377,"demo":377},"paste","(event: ClipboardEvent): void","Emitted when content is pasted into the input. Forwards the original DOM `ClipboardEvent`.",{"name":1649,"signature":1650,"description":1651,"note":377,"demo":377},"update:modelValue","(value: string | NullValueOf\u003CE>): void","Emitted when the value changes. Carries the new string, or the empty value (`null-value`, else the app's, `null` by default) when emptied. When `mask` is set, emits the masked or unmasked string depending on `emitMasked`.",[1653,1656,1659,1662,1666,1669,1671,1673],{"name":1197,"type":1654,"description":1655,"note":377,"demo":377},"object","Content rendered after the text input, at the end of the field box.",{"name":1210,"type":1654,"description":1657,"note":1658,"demo":1166},"Content rendered after the entire text input control, outside the input chrome.","Outside the field chrome, and the only affix position that may hold something interactive.",{"name":863,"type":1660,"description":1661,"note":377,"demo":377},"BbTextInputDescriptionSlotProps","Replaces the description text. Provided alone (no `description` prop) it still renders the description region and wires it into `aria-describedby`.",{"name":461,"type":1663,"description":1664,"note":1665,"demo":461},"BbTextInputLabelSlotProps","Replaces the default label text rendered above the input.","Receives `{ text, hasErrors, hasWarnings }`, plus `showAsterisk` while the required marker shows, so a custom label can react to the field state. Replacing the label also replaces the marker: put it back with `\u003CBbAsterisk v-if=\"showAsterisk\" \u002F>`, or unconditionally on a `required` field in an app that turned `requiredAsterisk` off.",{"name":1178,"type":1654,"description":1667,"note":1668,"demo":1166},"Inline content rendered at the start of the input field area, before the typed text.","Short inline text at the inner edge of the box, beside the value. Affixes never take focus, so a click here lands in the input: a small button belongs in `#append`, a larger one in `append:outer`.",{"name":1192,"type":1654,"description":1670,"note":377,"demo":377},"Content rendered before the text input, at the start of the field box.",{"name":1204,"type":1654,"description":1672,"note":377,"demo":377},"Content rendered before the entire text input control, outside the input chrome.",{"name":1185,"type":1654,"description":1674,"note":377,"demo":1166},"Inline content rendered at the end of the input field area, after the typed text.",[],{"parts":1677,"states":1710},[1678,1681,1683,1685,1688,1690,1693,1695,1698,1701,1703,1705,1708],{"name":1679,"description":1680},"root","The field's outer container: the label, the box and the lines under it.",{"name":461,"description":1682},"The label text above the box (the `label` prop).",{"name":863,"description":1684},"The muted line under the label (the `description` prop).",{"name":1686,"description":1687},"message","The errors \u002F warnings line under the box. A node of its own: it can show at the same time as `hint`.",{"name":874,"description":1689},"The helper line (the `hint` prop), shown on focus, or always with `persistent-hint`.",{"name":1691,"description":1692},"box","The bordered box around the input — border, background and radius; the `variant` paints here.",{"name":1629,"description":1694},"The native input element inside the box.",{"name":1696,"description":1697},"icon","The content icons, prepend and append — a broadcast. Chrome (the clear ✕, a chevron, the error \u002F warning glyph) is never in it.",{"name":1699,"description":1700},"spinner","The spinner inside the box while `loading`.",{"name":1178,"description":1702},"The `#prefix` slot's wrapper, inside the box before the input.",{"name":1185,"description":1704},"The `#suffix` slot's wrapper, inside the box after the input.",{"name":1706,"description":1707},"clear","The ✕ that empties this control (`clearable`) — one node, never a chip's own ✕.",{"name":903,"description":1709},"The character count at the end of the hint row (`counter`): `42`, or `42 \u002F 140` with `maxlength`.",[1711,1714,1716,1718,1720,1723,1725,1728,1730,1732,1734],{"name":1712,"description":1713},"atLimit","Component-wide: with `counter` and `maxlength`, the value has reached the limit.",{"name":1155,"description":1715},"Component-wide: the control is `disabled`.",{"name":925,"description":1717},"Component-wide: the control is in its error state (`errors` \u002F `has-errors`, or its validation) — the message line and the box turn red.",{"name":1290,"description":1719},"On the field's parts: `variant: 'ghost'`. Below the real states, like every variant.",{"name":1721,"description":1722},"hasValue","Component-wide: the control holds a value, by its own rule (`0` counts on `BbNumberInput`, `''` on `BbColorInput`).",{"name":1148,"description":1724},"Component-wide: `loading` is on; the box shows its `spinner`.",{"name":1726,"description":1727},"nearLimit","Component-wide: with `counter` and `maxlength`, the value is at 90 % of the limit or more, and still below it.",{"name":1283,"description":1729},"On the field's parts: `variant: 'outline'`. Merged after the part's base entry and before its states, so the real states still win.",{"name":1162,"description":1731},"Component-wide: the control is `readonly` — shown, focusable, not editable.",{"name":1287,"description":1733},"On the field's parts: `variant: 'secondary'`. Below the real states, like every variant.",{"name":932,"description":1735},"Component-wide: the control is in its warning state (`warnings` \u002F `has-warnings`) and not in an error state — errors win, so the two are never on together.",{"removed":1737,"renamed":1780},[1738,1745,1752,1757,1760,1764,1767,1771,1775],{"name":1739,"surface":1740,"replacedBy":1210,"hint":377,"since":1741,"migration":1742,"silent":714,"fix":1743},"append-outer","slot","3.0.0-beta.41","ai\u002Fguides\u002Fmigration\u002Fv2-to-v3.md",{"kind":1744},"rename",{"name":1606,"surface":1746,"replacedBy":377,"hint":1747,"since":1748,"migration":1749,"silent":714,"fix":1750},"method","no template-ref API in v3. Reach the \u003Cinput> through pt: `:pt=\"{ input: { attrs: { ref: (el) => (input = el) } } }\"`, then `input.blur()` on that element; `autofocus` for focus on mount","3.0.0-alpha.1","ai\u002Fguides\u002Fmigration\u002Fcomponents\u002Fbb-text-input.md",{"kind":1751},"manual",{"name":1753,"surface":1754,"replacedBy":1268,"hint":377,"since":1755,"migration":1749,"silent":714,"fix":1756},"direction","prop","3.0.0-beta.33",{"kind":1744},{"name":1626,"surface":1746,"replacedBy":377,"hint":1758,"since":1748,"migration":1749,"silent":714,"fix":1759},"no template-ref API in v3. Reach the \u003Cinput> through pt: `:pt=\"{ input: { attrs: { ref: (el) => (input = el) } } }\"`, then `input.focus()` on that element; `autofocus` for focus on mount",{"kind":1751},{"name":1761,"surface":1754,"replacedBy":1494,"hint":377,"since":1762,"migration":1742,"silent":714,"fix":1763},"hasWarning","3.0.0-beta.26",{"kind":1744},{"name":1765,"surface":1740,"replacedBy":1204,"hint":377,"since":1741,"migration":1742,"silent":714,"fix":1766},"prepend-outer",{"kind":1744},{"name":1768,"surface":1746,"replacedBy":377,"hint":1769,"since":1748,"migration":1749,"silent":714,"fix":1770},"select","no template-ref API in v3. Reach the \u003Cinput> through pt: `:pt=\"{ input: { attrs: { ref: (el) => (input = el) } } }\"`, then `input.select()` on that element; `autofocus` for focus on mount",{"kind":1751},{"name":1772,"surface":1754,"replacedBy":1591,"hint":1773,"since":1741,"migration":1742,"silent":714,"fix":1774},"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",{"kind":1751},{"name":1776,"surface":1754,"replacedBy":377,"hint":1777,"since":1741,"migration":1742,"silent":714,"fix":1778},"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":1779,"display":1588,"key":516},"byValue",[1781,1783,1785,1787,1789],{"from":1739,"to":1210,"surface":1740,"since":1741,"migration":1742,"fix":1782},{"kind":1744},{"from":1753,"to":1268,"surface":1754,"since":1755,"migration":1749,"fix":1784},{"kind":1744},{"from":1761,"to":1494,"surface":1754,"since":1762,"migration":1742,"fix":1786},{"kind":1744},{"from":1765,"to":1204,"surface":1740,"since":1741,"migration":1742,"fix":1788},{"kind":1744},{"from":1772,"to":1591,"surface":1754,"since":1741,"migration":1742,"fix":1790},{"kind":1751},1793055145678]