[{"data":1,"prerenderedAt":1604},["ShallowReactive",2],{"navigation":3,"\u002Fcomponents\u002Fdropdown\u002Fdeveloper":439},[4,30,256,281,366,375,402,424],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":6},"Getting Started",false,"\u002Fgetting-started","1.getting-started",[10,15,20,25],{"title":11,"path":12,"stem":13,"icon":14},"Installation","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F2.installation","i-lucide-download",{"title":16,"path":17,"stem":18,"icon":19},"Nuxt","\u002Fgetting-started\u002Fnuxt","1.getting-started\u002F3.nuxt","i-lucide-mountain",{"title":21,"path":22,"stem":23,"icon":24},"Theming","\u002Fgetting-started\u002Ftheming","1.getting-started\u002F4.theming","i-lucide-palette",{"title":26,"path":27,"stem":28,"icon":29},"MCP","\u002Fgetting-started\u002Fmcp","1.getting-started\u002F5.mcp","i-lucide-plug",{"title":31,"icon":6,"path":32,"stem":33,"children":34,"page":6},"Components","\u002Fcomponents","2.components",[35,43,51,59,67,75,83,92,100,104,108,116,124,133,141,149,157,166,174,182,191,199,203,211,220,228,236,240,248],{"title":36,"path":37,"stem":38,"children":39,"page":6},"Accordion","\u002Fcomponents\u002Faccordion","2.components\u002F01.accordion",[40],{"title":36,"path":41,"stem":42},"\u002Fcomponents\u002Faccordion\u002Foverview","2.components\u002F01.accordion\u002F1.overview",{"title":44,"path":45,"stem":46,"children":47,"page":6},"Alert","\u002Fcomponents\u002Falert","2.components\u002F02.alert",[48],{"title":44,"path":49,"stem":50},"\u002Fcomponents\u002Falert\u002Foverview","2.components\u002F02.alert\u002F1.overview",{"title":52,"path":53,"stem":54,"children":55,"page":6},"Button","\u002Fcomponents\u002Fbutton","2.components\u002F03.button",[56],{"title":52,"path":57,"stem":58},"\u002Fcomponents\u002Fbutton\u002Foverview","2.components\u002F03.button\u002F1.overview",{"title":60,"path":61,"stem":62,"children":63,"page":6},"Card","\u002Fcomponents\u002Fcard","2.components\u002F04.card",[64],{"title":60,"path":65,"stem":66},"\u002Fcomponents\u002Fcard\u002Foverview","2.components\u002F04.card\u002F1.overview",{"title":68,"path":69,"stem":70,"children":71,"page":6},"Carousel","\u002Fcomponents\u002Fcarousel","2.components\u002F05.carousel",[72],{"title":68,"path":73,"stem":74},"\u002Fcomponents\u002Fcarousel\u002Foverview","2.components\u002F05.carousel\u002F1.overview",{"title":76,"path":77,"stem":78,"children":79,"page":6},"Checkbox","\u002Fcomponents\u002Fcheckbox","2.components\u002F06.checkbox",[80],{"title":76,"path":81,"stem":82},"\u002Fcomponents\u002Fcheckbox\u002Foverview","2.components\u002F06.checkbox\u002F1.overview",{"title":84,"path":85,"stem":86,"children":87,"page":6},"Date Picker","\u002Fcomponents\u002Fdate-picker","2.components\u002F07.date-picker",[88],{"title":89,"path":90,"stem":91},"Date picker","\u002Fcomponents\u002Fdate-picker\u002Foverview","2.components\u002F07.date-picker\u002F1.overview",{"title":93,"path":94,"stem":95,"children":96,"page":6},"Dropdown","\u002Fcomponents\u002Fdropdown","2.components\u002F08.dropdown",[97],{"title":93,"path":98,"stem":99},"\u002Fcomponents\u002Fdropdown\u002Foverview","2.components\u002F08.dropdown\u002F1.overview",{"title":101,"path":102,"stem":103},"Heading","\u002Fcomponents\u002Fheading","2.components\u002F09.heading",{"title":105,"path":106,"stem":107},"Icon","\u002Fcomponents\u002Ficon","2.components\u002F10.icon",{"title":109,"path":110,"stem":111,"children":112,"page":6},"Input","\u002Fcomponents\u002Finput","2.components\u002F11.input",[113],{"title":109,"path":114,"stem":115},"\u002Fcomponents\u002Finput\u002Foverview","2.components\u002F11.input\u002F1.overview",{"title":117,"path":118,"stem":119,"children":120,"page":6},"Label","\u002Fcomponents\u002Flabel","2.components\u002F12.label",[121],{"title":117,"path":122,"stem":123},"\u002Fcomponents\u002Flabel\u002Foverview","2.components\u002F12.label\u002F1.overview",{"title":125,"path":126,"stem":127,"children":128,"page":6},"Phone Number","\u002Fcomponents\u002Fphone-number","2.components\u002F13.phone-number",[129],{"title":130,"path":131,"stem":132},"Phone number","\u002Fcomponents\u002Fphone-number\u002Foverview","2.components\u002F13.phone-number\u002F1.overview",{"title":134,"path":135,"stem":136,"children":137,"page":6},"Popover","\u002Fcomponents\u002Fpopover","2.components\u002F14.popover",[138],{"title":134,"path":139,"stem":140},"\u002Fcomponents\u002Fpopover\u002Foverview","2.components\u002F14.popover\u002F1.overview",{"title":142,"path":143,"stem":144,"children":145,"page":6},"Quantity","\u002Fcomponents\u002Fquantity","2.components\u002F15.quantity",[146],{"title":142,"path":147,"stem":148},"\u002Fcomponents\u002Fquantity\u002Foverview","2.components\u002F15.quantity\u002F1.overview",{"title":150,"path":151,"stem":152,"children":153,"page":6},"Radio","\u002Fcomponents\u002Fradio","2.components\u002F16.radio",[154],{"title":150,"path":155,"stem":156},"\u002Fcomponents\u002Fradio\u002Foverview","2.components\u002F16.radio\u002F1.overview",{"title":158,"path":159,"stem":160,"children":161,"page":6},"Radio Group","\u002Fcomponents\u002Fradio-group","2.components\u002F17.radio-group",[162],{"title":163,"path":164,"stem":165},"Radio group","\u002Fcomponents\u002Fradio-group\u002Foverview","2.components\u002F17.radio-group\u002F1.overview",{"title":167,"path":168,"stem":169,"children":170,"page":6},"Rating","\u002Fcomponents\u002Frating","2.components\u002F18.rating",[171],{"title":167,"path":172,"stem":173},"\u002Fcomponents\u002Frating\u002Foverview","2.components\u002F18.rating\u002F1.overview",{"title":175,"path":176,"stem":177,"children":178,"page":6},"Required","\u002Fcomponents\u002Frequired","2.components\u002F19.required",[179],{"title":175,"path":180,"stem":181},"\u002Fcomponents\u002Frequired\u002Foverview","2.components\u002F19.required\u002F1.overview",{"title":183,"path":184,"stem":185,"children":186,"page":6},"Scroll Area","\u002Fcomponents\u002Fscroll-area","2.components\u002F20.scroll-area",[187],{"title":188,"path":189,"stem":190},"Scroll area","\u002Fcomponents\u002Fscroll-area\u002Foverview","2.components\u002F20.scroll-area\u002F1.overview",{"title":192,"path":193,"stem":194,"children":195,"page":6},"Select","\u002Fcomponents\u002Fselect","2.components\u002F21.select",[196],{"title":192,"path":197,"stem":198},"\u002Fcomponents\u002Fselect\u002Foverview","2.components\u002F21.select\u002F1.overview",{"title":200,"path":201,"stem":202},"Spinner","\u002Fcomponents\u002Fspinner","2.components\u002F22.spinner",{"title":204,"path":205,"stem":206,"children":207,"page":6},"Switch","\u002Fcomponents\u002Fswitch","2.components\u002F23.switch",[208],{"title":204,"path":209,"stem":210},"\u002Fcomponents\u002Fswitch\u002Foverview","2.components\u002F23.switch\u002F1.overview",{"title":212,"path":213,"stem":214,"children":215,"page":6},"Tab Badge","\u002Fcomponents\u002Ftab-badge","2.components\u002F24.tab-badge",[216],{"title":217,"path":218,"stem":219},"Tab badge","\u002Fcomponents\u002Ftab-badge\u002Foverview","2.components\u002F24.tab-badge\u002F1.overview",{"title":221,"path":222,"stem":223,"children":224,"page":6},"Tabs","\u002Fcomponents\u002Ftabs","2.components\u002F25.tabs",[225],{"title":221,"path":226,"stem":227},"\u002Fcomponents\u002Ftabs\u002Foverview","2.components\u002F25.tabs\u002F1.overview",{"title":229,"path":230,"stem":231,"children":232,"page":6},"Tag","\u002Fcomponents\u002Ftag","2.components\u002F26.tag",[233],{"title":229,"path":234,"stem":235},"\u002Fcomponents\u002Ftag\u002Foverview","2.components\u002F26.tag\u002F1.overview",{"title":237,"path":238,"stem":239},"Text","\u002Fcomponents\u002Ftext","2.components\u002F27.text",{"title":241,"path":242,"stem":243,"children":244,"page":6},"Textarea","\u002Fcomponents\u002Ftextarea","2.components\u002F28.textarea",[245],{"title":241,"path":246,"stem":247},"\u002Fcomponents\u002Ftextarea\u002Foverview","2.components\u002F28.textarea\u002F1.overview",{"title":249,"path":250,"stem":251,"children":252,"page":6},"Tooltip","\u002Fcomponents\u002Ftooltip","2.components\u002F29.tooltip",[253],{"title":249,"path":254,"stem":255},"\u002Fcomponents\u002Ftooltip\u002Foverview","2.components\u002F29.tooltip\u002F1.overview",{"title":257,"icon":6,"path":258,"stem":259,"children":260,"page":6},"Foundations","\u002Ffoundations","2.foundations",[261,269,273,277],{"title":262,"icon":6,"path":263,"stem":264,"children":265,"page":6},"Color","\u002Ffoundations\u002Fcolor","2.foundations\u002F1.color",[266],{"title":262,"path":267,"stem":268},"\u002Ffoundations\u002Fcolor\u002Foverview","2.foundations\u002F1.color\u002F1.overview",{"title":270,"path":271,"stem":272},"Icons","\u002Ffoundations\u002Ficons","2.foundations\u002F2.icons",{"title":274,"path":275,"stem":276},"Logos and Pins","\u002Ffoundations\u002Flogos-and-pins","2.foundations\u002F3.logos-and-pins",{"title":278,"path":279,"stem":280},"Web layers","\u002Ffoundations\u002Fweb-layers","2.foundations\u002F4.web-layers",{"title":282,"icon":6,"path":283,"stem":284,"children":285,"page":6},"WIP","\u002Fwip","3.wip",[286,290,294,298,302,306,310,314,318,322,326,330,334,338,342,346,350,354,358,362],{"title":287,"path":288,"stem":289},"Additional","\u002Fwip\u002Fadditional","3.wip\u002Fadditional",{"title":291,"path":292,"stem":293},"Alt text","\u002Fwip\u002Falt-text","3.wip\u002Falt-text",{"title":295,"path":296,"stem":297},"AnnouncementBar","\u002Fwip\u002Fannouncement-bar","3.wip\u002Fannouncement-bar",{"title":299,"path":300,"stem":301},"Avatar","\u002Fwip\u002Favatar","3.wip\u002Favatar",{"title":303,"path":304,"stem":305},"Banner","\u002Fwip\u002Fbanner","3.wip\u002Fbanner",{"title":307,"path":308,"stem":309},"Breadcrumbs","\u002Fwip\u002Fbreadcrumbs","3.wip\u002Fbreadcrumbs",{"title":311,"path":312,"stem":313},"Divider & scroll","\u002Fwip\u002Fdivider-scroll","3.wip\u002Fdivider-scroll",{"title":315,"path":316,"stem":317},"FieldMessage","\u002Fwip\u002Ffield-message","3.wip\u002Ffield-message",{"title":319,"path":320,"stem":321},"Focus Ring","\u002Fwip\u002Ffocus-ring","3.wip\u002Ffocus-ring",{"title":323,"path":324,"stem":325},"InlineSeparator","\u002Fwip\u002Finline-separator","3.wip\u002Finline-separator",{"title":327,"path":328,"stem":329},"Modal & drawer","\u002Fwip\u002Fmodal-drawer","3.wip\u002Fmodal-drawer",{"title":331,"path":332,"stem":333},"Optional","\u002Fwip\u002Foptional","3.wip\u002Foptional",{"title":335,"path":336,"stem":337},"Pagination","\u002Fwip\u002Fpagination","3.wip\u002Fpagination",{"title":339,"path":340,"stem":341},"PasswordInput","\u002Fwip\u002Fpassword-input","3.wip\u002Fpassword-input",{"title":343,"path":344,"stem":345},"Pinned bar page","\u002Fwip\u002Fpinned-bar-page","3.wip\u002Fpinned-bar-page",{"title":347,"path":348,"stem":349},"PromotionalBar","\u002Fwip\u002Fpromotional-bar","3.wip\u002Fpromotional-bar",{"title":351,"path":352,"stem":353},"SearchInput","\u002Fwip\u002Fsearch-input","3.wip\u002Fsearch-input",{"title":355,"path":356,"stem":357},"StatusLine","\u002Fwip\u002Fstatus-line","3.wip\u002Fstatus-line",{"title":359,"path":360,"stem":361},"Stepper & loaderBar","\u002Fwip\u002Fstepper-loader-bar","3.wip\u002Fstepper-loader-bar",{"title":363,"path":364,"stem":365},"TextInput","\u002Fwip\u002Ftext-input","3.wip\u002Ftext-input",{"title":367,"icon":6,"path":368,"stem":369,"children":370,"page":6},"Overview","\u002Foverview","4.overview",[371],{"title":372,"path":373,"stem":374},"For developers","\u002Foverview\u002Ffor-developers","4.overview\u002F1.for-developers",{"title":376,"icon":6,"path":377,"stem":378,"children":379,"page":6},"Brand","\u002Fbrand","5.brand",[380,389],{"title":381,"icon":6,"path":382,"stem":383,"children":384,"page":6},"Brand guidelines","\u002Fbrand\u002Fbrand-guidelines","5.brand\u002F1.brand-guidelines",[385],{"title":386,"path":387,"stem":388},"Dr. Max Trademarks Guidelines","\u002Fbrand\u002Fbrand-guidelines\u002Fdr-max-trademarks-guidelines","5.brand\u002F1.brand-guidelines\u002F2.dr-max-trademarks-guidelines",{"title":390,"icon":6,"path":391,"stem":392,"children":393,"page":6},"Assets","\u002Fbrand\u002Fassets","5.brand\u002F2.assets",[394,398],{"title":395,"path":396,"stem":397},"Logos","\u002Fbrand\u002Fassets\u002Flogos","5.brand\u002F2.assets\u002F2.logos",{"title":399,"path":400,"stem":401},"Dr. Max Tagline","\u002Fbrand\u002Fassets\u002Fdr-max-tagline","5.brand\u002F2.assets\u002F3.dr-max-tagline",{"title":403,"icon":6,"path":404,"stem":405,"children":406,"page":6},"Content","\u002Fcontent","6.content",[407,411],{"title":408,"path":409,"stem":410},"Content accessibility","\u002Fcontent\u002Fcontent-accessibility","6.content\u002F1.content-accessibility",{"title":412,"icon":6,"path":413,"stem":414,"children":415,"page":6},"Content guidance","\u002Fcontent\u002Fcontent-guidelines","6.content\u002F2.content-guidelines",[416,420],{"title":417,"path":418,"stem":419},"Category color-coding","\u002Fcontent\u002Fcontent-guidelines\u002Fcategory-color-coding","6.content\u002F2.content-guidelines\u002F2.category-color-coding",{"title":421,"path":422,"stem":423},"Pop-up banners","\u002Fcontent\u002Fcontent-guidelines\u002Fpop-up-banners","6.content\u002F2.content-guidelines\u002F3.pop-up-banners",{"title":425,"icon":6,"path":426,"stem":427,"children":428,"page":6},"Accessibility","\u002Faccessibility","7.accessibility",[429],{"title":430,"path":431,"stem":432,"children":433,"icon":6},"Accessibility guidance","\u002Faccessibility\u002Faccessibility-guidance","7.accessibility\u002F1.accessibility-guidance\u002F1.index",[434,435],{"title":425,"path":431,"stem":432},{"title":436,"path":437,"stem":438},"Understanding WCAG 2.2","\u002Faccessibility\u002Faccessibility-guidance\u002Funderstanding-wcag-2-2","7.accessibility\u002F1.accessibility-guidance\u002F2.understanding-wcag-2-2",{"id":440,"title":93,"body":441,"description":1596,"extension":1597,"links":1598,"meta":1599,"navigation":6,"path":1600,"seo":1601,"stem":1602,"__hash__":1603},"docs\u002F2.components\u002F08.dropdown\u002F3.developer.md",{"type":442,"value":443,"toc":1585},"minimark",[444,449,491,495,499,519,851,858,863,869,1056,1060,1082,1224,1228,1237,1332,1336,1346,1488,1492,1573,1577,1581],[445,446,448],"h2",{"id":447},"import","Import",[450,451,456],"pre",{"className":452,"code":453,"language":454,"meta":455,"style":455},"language-ts shiki shiki-themes material-theme-palenight","import { Dropdown } from \"@dr-max\u002Fui\u002Fdropdown\"\n","ts","",[457,458,459],"code",{"__ignoreMap":455},[460,461,464,467,471,475,478,481,484,488],"span",{"class":462,"line":463},"line",1,[460,465,447],{"class":466},"s6cf3",[460,468,470],{"class":469},"sAklC"," {",[460,472,474],{"class":473},"s0W1g"," Dropdown",[460,476,477],{"class":469}," }",[460,479,480],{"class":466}," from",[460,482,483],{"class":469}," \"",[460,485,487],{"class":486},"sfyAc","@dr-max\u002Fui\u002Fdropdown",[460,489,490],{"class":469},"\"\n",[492,493,494],"p",{},"The entry carries its own precompiled CSS (including the styles of the Icon, Required and Spinner parts it composes) — no extra style imports needed.",[445,496,498],{"id":497},"usage","Usage",[492,500,501,502,506,507,510,511,514,515,518],{},"Unlike the native ",[503,504,192],"a",{"href":505},"\u002Fcomponents\u002Fselect\u002Fdeveloper",", the dropdown renders a custom listbox panel. Pass the choices via the ",[457,508,509],{},"options"," prop (",[457,512,513],{},"{ label, labelSecondary?, value, disabled?, searchableText? }",") and bind the selected value with ",[457,516,517],{},"v-model",":",[520,521,522,530],"code-preview",{},[523,524],"ui-dropdown",{"className":525,"label":527,"placeholder":528,":options":529},[526],"w-72","Country","Choose a country","[{\"label\":\"Czechia\",\"value\":\"cz\"},{\"label\":\"Slovakia\",\"value\":\"sk\"},{\"label\":\"Poland\",\"value\":\"pl\"}]",[531,532,533],"template",{"v-slot:code":455},[450,534,538],{"className":535,"code":536,"language":537,"meta":455,"style":455},"language-vue shiki shiki-themes material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { Dropdown } from \"@dr-max\u002Fui\u002Fdropdown\"\nimport { ref } from \"vue\"\n\nconst country = ref(\"\")\n\nconst options = [\n  { label: \"Czechia\", value: \"cz\" },\n  { label: \"Slovakia\", value: \"sk\" },\n  { label: \"Poland\", value: \"pl\" }\n]\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CDropdown v-model=\"country\" label=\"Country\" placeholder=\"Choose a country\" :options=\"options\" \u002F>\n\u003C\u002Ftemplate>\n","vue",[457,539,540,569,588,608,615,638,643,656,692,723,755,761,771,776,785,842],{"__ignoreMap":455},[460,541,542,545,549,553,556,559,562,564,566],{"class":462,"line":463},[460,543,544],{"class":469},"\u003C",[460,546,548],{"class":547},"s-wAU","script",[460,550,552],{"class":551},"sJ14y"," setup",[460,554,555],{"class":551}," lang",[460,557,558],{"class":469},"=",[460,560,561],{"class":469},"\"",[460,563,454],{"class":486},[460,565,561],{"class":469},[460,567,568],{"class":469},">\n",[460,570,572,574,576,578,580,582,584,586],{"class":462,"line":571},2,[460,573,447],{"class":466},[460,575,470],{"class":469},[460,577,474],{"class":473},[460,579,477],{"class":469},[460,581,480],{"class":466},[460,583,483],{"class":469},[460,585,487],{"class":486},[460,587,490],{"class":469},[460,589,591,593,595,598,600,602,604,606],{"class":462,"line":590},3,[460,592,447],{"class":466},[460,594,470],{"class":469},[460,596,597],{"class":473}," ref",[460,599,477],{"class":469},[460,601,480],{"class":466},[460,603,483],{"class":469},[460,605,537],{"class":486},[460,607,490],{"class":469},[460,609,611],{"class":462,"line":610},4,[460,612,614],{"emptyLinePlaceholder":613},true,"\n",[460,616,618,621,624,626,629,632,635],{"class":462,"line":617},5,[460,619,620],{"class":551},"const",[460,622,623],{"class":473}," country ",[460,625,558],{"class":469},[460,627,597],{"class":628},"sdLwU",[460,630,631],{"class":473},"(",[460,633,634],{"class":469},"\"\"",[460,636,637],{"class":473},")\n",[460,639,641],{"class":462,"line":640},6,[460,642,614],{"emptyLinePlaceholder":613},[460,644,646,648,651,653],{"class":462,"line":645},7,[460,647,620],{"class":551},[460,649,650],{"class":473}," options ",[460,652,558],{"class":469},[460,654,655],{"class":473}," [\n",[460,657,659,662,665,667,669,672,674,677,680,682,684,687,689],{"class":462,"line":658},8,[460,660,661],{"class":469},"  {",[460,663,664],{"class":547}," label",[460,666,518],{"class":469},[460,668,483],{"class":469},[460,670,671],{"class":486},"Czechia",[460,673,561],{"class":469},[460,675,676],{"class":469},",",[460,678,679],{"class":547}," value",[460,681,518],{"class":469},[460,683,483],{"class":469},[460,685,686],{"class":486},"cz",[460,688,561],{"class":469},[460,690,691],{"class":469}," },\n",[460,693,695,697,699,701,703,706,708,710,712,714,716,719,721],{"class":462,"line":694},9,[460,696,661],{"class":469},[460,698,664],{"class":547},[460,700,518],{"class":469},[460,702,483],{"class":469},[460,704,705],{"class":486},"Slovakia",[460,707,561],{"class":469},[460,709,676],{"class":469},[460,711,679],{"class":547},[460,713,518],{"class":469},[460,715,483],{"class":469},[460,717,718],{"class":486},"sk",[460,720,561],{"class":469},[460,722,691],{"class":469},[460,724,726,728,730,732,734,737,739,741,743,745,747,750,752],{"class":462,"line":725},10,[460,727,661],{"class":469},[460,729,664],{"class":547},[460,731,518],{"class":469},[460,733,483],{"class":469},[460,735,736],{"class":486},"Poland",[460,738,561],{"class":469},[460,740,676],{"class":469},[460,742,679],{"class":547},[460,744,518],{"class":469},[460,746,483],{"class":469},[460,748,749],{"class":486},"pl",[460,751,561],{"class":469},[460,753,754],{"class":469}," }\n",[460,756,758],{"class":462,"line":757},11,[460,759,760],{"class":473},"]\n",[460,762,764,767,769],{"class":462,"line":763},12,[460,765,766],{"class":469},"\u003C\u002F",[460,768,548],{"class":547},[460,770,568],{"class":469},[460,772,774],{"class":462,"line":773},13,[460,775,614],{"emptyLinePlaceholder":613},[460,777,779,781,783],{"class":462,"line":778},14,[460,780,544],{"class":469},[460,782,531],{"class":547},[460,784,568],{"class":469},[460,786,788,791,793,796,798,800,803,805,807,809,811,813,815,818,820,822,824,826,829,831,833,835,837,839],{"class":462,"line":787},15,[460,789,790],{"class":469},"  \u003C",[460,792,93],{"class":547},[460,794,795],{"class":551}," v-model",[460,797,558],{"class":469},[460,799,561],{"class":469},[460,801,802],{"class":473},"country",[460,804,561],{"class":469},[460,806,664],{"class":551},[460,808,558],{"class":469},[460,810,561],{"class":469},[460,812,527],{"class":486},[460,814,561],{"class":469},[460,816,817],{"class":551}," placeholder",[460,819,558],{"class":469},[460,821,561],{"class":469},[460,823,528],{"class":486},[460,825,561],{"class":469},[460,827,828],{"class":469}," :",[460,830,509],{"class":551},[460,832,558],{"class":469},[460,834,561],{"class":469},[460,836,509],{"class":473},[460,838,561],{"class":469},[460,840,841],{"class":469}," \u002F>\n",[460,843,845,847,849],{"class":462,"line":844},16,[460,846,766],{"class":469},[460,848,531],{"class":547},[460,850,568],{"class":469},[492,852,853,854,857],{},"For documentation and visual tests the panel can be rendered expanded on first render with ",[457,855,856],{},"default-open",".",[859,860,862],"h3",{"id":861},"secondary-labels","Secondary labels",[492,864,865,868],{},[457,866,867],{},"labelSecondary"," renders right-aligned inside the option — useful for prices or codes:",[520,870,871,877],{},[523,872],{"className":873,"label":874,"placeholder":875,":options":876},[526],"Delivery method","Choose a delivery method","[{\"label\":\"Pickup point\",\"labelSecondary\":\"Free\",\"value\":\"pickup\"},{\"label\":\"Courier\",\"labelSecondary\":\"79 Kč\",\"value\":\"courier\"},{\"label\":\"Same-day courier\",\"labelSecondary\":\"149 Kč\",\"value\":\"same-day\"}]",[531,878,879],{"v-slot:code":455},[450,880,882],{"className":535,"code":881,"language":537,"meta":455,"style":455},"\u003Cscript setup lang=\"ts\">\nconst options = [\n  { label: \"Pickup point\", labelSecondary: \"Free\", value: \"pickup\" },\n  { label: \"Courier\", labelSecondary: \"79 Kč\", value: \"courier\" },\n  { label: \"Same-day courier\", labelSecondary: \"149 Kč\", value: \"same-day\" }\n]\n\u003C\u002Fscript>\n",[457,883,884,904,914,958,1001,1044,1048],{"__ignoreMap":455},[460,885,886,888,890,892,894,896,898,900,902],{"class":462,"line":463},[460,887,544],{"class":469},[460,889,548],{"class":547},[460,891,552],{"class":551},[460,893,555],{"class":551},[460,895,558],{"class":469},[460,897,561],{"class":469},[460,899,454],{"class":486},[460,901,561],{"class":469},[460,903,568],{"class":469},[460,905,906,908,910,912],{"class":462,"line":571},[460,907,620],{"class":551},[460,909,650],{"class":473},[460,911,558],{"class":469},[460,913,655],{"class":473},[460,915,916,918,920,922,924,927,929,931,934,936,938,941,943,945,947,949,951,954,956],{"class":462,"line":590},[460,917,661],{"class":469},[460,919,664],{"class":547},[460,921,518],{"class":469},[460,923,483],{"class":469},[460,925,926],{"class":486},"Pickup point",[460,928,561],{"class":469},[460,930,676],{"class":469},[460,932,933],{"class":547}," labelSecondary",[460,935,518],{"class":469},[460,937,483],{"class":469},[460,939,940],{"class":486},"Free",[460,942,561],{"class":469},[460,944,676],{"class":469},[460,946,679],{"class":547},[460,948,518],{"class":469},[460,950,483],{"class":469},[460,952,953],{"class":486},"pickup",[460,955,561],{"class":469},[460,957,691],{"class":469},[460,959,960,962,964,966,968,971,973,975,977,979,981,984,986,988,990,992,994,997,999],{"class":462,"line":610},[460,961,661],{"class":469},[460,963,664],{"class":547},[460,965,518],{"class":469},[460,967,483],{"class":469},[460,969,970],{"class":486},"Courier",[460,972,561],{"class":469},[460,974,676],{"class":469},[460,976,933],{"class":547},[460,978,518],{"class":469},[460,980,483],{"class":469},[460,982,983],{"class":486},"79 Kč",[460,985,561],{"class":469},[460,987,676],{"class":469},[460,989,679],{"class":547},[460,991,518],{"class":469},[460,993,483],{"class":469},[460,995,996],{"class":486},"courier",[460,998,561],{"class":469},[460,1000,691],{"class":469},[460,1002,1003,1005,1007,1009,1011,1014,1016,1018,1020,1022,1024,1027,1029,1031,1033,1035,1037,1040,1042],{"class":462,"line":617},[460,1004,661],{"class":469},[460,1006,664],{"class":547},[460,1008,518],{"class":469},[460,1010,483],{"class":469},[460,1012,1013],{"class":486},"Same-day courier",[460,1015,561],{"class":469},[460,1017,676],{"class":469},[460,1019,933],{"class":547},[460,1021,518],{"class":469},[460,1023,483],{"class":469},[460,1025,1026],{"class":486},"149 Kč",[460,1028,561],{"class":469},[460,1030,676],{"class":469},[460,1032,679],{"class":547},[460,1034,518],{"class":469},[460,1036,483],{"class":469},[460,1038,1039],{"class":486},"same-day",[460,1041,561],{"class":469},[460,1043,754],{"class":469},[460,1045,1046],{"class":462,"line":640},[460,1047,760],{"class":473},[460,1049,1050,1052,1054],{"class":462,"line":645},[460,1051,766],{"class":469},[460,1053,548],{"class":547},[460,1055,568],{"class":469},[859,1057,1059],{"id":1058},"search","Search",[492,1061,1062,1065,1066,1069,1070,1073,1074,1077,1078,1081],{},[457,1063,1064],{},"search-enabled"," renders a search field inside the panel. ",[457,1067,1068],{},"filter-mode"," decides how the term matches option labels (",[457,1071,1072],{},"startsWith"," or ",[457,1075,1076],{},"includes",") — matching is diacritics-insensitive, and ",[457,1079,1080],{},"searchableText"," on an option is matched instead of its label when present:",[520,1083,1084,1091],{},[523,1085],{"className":1086,"label":527,"placeholder":528,":options":1087,":searchEnabled":1088,"filterMode":1076,"noResultsLabel":1089,"searchPlaceholder":1090},[526],"[{\"label\":\"Czechia\",\"value\":\"cz\"},{\"label\":\"Slovakia\",\"value\":\"sk\"},{\"label\":\"Poland\",\"value\":\"pl\"},{\"label\":\"Romania\",\"value\":\"ro\"},{\"label\":\"Italy\",\"value\":\"it\"}]","true","No country found","Search countries",[531,1092,1093],{"v-slot:code":455},[450,1094,1096],{"className":535,"code":1095,"language":537,"meta":455,"style":455},"\u003Ctemplate>\n  \u003CDropdown\n    v-model=\"country\"\n    label=\"Country\"\n    placeholder=\"Choose a country\"\n    :options=\"options\"\n    search-enabled\n    filter-mode=\"includes\"\n    search-placeholder=\"Search countries\"\n    no-results-label=\"No country found\"\n  \u002F>\n\u003C\u002Ftemplate>\n",[457,1097,1098,1106,1113,1126,1139,1152,1167,1172,1185,1198,1211,1216],{"__ignoreMap":455},[460,1099,1100,1102,1104],{"class":462,"line":463},[460,1101,544],{"class":469},[460,1103,531],{"class":547},[460,1105,568],{"class":469},[460,1107,1108,1110],{"class":462,"line":571},[460,1109,790],{"class":469},[460,1111,1112],{"class":547},"Dropdown\n",[460,1114,1115,1118,1120,1122,1124],{"class":462,"line":590},[460,1116,1117],{"class":551},"    v-model",[460,1119,558],{"class":469},[460,1121,561],{"class":469},[460,1123,802],{"class":473},[460,1125,490],{"class":469},[460,1127,1128,1131,1133,1135,1137],{"class":462,"line":610},[460,1129,1130],{"class":551},"    label",[460,1132,558],{"class":469},[460,1134,561],{"class":469},[460,1136,527],{"class":486},[460,1138,490],{"class":469},[460,1140,1141,1144,1146,1148,1150],{"class":462,"line":617},[460,1142,1143],{"class":551},"    placeholder",[460,1145,558],{"class":469},[460,1147,561],{"class":469},[460,1149,528],{"class":486},[460,1151,490],{"class":469},[460,1153,1154,1157,1159,1161,1163,1165],{"class":462,"line":640},[460,1155,1156],{"class":469},"    :",[460,1158,509],{"class":551},[460,1160,558],{"class":469},[460,1162,561],{"class":469},[460,1164,509],{"class":473},[460,1166,490],{"class":469},[460,1168,1169],{"class":462,"line":645},[460,1170,1171],{"class":551},"    search-enabled\n",[460,1173,1174,1177,1179,1181,1183],{"class":462,"line":658},[460,1175,1176],{"class":551},"    filter-mode",[460,1178,558],{"class":469},[460,1180,561],{"class":469},[460,1182,1076],{"class":486},[460,1184,490],{"class":469},[460,1186,1187,1190,1192,1194,1196],{"class":462,"line":694},[460,1188,1189],{"class":551},"    search-placeholder",[460,1191,558],{"class":469},[460,1193,561],{"class":469},[460,1195,1090],{"class":486},[460,1197,490],{"class":469},[460,1199,1200,1203,1205,1207,1209],{"class":462,"line":725},[460,1201,1202],{"class":551},"    no-results-label",[460,1204,558],{"class":469},[460,1206,561],{"class":469},[460,1208,1089],{"class":486},[460,1210,490],{"class":469},[460,1212,1213],{"class":462,"line":757},[460,1214,1215],{"class":469},"  \u002F>\n",[460,1217,1218,1220,1222],{"class":462,"line":763},[460,1219,766],{"class":469},[460,1221,531],{"class":547},[460,1223,568],{"class":469},[859,1225,1227],{"id":1226},"loading","Loading",[492,1229,1230,1232,1233,1236],{},[457,1231,1226],{}," shows a loading row inside the panel instead of the options, with ",[457,1234,1235],{},"loading-label"," rendered next to the spinner:",[520,1238,1239,1244],{},[523,1240],{"className":1241,"label":926,"placeholder":1242,":loading":1088,"loading-label":1243},[526],"Choose a pickup point","Loading pickup points…",[531,1245,1246],{"v-slot:code":455},[450,1247,1249],{"className":535,"code":1248,"language":537,"meta":455,"style":455},"\u003Ctemplate>\n  \u003CDropdown\n    v-model=\"pickupPoint\"\n    label=\"Pickup point\"\n    placeholder=\"Choose a pickup point\"\n    loading\n    loading-label=\"Loading pickup points…\"\n  \u002F>\n\u003C\u002Ftemplate>\n",[457,1250,1251,1259,1265,1278,1290,1302,1307,1320,1324],{"__ignoreMap":455},[460,1252,1253,1255,1257],{"class":462,"line":463},[460,1254,544],{"class":469},[460,1256,531],{"class":547},[460,1258,568],{"class":469},[460,1260,1261,1263],{"class":462,"line":571},[460,1262,790],{"class":469},[460,1264,1112],{"class":547},[460,1266,1267,1269,1271,1273,1276],{"class":462,"line":590},[460,1268,1117],{"class":551},[460,1270,558],{"class":469},[460,1272,561],{"class":469},[460,1274,1275],{"class":473},"pickupPoint",[460,1277,490],{"class":469},[460,1279,1280,1282,1284,1286,1288],{"class":462,"line":610},[460,1281,1130],{"class":551},[460,1283,558],{"class":469},[460,1285,561],{"class":469},[460,1287,926],{"class":486},[460,1289,490],{"class":469},[460,1291,1292,1294,1296,1298,1300],{"class":462,"line":617},[460,1293,1143],{"class":551},[460,1295,558],{"class":469},[460,1297,561],{"class":469},[460,1299,1242],{"class":486},[460,1301,490],{"class":469},[460,1303,1304],{"class":462,"line":640},[460,1305,1306],{"class":551},"    loading\n",[460,1308,1309,1312,1314,1316,1318],{"class":462,"line":645},[460,1310,1311],{"class":551},"    loading-label",[460,1313,558],{"class":469},[460,1315,561],{"class":469},[460,1317,1243],{"class":486},[460,1319,490],{"class":469},[460,1321,1322],{"class":462,"line":658},[460,1323,1215],{"class":469},[460,1325,1326,1328,1330],{"class":462,"line":694},[460,1327,766],{"class":469},[460,1329,531],{"class":547},[460,1331,568],{"class":469},[859,1333,1335],{"id":1334},"validation-errors","Validation errors",[492,1337,1338,1341,1342,1345],{},[457,1339,1340],{},"errors"," renders validation messages below the trigger once ",[457,1343,1344],{},"touched"," marks the validation as active:",[520,1347,1348,1353],{},[523,1349],{"className":1350,"label":527,"placeholder":528,":options":1351,":errors":1352,":touched":1088},[526],"[{\"label\":\"Czechia\",\"value\":\"cz\"},{\"label\":\"Slovakia\",\"value\":\"sk\"}]","[{\"label\":\"Choose your country\",\"param\":\"required\"}]",[531,1354,1355],{"v-slot:code":455},[450,1356,1358],{"className":535,"code":1357,"language":537,"meta":455,"style":455},"\u003Ctemplate>\n  \u003CDropdown\n    v-model=\"country\"\n    label=\"Country\"\n    placeholder=\"Choose a country\"\n    :options=\"options\"\n    touched\n    :errors=\"[{ label: 'Choose your country', param: 'required' }]\"\n  \u002F>\n\u003C\u002Ftemplate>\n",[457,1359,1360,1368,1374,1386,1398,1410,1424,1429,1476,1480],{"__ignoreMap":455},[460,1361,1362,1364,1366],{"class":462,"line":463},[460,1363,544],{"class":469},[460,1365,531],{"class":547},[460,1367,568],{"class":469},[460,1369,1370,1372],{"class":462,"line":571},[460,1371,790],{"class":469},[460,1373,1112],{"class":547},[460,1375,1376,1378,1380,1382,1384],{"class":462,"line":590},[460,1377,1117],{"class":551},[460,1379,558],{"class":469},[460,1381,561],{"class":469},[460,1383,802],{"class":473},[460,1385,490],{"class":469},[460,1387,1388,1390,1392,1394,1396],{"class":462,"line":610},[460,1389,1130],{"class":551},[460,1391,558],{"class":469},[460,1393,561],{"class":469},[460,1395,527],{"class":486},[460,1397,490],{"class":469},[460,1399,1400,1402,1404,1406,1408],{"class":462,"line":617},[460,1401,1143],{"class":551},[460,1403,558],{"class":469},[460,1405,561],{"class":469},[460,1407,528],{"class":486},[460,1409,490],{"class":469},[460,1411,1412,1414,1416,1418,1420,1422],{"class":462,"line":640},[460,1413,1156],{"class":469},[460,1415,509],{"class":551},[460,1417,558],{"class":469},[460,1419,561],{"class":469},[460,1421,509],{"class":473},[460,1423,490],{"class":469},[460,1425,1426],{"class":462,"line":645},[460,1427,1428],{"class":551},"    touched\n",[460,1430,1431,1433,1435,1437,1439,1442,1445,1448,1451,1454,1456,1459,1462,1464,1466,1469,1471,1474],{"class":462,"line":658},[460,1432,1156],{"class":469},[460,1434,1340],{"class":551},[460,1436,558],{"class":469},[460,1438,561],{"class":469},[460,1440,1441],{"class":469},"[{ ",[460,1443,1444],{"class":547},"label",[460,1446,1447],{"class":469},": ",[460,1449,1450],{"class":469},"'",[460,1452,1453],{"class":486},"Choose your country",[460,1455,1450],{"class":469},[460,1457,1458],{"class":469},", ",[460,1460,1461],{"class":547},"param",[460,1463,1447],{"class":469},[460,1465,1450],{"class":469},[460,1467,1468],{"class":486},"required",[460,1470,1450],{"class":469},[460,1472,1473],{"class":469}," }]",[460,1475,490],{"class":469},[460,1477,1478],{"class":462,"line":694},[460,1479,1215],{"class":469},[460,1481,1482,1484,1486],{"class":462,"line":725},[460,1483,766],{"class":469},[460,1485,531],{"class":547},[460,1487,568],{"class":469},[859,1489,1491],{"id":1490},"disabled","Disabled",[520,1493,1494,1497],{},[523,1495],{"className":1496,"label":527,"placeholder":528,":disabled":1088},[526],[531,1498,1499],{"v-slot:code":455},[450,1500,1502],{"className":535,"code":1501,"language":537,"meta":455,"style":455},"\u003Ctemplate>\n  \u003CDropdown v-model=\"country\" label=\"Country\" placeholder=\"Choose a country\" :options=\"options\" disabled \u002F>\n\u003C\u002Ftemplate>\n",[457,1503,1504,1512,1565],{"__ignoreMap":455},[460,1505,1506,1508,1510],{"class":462,"line":463},[460,1507,544],{"class":469},[460,1509,531],{"class":547},[460,1511,568],{"class":469},[460,1513,1514,1516,1518,1520,1522,1524,1526,1528,1530,1532,1534,1536,1538,1540,1542,1544,1546,1548,1550,1552,1554,1556,1558,1560,1563],{"class":462,"line":571},[460,1515,790],{"class":469},[460,1517,93],{"class":547},[460,1519,795],{"class":551},[460,1521,558],{"class":469},[460,1523,561],{"class":469},[460,1525,802],{"class":473},[460,1527,561],{"class":469},[460,1529,664],{"class":551},[460,1531,558],{"class":469},[460,1533,561],{"class":469},[460,1535,527],{"class":486},[460,1537,561],{"class":469},[460,1539,817],{"class":551},[460,1541,558],{"class":469},[460,1543,561],{"class":469},[460,1545,528],{"class":486},[460,1547,561],{"class":469},[460,1549,828],{"class":469},[460,1551,509],{"class":551},[460,1553,558],{"class":469},[460,1555,561],{"class":469},[460,1557,509],{"class":473},[460,1559,561],{"class":469},[460,1561,1562],{"class":551}," disabled",[460,1564,841],{"class":469},[460,1566,1567,1569,1571],{"class":462,"line":590},[460,1568,766],{"class":469},[460,1570,531],{"class":547},[460,1572,568],{"class":469},[445,1574,1576],{"id":1575},"playground","Playground",[1578,1579],"component-playground",{"component":1580},"dropdown",[1582,1583,1584],"style",{},"html pre.shiki code .s6cf3, html code.shiki .s6cf3{--shiki-default:#89DDFF;--shiki-default-font-style:italic}html pre.shiki code .sAklC, html code.shiki .sAklC{--shiki-default:#89DDFF}html pre.shiki code .s0W1g, html code.shiki .s0W1g{--shiki-default:#BABED8}html pre.shiki code .sfyAc, html code.shiki .sfyAc{--shiki-default:#C3E88D}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 pre.shiki code .s-wAU, html code.shiki .s-wAU{--shiki-default:#F07178}html pre.shiki code .sJ14y, html code.shiki .sJ14y{--shiki-default:#C792EA}html pre.shiki code .sdLwU, html code.shiki .sdLwU{--shiki-default:#82AAFF}",{"title":455,"searchDepth":463,"depth":571,"links":1586},[1587,1588,1595],{"id":447,"depth":571,"text":448},{"id":497,"depth":571,"text":498,"children":1589},[1590,1591,1592,1593,1594],{"id":861,"depth":590,"text":862},{"id":1058,"depth":590,"text":1059},{"id":1226,"depth":590,"text":1227},{"id":1334,"depth":590,"text":1335},{"id":1490,"depth":590,"text":1491},{"id":1575,"depth":571,"text":1576},"Let users pick one option from a rich, searchable list.","md",null,{},"\u002Fcomponents\u002Fdropdown\u002Fdeveloper",{"title":93,"description":1596},"2.components\u002F08.dropdown\u002F3.developer","2ZCcxIROq3oC866UKuvSVerXIKPN_clsSZWxM4A4mG4",1793289681455]