[{"data":1,"prerenderedAt":1302},["ShallowReactive",2],{"docs-nav:docs_en":3,"\u002Fen\u002Fcomponents\u002Fform":1047,"surround:\u002Fen\u002Fcomponents\u002Fform":1294,"demo-code:form\u002Fbasic":1299,"demo-code:form\u002Fcustom-validation":1300,"demo-code:form\u002Finputs":1301},[4],{"title":5,"path":6,"stem":7,"children":8,"page":614},"En","\u002Fen","en",[9,32,615],{"title":10,"icon":11,"path":12,"stem":13,"children":14},"Guide","i-lucide-book-open","\u002Fen\u002Fguide","en\u002F01.guide\u002Findex",[15,16,20,24,28],{"title":10,"path":12,"stem":13},{"title":17,"path":18,"stem":19},"Introduction","\u002Fen\u002Fguide\u002Fintroduction","en\u002F01.guide\u002F01.introduction",{"title":21,"path":22,"stem":23},"Installation","\u002Fen\u002Fguide\u002Finstallation","en\u002F01.guide\u002F02.installation",{"title":25,"path":26,"stem":27},"Theming","\u002Fen\u002Fguide\u002Ftheming","en\u002F01.guide\u002F03.theming",{"title":29,"path":30,"stem":31},"AI Integration","\u002Fen\u002Fguide\u002Fai","en\u002F01.guide\u002F04.ai",{"title":33,"icon":34,"path":35,"stem":36,"children":37,"page":614},"Components","i-lucide-component","\u002Fen\u002Fcomponents","en\u002F02.components",[38,43,48,53,57,61,65,69,73,77,81,86,91,96,100,104,108,112,116,121,125,129,133,137,141,146,150,154,158,163,167,171,174,178,182,186,190,194,198,202,206,211,215,219,223,227,231,235,239,243,247,251,255,259,263,267,271,275,279,283,287,291,295,299,303,307,311,315,319,323,327,331,335,339,343,347,351,355,359,363,367,371,375,379,383,387,391,395,399,403,407,411,415,419,423,427,431,435,439,443,447,451,455,459,463,467,471,475,479,483,487,491,495,499,503,507,511,515,519,523,527,531,534,538,542,546,550,554,558,562,566,570,574,578,582,586,590,594,598,602,606,610],{"title":39,"path":40,"stem":41,"section":42},"Accordion","\u002Fen\u002Fcomponents\u002Faccordion","en\u002F02.components\u002F01.accordion","Layout",{"title":44,"path":45,"stem":46,"section":47},"Affix","\u002Fen\u002Fcomponents\u002Faffix","en\u002F02.components\u002F02.affix","Navigation",{"title":49,"path":50,"stem":51,"section":52},"AI Action","\u002Fen\u002Fcomponents\u002Fai-action","en\u002F02.components\u002F03.ai-action","AI",{"title":54,"path":55,"stem":56,"section":52},"AI Attachments","\u002Fen\u002Fcomponents\u002Fai-attachments","en\u002F02.components\u002F04.ai-attachments",{"title":58,"path":59,"stem":60,"section":52},"AI Message","\u002Fen\u002Fcomponents\u002Fai-message","en\u002F02.components\u002F05.ai-message",{"title":62,"path":63,"stem":64,"section":52},"AI Prompt Input","\u002Fen\u002Fcomponents\u002Fai-prompt-input","en\u002F02.components\u002F06.ai-prompt-input",{"title":66,"path":67,"stem":68,"section":52},"AI Reasoning","\u002Fen\u002Fcomponents\u002Fai-reasoning","en\u002F02.components\u002F07.ai-reasoning",{"title":70,"path":71,"stem":72,"section":52},"AI Response","\u002Fen\u002Fcomponents\u002Fai-response","en\u002F02.components\u002F08.ai-response",{"title":74,"path":75,"stem":76,"section":52},"AI Source","\u002Fen\u002Fcomponents\u002Fai-source","en\u002F02.components\u002F09.ai-source",{"title":78,"path":79,"stem":80,"section":52},"AI Suggestion","\u002Fen\u002Fcomponents\u002Fai-suggestion","en\u002F02.components\u002F10.ai-suggestion",{"title":82,"path":83,"stem":84,"section":85},"Progress","\u002Fen\u002Fcomponents\u002Fprogress","en\u002F02.components\u002F100.progress","Feedback",{"title":87,"path":88,"stem":89,"section":90},"QR Code","\u002Fen\u002Fcomponents\u002Fqr-code","en\u002F02.components\u002F101.qr-code","Media",{"title":92,"path":93,"stem":94,"section":95},"Radio Group","\u002Fen\u002Fcomponents\u002Fradio-group","en\u002F02.components\u002F102.radio-group","Forms",{"title":97,"path":98,"stem":99,"section":95},"Rating Group","\u002Fen\u002Fcomponents\u002Frating-group","en\u002F02.components\u002F103.rating-group",{"title":101,"path":102,"stem":103,"section":85},"Result","\u002Fen\u002Fcomponents\u002Fresult","en\u002F02.components\u002F104.result",{"title":105,"path":106,"stem":107,"section":42},"Scroll Area","\u002Fen\u002Fcomponents\u002Fscroll-area","en\u002F02.components\u002F105.scroll-area",{"title":109,"path":110,"stem":111,"section":95},"Segment Group","\u002Fen\u002Fcomponents\u002Fsegment-group","en\u002F02.components\u002F106.segment-group",{"title":113,"path":114,"stem":115,"section":95},"Select","\u002Fen\u002Fcomponents\u002Fselect","en\u002F02.components\u002F107.select",{"title":117,"path":118,"stem":119,"section":120},"Separator","\u002Fen\u002Fcomponents\u002Fseparator","en\u002F02.components\u002F108.separator","Elements",{"title":122,"path":123,"stem":124,"section":95},"Signature Pad","\u002Fen\u002Fcomponents\u002Fsignature-pad","en\u002F02.components\u002F109.signature-pad",{"title":126,"path":127,"stem":128,"section":52},"AI Tool","\u002Fen\u002Fcomponents\u002Fai-tool","en\u002F02.components\u002F11.ai-tool",{"title":130,"path":131,"stem":132,"section":85},"Skeleton","\u002Fen\u002Fcomponents\u002Fskeleton","en\u002F02.components\u002F110.skeleton",{"title":134,"path":135,"stem":136,"section":95},"Slider","\u002Fen\u002Fcomponents\u002Fslider","en\u002F02.components\u002F111.slider",{"title":138,"path":139,"stem":140,"section":85},"Spinner","\u002Fen\u002Fcomponents\u002Fspinner","en\u002F02.components\u002F112.spinner",{"title":142,"path":143,"stem":144,"section":145},"Split Button","\u002Fen\u002Fcomponents\u002Fsplit-button","en\u002F02.components\u002F113.split-button","Actions",{"title":147,"path":148,"stem":149,"section":42},"Splitter","\u002Fen\u002Fcomponents\u002Fsplitter","en\u002F02.components\u002F114.splitter",{"title":151,"path":152,"stem":153,"section":42},"Spotlight","\u002Fen\u002Fcomponents\u002Fspotlight","en\u002F02.components\u002F115.spotlight",{"title":155,"path":156,"stem":157,"section":42},"Stack","\u002Fen\u002Fcomponents\u002Fstack","en\u002F02.components\u002F116.stack",{"title":159,"path":160,"stem":161,"section":162},"Stat","\u002Fen\u002Fcomponents\u002Fstat","en\u002F02.components\u002F117.stat","Data",{"title":164,"path":165,"stem":166,"section":47},"Steps","\u002Fen\u002Fcomponents\u002Fsteps","en\u002F02.components\u002F118.steps",{"title":168,"path":169,"stem":170,"section":145},"Swap","\u002Fen\u002Fcomponents\u002Fswap","en\u002F02.components\u002F119.swap",{"title":52,"path":172,"stem":173,"section":52},"\u002Fen\u002Fcomponents\u002Fai","en\u002F02.components\u002F12.ai",{"title":175,"path":176,"stem":177,"section":95},"Switch","\u002Fen\u002Fcomponents\u002Fswitch","en\u002F02.components\u002F120.switch",{"title":179,"path":180,"stem":181,"section":162},"Table","\u002Fen\u002Fcomponents\u002Ftable","en\u002F02.components\u002F121.table",{"title":183,"path":184,"stem":185,"section":47},"Tabs","\u002Fen\u002Fcomponents\u002Ftabs","en\u002F02.components\u002F122.tabs",{"title":187,"path":188,"stem":189,"section":95},"Tags Input","\u002Fen\u002Fcomponents\u002Ftags-input","en\u002F02.components\u002F123.tags-input",{"title":191,"path":192,"stem":193,"section":162},"Terminal","\u002Fen\u002Fcomponents\u002Fterminal","en\u002F02.components\u002F124.terminal",{"title":195,"path":196,"stem":197,"section":95},"Textarea","\u002Fen\u002Fcomponents\u002Ftextarea","en\u002F02.components\u002F125.textarea",{"title":199,"path":200,"stem":201,"section":162},"Timeline","\u002Fen\u002Fcomponents\u002Ftimeline","en\u002F02.components\u002F126.timeline",{"title":203,"path":204,"stem":205,"section":162},"Timer","\u002Fen\u002Fcomponents\u002Ftimer","en\u002F02.components\u002F127.timer",{"title":207,"path":208,"stem":209,"section":210},"Toast","\u002Fen\u002Fcomponents\u002Ftoast","en\u002F02.components\u002F128.toast","Overlay",{"title":212,"path":213,"stem":214,"section":47},"Toc","\u002Fen\u002Fcomponents\u002Ftoc","en\u002F02.components\u002F129.toc",{"title":216,"path":217,"stem":218,"section":85},"Alert","\u002Fen\u002Fcomponents\u002Falert","en\u002F02.components\u002F13.alert",{"title":220,"path":221,"stem":222,"section":145},"Toggle Group","\u002Fen\u002Fcomponents\u002Ftoggle-group","en\u002F02.components\u002F130.toggle-group",{"title":224,"path":225,"stem":226,"section":145},"Toggle","\u002Fen\u002Fcomponents\u002Ftoggle","en\u002F02.components\u002F131.toggle",{"title":228,"path":229,"stem":230,"section":145},"Toolbar","\u002Fen\u002Fcomponents\u002Ftoolbar","en\u002F02.components\u002F132.toolbar",{"title":232,"path":233,"stem":234,"section":210},"Tooltip","\u002Fen\u002Fcomponents\u002Ftooltip","en\u002F02.components\u002F133.tooltip",{"title":236,"path":237,"stem":238,"section":210},"Tour","\u002Fen\u002Fcomponents\u002Ftour","en\u002F02.components\u002F134.tour",{"title":240,"path":241,"stem":242,"section":162},"Transfer","\u002Fen\u002Fcomponents\u002Ftransfer","en\u002F02.components\u002F135.transfer",{"title":244,"path":245,"stem":246,"section":95},"Tree Select","\u002Fen\u002Fcomponents\u002Ftree-select","en\u002F02.components\u002F136.tree-select",{"title":248,"path":249,"stem":250,"section":162},"Tree View","\u002Fen\u002Fcomponents\u002Ftree-view","en\u002F02.components\u002F137.tree-view",{"title":252,"path":253,"stem":254,"section":42},"Typography","\u002Fen\u002Fcomponents\u002Ftypography","en\u002F02.components\u002F138.typography",{"title":256,"path":257,"stem":258,"section":120},"User","\u002Fen\u002Fcomponents\u002Fuser","en\u002F02.components\u002F139.user",{"title":260,"path":261,"stem":262,"section":95},"Angle Slider","\u002Fen\u002Fcomponents\u002Fangle-slider","en\u002F02.components\u002F14.angle-slider",{"title":264,"path":265,"stem":266,"section":162},"Virtual List","\u002Fen\u002Fcomponents\u002Fvirtual-list","en\u002F02.components\u002F140.virtual-list",{"title":268,"path":269,"stem":270,"section":90},"Watermark","\u002Fen\u002Fcomponents\u002Fwatermark","en\u002F02.components\u002F141.watermark",{"title":272,"path":273,"stem":274,"section":162},"Workflow","\u002Fen\u002Fcomponents\u002Fworkflow","en\u002F02.components\u002F142.workflow",{"title":276,"path":277,"stem":278,"section":42},"Aspect Ratio","\u002Fen\u002Fcomponents\u002Faspect-ratio","en\u002F02.components\u002F15.aspect-ratio",{"title":280,"path":281,"stem":282,"section":95},"Autocomplete","\u002Fen\u002Fcomponents\u002Fautocomplete","en\u002F02.components\u002F16.autocomplete",{"title":284,"path":285,"stem":286,"section":120},"Avatar Group","\u002Fen\u002Fcomponents\u002Favatar-group","en\u002F02.components\u002F17.avatar-group",{"title":288,"path":289,"stem":290,"section":120},"Avatar","\u002Fen\u002Fcomponents\u002Favatar","en\u002F02.components\u002F18.avatar",{"title":292,"path":293,"stem":294,"section":47},"Back Top","\u002Fen\u002Fcomponents\u002Fback-top","en\u002F02.components\u002F19.back-top",{"title":296,"path":297,"stem":298,"section":120},"Badge","\u002Fen\u002Fcomponents\u002Fbadge","en\u002F02.components\u002F20.badge",{"title":300,"path":301,"stem":302,"section":85},"Banner","\u002Fen\u002Fcomponents\u002Fbanner","en\u002F02.components\u002F21.banner",{"title":304,"path":305,"stem":306,"section":42},"Bento","\u002Fen\u002Fcomponents\u002Fbento","en\u002F02.components\u002F22.bento",{"title":308,"path":309,"stem":310,"section":85},"Block Ui","\u002Fen\u002Fcomponents\u002Fblock-ui","en\u002F02.components\u002F23.block-ui",{"title":312,"path":313,"stem":314,"section":47},"Breadcrumb","\u002Fen\u002Fcomponents\u002Fbreadcrumb","en\u002F02.components\u002F24.breadcrumb",{"title":316,"path":317,"stem":318,"section":90},"Browser","\u002Fen\u002Fcomponents\u002Fbrowser","en\u002F02.components\u002F25.browser",{"title":320,"path":321,"stem":322,"section":120},"Button Group","\u002Fen\u002Fcomponents\u002Fbutton-group","en\u002F02.components\u002F26.button-group",{"title":324,"path":325,"stem":326,"section":120},"Button","\u002Fen\u002Fcomponents\u002Fbutton","en\u002F02.components\u002F27.button",{"title":328,"path":329,"stem":330,"section":95},"Calendar","\u002Fen\u002Fcomponents\u002Fcalendar","en\u002F02.components\u002F28.calendar",{"title":332,"path":333,"stem":334,"section":120},"Card","\u002Fen\u002Fcomponents\u002Fcard","en\u002F02.components\u002F29.card",{"title":336,"path":337,"stem":338,"section":90},"Carousel","\u002Fen\u002Fcomponents\u002Fcarousel","en\u002F02.components\u002F30.carousel",{"title":340,"path":341,"stem":342,"section":95},"Cascade Select","\u002Fen\u002Fcomponents\u002Fcascade-select","en\u002F02.components\u002F31.cascade-select",{"title":344,"path":345,"stem":346,"section":162},"Chart","\u002Fen\u002Fcomponents\u002Fchart","en\u002F02.components\u002F32.chart",{"title":348,"path":349,"stem":350,"section":95},"Checkbox Group","\u002Fen\u002Fcomponents\u002Fcheckbox-group","en\u002F02.components\u002F33.checkbox-group",{"title":352,"path":353,"stem":354,"section":95},"Checkbox","\u002Fen\u002Fcomponents\u002Fcheckbox","en\u002F02.components\u002F34.checkbox",{"title":356,"path":357,"stem":358,"section":120},"Chip","\u002Fen\u002Fcomponents\u002Fchip","en\u002F02.components\u002F35.chip",{"title":360,"path":361,"stem":362,"section":120},"Client Only","\u002Fen\u002Fcomponents\u002Fclient-only","en\u002F02.components\u002F36.client-only",{"title":364,"path":365,"stem":366,"section":145},"Clipboard","\u002Fen\u002Fcomponents\u002Fclipboard","en\u002F02.components\u002F37.clipboard",{"title":368,"path":369,"stem":370,"section":42},"Collapsible","\u002Fen\u002Fcomponents\u002Fcollapsible","en\u002F02.components\u002F38.collapsible",{"title":372,"path":373,"stem":374,"section":162},"Collection","\u002Fen\u002Fcomponents\u002Fcollection","en\u002F02.components\u002F39.collection",{"title":376,"path":377,"stem":378,"section":95},"Color Picker","\u002Fen\u002Fcomponents\u002Fcolor-picker","en\u002F02.components\u002F40.color-picker",{"title":380,"path":381,"stem":382,"section":95},"Combobox","\u002Fen\u002Fcomponents\u002Fcombobox","en\u002F02.components\u002F41.combobox",{"title":384,"path":385,"stem":386,"section":210},"Command","\u002Fen\u002Fcomponents\u002Fcommand","en\u002F02.components\u002F42.command",{"title":388,"path":389,"stem":390,"section":162},"Comment","\u002Fen\u002Fcomponents\u002Fcomment","en\u002F02.components\u002F43.comment",{"title":392,"path":393,"stem":394,"section":120},"Config Provider","\u002Fen\u002Fcomponents\u002Fconfig-provider","en\u002F02.components\u002F44.config-provider",{"title":396,"path":397,"stem":398,"section":42},"Container","\u002Fen\u002Fcomponents\u002Fcontainer","en\u002F02.components\u002F45.container",{"title":400,"path":401,"stem":402,"section":162},"Data View","\u002Fen\u002Fcomponents\u002Fdata-view","en\u002F02.components\u002F46.data-view",{"title":404,"path":405,"stem":406,"section":95},"Date Input","\u002Fen\u002Fcomponents\u002Fdate-input","en\u002F02.components\u002F47.date-input",{"title":408,"path":409,"stem":410,"section":95},"Date Picker","\u002Fen\u002Fcomponents\u002Fdate-picker","en\u002F02.components\u002F48.date-picker",{"title":412,"path":413,"stem":414,"section":120},"Deferred Content","\u002Fen\u002Fcomponents\u002Fdeferred-content","en\u002F02.components\u002F49.deferred-content",{"title":416,"path":417,"stem":418,"section":162},"Descriptions","\u002Fen\u002Fcomponents\u002Fdescriptions","en\u002F02.components\u002F50.descriptions",{"title":420,"path":421,"stem":422,"section":210},"Dialog","\u002Fen\u002Fcomponents\u002Fdialog","en\u002F02.components\u002F51.dialog",{"title":424,"path":425,"stem":426,"section":145},"Dock","\u002Fen\u002Fcomponents\u002Fdock","en\u002F02.components\u002F52.dock",{"title":428,"path":429,"stem":430,"section":145},"Download Trigger","\u002Fen\u002Fcomponents\u002Fdownload-trigger","en\u002F02.components\u002F53.download-trigger",{"title":432,"path":433,"stem":434,"section":210},"Drawer","\u002Fen\u002Fcomponents\u002Fdrawer","en\u002F02.components\u002F54.drawer",{"title":436,"path":437,"stem":438,"section":95},"Dynamic Input","\u002Fen\u002Fcomponents\u002Fdynamic-input","en\u002F02.components\u002F55.dynamic-input",{"title":440,"path":441,"stem":442,"section":95},"Editable","\u002Fen\u002Fcomponents\u002Feditable","en\u002F02.components\u002F56.editable",{"title":444,"path":445,"stem":446,"section":42},"Ellipsis","\u002Fen\u002Fcomponents\u002Fellipsis","en\u002F02.components\u002F57.ellipsis",{"title":448,"path":449,"stem":450,"section":85},"Empty","\u002Fen\u002Fcomponents\u002Fempty","en\u002F02.components\u002F58.empty",{"title":452,"path":453,"stem":454,"section":95},"Field","\u002Fen\u002Fcomponents\u002Ffield","en\u002F02.components\u002F59.field",{"title":456,"path":457,"stem":458,"section":95},"Fieldset","\u002Fen\u002Fcomponents\u002Ffieldset","en\u002F02.components\u002F60.fieldset",{"title":460,"path":461,"stem":462,"section":95},"File Upload","\u002Fen\u002Fcomponents\u002Ffile-upload","en\u002F02.components\u002F61.file-upload",{"title":464,"path":465,"stem":466,"section":145},"Float Button","\u002Fen\u002Fcomponents\u002Ffloat-button","en\u002F02.components\u002F62.float-button",{"title":468,"path":469,"stem":470,"section":210},"Floating Panel","\u002Fen\u002Fcomponents\u002Ffloating-panel","en\u002F02.components\u002F63.floating-panel",{"title":472,"path":473,"stem":474,"section":210},"Focus Trap","\u002Fen\u002Fcomponents\u002Ffocus-trap","en\u002F02.components\u002F64.focus-trap",{"title":476,"path":477,"stem":478,"section":95},"Form","\u002Fen\u002Fcomponents\u002Fform","en\u002F02.components\u002F65.form",{"title":480,"path":481,"stem":482,"section":120},"Format","\u002Fen\u002Fcomponents\u002Fformat","en\u002F02.components\u002F66.format",{"title":484,"path":485,"stem":486,"section":42},"Frame","\u002Fen\u002Fcomponents\u002Fframe","en\u002F02.components\u002F67.frame",{"title":488,"path":489,"stem":490,"section":42},"Grid","\u002Fen\u002Fcomponents\u002Fgrid","en\u002F02.components\u002F68.grid",{"title":492,"path":493,"stem":494,"section":120},"Highlight","\u002Fen\u002Fcomponents\u002Fhighlight","en\u002F02.components\u002F69.highlight",{"title":496,"path":497,"stem":498,"section":210},"Hover Card","\u002Fen\u002Fcomponents\u002Fhover-card","en\u002F02.components\u002F70.hover-card",{"title":500,"path":501,"stem":502,"section":120},"Icon","\u002Fen\u002Fcomponents\u002Ficon","en\u002F02.components\u002F71.icon",{"title":504,"path":505,"stem":506,"section":90},"Image Cropper","\u002Fen\u002Fcomponents\u002Fimage-cropper","en\u002F02.components\u002F72.image-cropper",{"title":508,"path":509,"stem":510,"section":90},"Image Viewer","\u002Fen\u002Fcomponents\u002Fimage-viewer","en\u002F02.components\u002F73.image-viewer",{"title":512,"path":513,"stem":514,"section":90},"Image","\u002Fen\u002Fcomponents\u002Fimage","en\u002F02.components\u002F74.image",{"title":516,"path":517,"stem":518,"section":95},"Input Group","\u002Fen\u002Fcomponents\u002Finput-group","en\u002F02.components\u002F75.input-group",{"title":520,"path":521,"stem":522,"section":95},"Input","\u002Fen\u002Fcomponents\u002Finput","en\u002F02.components\u002F76.input",{"title":524,"path":525,"stem":526,"section":162},"Json Tree View","\u002Fen\u002Fcomponents\u002Fjson-tree-view","en\u002F02.components\u002F77.json-tree-view",{"title":528,"path":529,"stem":530,"section":120},"Kbd","\u002Fen\u002Fcomponents\u002Fkbd","en\u002F02.components\u002F78.kbd",{"title":42,"path":532,"stem":533,"section":42},"\u002Fen\u002Fcomponents\u002Flayout","en\u002F02.components\u002F79.layout",{"title":535,"path":536,"stem":537,"section":47},"Link","\u002Fen\u002Fcomponents\u002Flink","en\u002F02.components\u002F80.link",{"title":539,"path":540,"stem":541,"section":162},"List","\u002Fen\u002Fcomponents\u002Flist","en\u002F02.components\u002F81.list",{"title":543,"path":544,"stem":545,"section":95},"Listbox","\u002Fen\u002Fcomponents\u002Flistbox","en\u002F02.components\u002F82.listbox",{"title":547,"path":548,"stem":549,"section":90},"Marquee","\u002Fen\u002Fcomponents\u002Fmarquee","en\u002F02.components\u002F83.marquee",{"title":551,"path":552,"stem":553,"section":42},"Masonry","\u002Fen\u002Fcomponents\u002Fmasonry","en\u002F02.components\u002F84.masonry",{"title":555,"path":556,"stem":557,"section":95},"Mentions","\u002Fen\u002Fcomponents\u002Fmentions","en\u002F02.components\u002F85.mentions",{"title":559,"path":560,"stem":561,"section":210},"Menu","\u002Fen\u002Fcomponents\u002Fmenu","en\u002F02.components\u002F86.menu",{"title":563,"path":564,"stem":565,"section":47},"Menubar","\u002Fen\u002Fcomponents\u002Fmenubar","en\u002F02.components\u002F87.menubar",{"title":567,"path":568,"stem":569,"section":85},"Meter","\u002Fen\u002Fcomponents\u002Fmeter","en\u002F02.components\u002F88.meter",{"title":571,"path":572,"stem":573,"section":47},"Navigation Menu","\u002Fen\u002Fcomponents\u002Fnavigation-menu","en\u002F02.components\u002F89.navigation-menu",{"title":575,"path":576,"stem":577,"section":95},"Number Input","\u002Fen\u002Fcomponents\u002Fnumber-input","en\u002F02.components\u002F90.number-input",{"title":579,"path":580,"stem":581,"section":162},"Order List","\u002Fen\u002Fcomponents\u002Forder-list","en\u002F02.components\u002F91.order-list",{"title":583,"path":584,"stem":585,"section":42},"Page Header","\u002Fen\u002Fcomponents\u002Fpage-header","en\u002F02.components\u002F92.page-header",{"title":587,"path":588,"stem":589,"section":47},"Pagination","\u002Fen\u002Fcomponents\u002Fpagination","en\u002F02.components\u002F93.pagination",{"title":591,"path":592,"stem":593,"section":95},"Password Input","\u002Fen\u002Fcomponents\u002Fpassword-input","en\u002F02.components\u002F94.password-input",{"title":595,"path":596,"stem":597,"section":95},"Pin Input","\u002Fen\u002Fcomponents\u002Fpin-input","en\u002F02.components\u002F95.pin-input",{"title":599,"path":600,"stem":601,"section":210},"Popconfirm","\u002Fen\u002Fcomponents\u002Fpopconfirm","en\u002F02.components\u002F96.popconfirm",{"title":603,"path":604,"stem":605,"section":210},"Popover","\u002Fen\u002Fcomponents\u002Fpopover","en\u002F02.components\u002F97.popover",{"title":607,"path":608,"stem":609,"section":120},"Presence","\u002Fen\u002Fcomponents\u002Fpresence","en\u002F02.components\u002F98.presence",{"title":611,"path":612,"stem":613,"section":85},"Progress Group","\u002Fen\u002Fcomponents\u002Fprogress-group","en\u002F02.components\u002F99.progress-group",false,{"title":616,"icon":617,"path":618,"stem":619,"children":620,"page":614},"Reference","i-lucide-book-marked","\u002Fen\u002Freference","en\u002F03.reference",[621,624,627,630,633,636,639,642,645,648,651,654,657,660,663,666,669,672,675,678,681,684,687,690,693,696,699,702,705,708,711,714,717,720,723,726,729,732,735,738,741,744,747,750,753,756,759,762,765,768,771,774,777,780,783,786,789,792,795,798,801,804,807,810,813,816,819,822,825,828,831,834,837,840,843,846,849,852,855,858,861,864,867,870,873,876,879,882,885,888,891,894,897,900,903,906,909,912,915,918,921,924,927,930,933,936,939,942,945,948,951,954,957,960,963,966,969,972,975,978,981,984,987,990,993,996,999,1002,1005,1008,1011,1014,1017,1020,1023,1026,1029,1032,1035,1038,1041,1044],{"title":39,"path":622,"stem":623,"section":42},"\u002Fen\u002Freference\u002Faccordion","en\u002F03.reference\u002F01.accordion",{"title":44,"path":625,"stem":626,"section":47},"\u002Fen\u002Freference\u002Faffix","en\u002F03.reference\u002F02.affix",{"title":49,"path":628,"stem":629,"section":52},"\u002Fen\u002Freference\u002Fai-action","en\u002F03.reference\u002F03.ai-action",{"title":54,"path":631,"stem":632,"section":52},"\u002Fen\u002Freference\u002Fai-attachments","en\u002F03.reference\u002F04.ai-attachments",{"title":58,"path":634,"stem":635,"section":52},"\u002Fen\u002Freference\u002Fai-message","en\u002F03.reference\u002F05.ai-message",{"title":62,"path":637,"stem":638,"section":52},"\u002Fen\u002Freference\u002Fai-prompt-input","en\u002F03.reference\u002F06.ai-prompt-input",{"title":66,"path":640,"stem":641,"section":52},"\u002Fen\u002Freference\u002Fai-reasoning","en\u002F03.reference\u002F07.ai-reasoning",{"title":70,"path":643,"stem":644,"section":52},"\u002Fen\u002Freference\u002Fai-response","en\u002F03.reference\u002F08.ai-response",{"title":74,"path":646,"stem":647,"section":52},"\u002Fen\u002Freference\u002Fai-source","en\u002F03.reference\u002F09.ai-source",{"title":78,"path":649,"stem":650,"section":52},"\u002Fen\u002Freference\u002Fai-suggestion","en\u002F03.reference\u002F10.ai-suggestion",{"title":82,"path":652,"stem":653,"section":85},"\u002Fen\u002Freference\u002Fprogress","en\u002F03.reference\u002F100.progress",{"title":87,"path":655,"stem":656,"section":90},"\u002Fen\u002Freference\u002Fqr-code","en\u002F03.reference\u002F101.qr-code",{"title":92,"path":658,"stem":659,"section":95},"\u002Fen\u002Freference\u002Fradio-group","en\u002F03.reference\u002F102.radio-group",{"title":97,"path":661,"stem":662,"section":95},"\u002Fen\u002Freference\u002Frating-group","en\u002F03.reference\u002F103.rating-group",{"title":101,"path":664,"stem":665,"section":85},"\u002Fen\u002Freference\u002Fresult","en\u002F03.reference\u002F104.result",{"title":105,"path":667,"stem":668,"section":42},"\u002Fen\u002Freference\u002Fscroll-area","en\u002F03.reference\u002F105.scroll-area",{"title":109,"path":670,"stem":671,"section":95},"\u002Fen\u002Freference\u002Fsegment-group","en\u002F03.reference\u002F106.segment-group",{"title":113,"path":673,"stem":674,"section":95},"\u002Fen\u002Freference\u002Fselect","en\u002F03.reference\u002F107.select",{"title":117,"path":676,"stem":677,"section":120},"\u002Fen\u002Freference\u002Fseparator","en\u002F03.reference\u002F108.separator",{"title":122,"path":679,"stem":680,"section":95},"\u002Fen\u002Freference\u002Fsignature-pad","en\u002F03.reference\u002F109.signature-pad",{"title":126,"path":682,"stem":683,"section":52},"\u002Fen\u002Freference\u002Fai-tool","en\u002F03.reference\u002F11.ai-tool",{"title":130,"path":685,"stem":686,"section":85},"\u002Fen\u002Freference\u002Fskeleton","en\u002F03.reference\u002F110.skeleton",{"title":134,"path":688,"stem":689,"section":95},"\u002Fen\u002Freference\u002Fslider","en\u002F03.reference\u002F111.slider",{"title":138,"path":691,"stem":692,"section":85},"\u002Fen\u002Freference\u002Fspinner","en\u002F03.reference\u002F112.spinner",{"title":142,"path":694,"stem":695,"section":145},"\u002Fen\u002Freference\u002Fsplit-button","en\u002F03.reference\u002F113.split-button",{"title":147,"path":697,"stem":698,"section":42},"\u002Fen\u002Freference\u002Fsplitter","en\u002F03.reference\u002F114.splitter",{"title":151,"path":700,"stem":701,"section":42},"\u002Fen\u002Freference\u002Fspotlight","en\u002F03.reference\u002F115.spotlight",{"title":155,"path":703,"stem":704,"section":42},"\u002Fen\u002Freference\u002Fstack","en\u002F03.reference\u002F116.stack",{"title":159,"path":706,"stem":707,"section":162},"\u002Fen\u002Freference\u002Fstat","en\u002F03.reference\u002F117.stat",{"title":164,"path":709,"stem":710,"section":47},"\u002Fen\u002Freference\u002Fsteps","en\u002F03.reference\u002F118.steps",{"title":168,"path":712,"stem":713,"section":145},"\u002Fen\u002Freference\u002Fswap","en\u002F03.reference\u002F119.swap",{"title":52,"path":715,"stem":716,"section":52},"\u002Fen\u002Freference\u002Fai","en\u002F03.reference\u002F12.ai",{"title":175,"path":718,"stem":719,"section":95},"\u002Fen\u002Freference\u002Fswitch","en\u002F03.reference\u002F120.switch",{"title":179,"path":721,"stem":722,"section":162},"\u002Fen\u002Freference\u002Ftable","en\u002F03.reference\u002F121.table",{"title":183,"path":724,"stem":725,"section":47},"\u002Fen\u002Freference\u002Ftabs","en\u002F03.reference\u002F122.tabs",{"title":187,"path":727,"stem":728,"section":95},"\u002Fen\u002Freference\u002Ftags-input","en\u002F03.reference\u002F123.tags-input",{"title":191,"path":730,"stem":731,"section":162},"\u002Fen\u002Freference\u002Fterminal","en\u002F03.reference\u002F124.terminal",{"title":195,"path":733,"stem":734,"section":95},"\u002Fen\u002Freference\u002Ftextarea","en\u002F03.reference\u002F125.textarea",{"title":199,"path":736,"stem":737,"section":162},"\u002Fen\u002Freference\u002Ftimeline","en\u002F03.reference\u002F126.timeline",{"title":203,"path":739,"stem":740,"section":162},"\u002Fen\u002Freference\u002Ftimer","en\u002F03.reference\u002F127.timer",{"title":207,"path":742,"stem":743,"section":210},"\u002Fen\u002Freference\u002Ftoast","en\u002F03.reference\u002F128.toast",{"title":212,"path":745,"stem":746,"section":47},"\u002Fen\u002Freference\u002Ftoc","en\u002F03.reference\u002F129.toc",{"title":216,"path":748,"stem":749,"section":85},"\u002Fen\u002Freference\u002Falert","en\u002F03.reference\u002F13.alert",{"title":220,"path":751,"stem":752,"section":145},"\u002Fen\u002Freference\u002Ftoggle-group","en\u002F03.reference\u002F130.toggle-group",{"title":224,"path":754,"stem":755,"section":145},"\u002Fen\u002Freference\u002Ftoggle","en\u002F03.reference\u002F131.toggle",{"title":228,"path":757,"stem":758,"section":145},"\u002Fen\u002Freference\u002Ftoolbar","en\u002F03.reference\u002F132.toolbar",{"title":232,"path":760,"stem":761,"section":210},"\u002Fen\u002Freference\u002Ftooltip","en\u002F03.reference\u002F133.tooltip",{"title":236,"path":763,"stem":764,"section":210},"\u002Fen\u002Freference\u002Ftour","en\u002F03.reference\u002F134.tour",{"title":240,"path":766,"stem":767,"section":162},"\u002Fen\u002Freference\u002Ftransfer","en\u002F03.reference\u002F135.transfer",{"title":244,"path":769,"stem":770,"section":95},"\u002Fen\u002Freference\u002Ftree-select","en\u002F03.reference\u002F136.tree-select",{"title":248,"path":772,"stem":773,"section":162},"\u002Fen\u002Freference\u002Ftree-view","en\u002F03.reference\u002F137.tree-view",{"title":252,"path":775,"stem":776,"section":42},"\u002Fen\u002Freference\u002Ftypography","en\u002F03.reference\u002F138.typography",{"title":256,"path":778,"stem":779,"section":120},"\u002Fen\u002Freference\u002Fuser","en\u002F03.reference\u002F139.user",{"title":260,"path":781,"stem":782,"section":95},"\u002Fen\u002Freference\u002Fangle-slider","en\u002F03.reference\u002F14.angle-slider",{"title":264,"path":784,"stem":785,"section":162},"\u002Fen\u002Freference\u002Fvirtual-list","en\u002F03.reference\u002F140.virtual-list",{"title":268,"path":787,"stem":788,"section":90},"\u002Fen\u002Freference\u002Fwatermark","en\u002F03.reference\u002F141.watermark",{"title":272,"path":790,"stem":791,"section":162},"\u002Fen\u002Freference\u002Fworkflow","en\u002F03.reference\u002F142.workflow",{"title":276,"path":793,"stem":794,"section":42},"\u002Fen\u002Freference\u002Faspect-ratio","en\u002F03.reference\u002F15.aspect-ratio",{"title":280,"path":796,"stem":797,"section":95},"\u002Fen\u002Freference\u002Fautocomplete","en\u002F03.reference\u002F16.autocomplete",{"title":284,"path":799,"stem":800,"section":120},"\u002Fen\u002Freference\u002Favatar-group","en\u002F03.reference\u002F17.avatar-group",{"title":288,"path":802,"stem":803,"section":120},"\u002Fen\u002Freference\u002Favatar","en\u002F03.reference\u002F18.avatar",{"title":292,"path":805,"stem":806,"section":47},"\u002Fen\u002Freference\u002Fback-top","en\u002F03.reference\u002F19.back-top",{"title":296,"path":808,"stem":809,"section":120},"\u002Fen\u002Freference\u002Fbadge","en\u002F03.reference\u002F20.badge",{"title":300,"path":811,"stem":812,"section":85},"\u002Fen\u002Freference\u002Fbanner","en\u002F03.reference\u002F21.banner",{"title":304,"path":814,"stem":815,"section":42},"\u002Fen\u002Freference\u002Fbento","en\u002F03.reference\u002F22.bento",{"title":308,"path":817,"stem":818,"section":85},"\u002Fen\u002Freference\u002Fblock-ui","en\u002F03.reference\u002F23.block-ui",{"title":312,"path":820,"stem":821,"section":47},"\u002Fen\u002Freference\u002Fbreadcrumb","en\u002F03.reference\u002F24.breadcrumb",{"title":316,"path":823,"stem":824,"section":90},"\u002Fen\u002Freference\u002Fbrowser","en\u002F03.reference\u002F25.browser",{"title":320,"path":826,"stem":827,"section":120},"\u002Fen\u002Freference\u002Fbutton-group","en\u002F03.reference\u002F26.button-group",{"title":324,"path":829,"stem":830,"section":120},"\u002Fen\u002Freference\u002Fbutton","en\u002F03.reference\u002F27.button",{"title":328,"path":832,"stem":833,"section":95},"\u002Fen\u002Freference\u002Fcalendar","en\u002F03.reference\u002F28.calendar",{"title":332,"path":835,"stem":836,"section":120},"\u002Fen\u002Freference\u002Fcard","en\u002F03.reference\u002F29.card",{"title":336,"path":838,"stem":839,"section":90},"\u002Fen\u002Freference\u002Fcarousel","en\u002F03.reference\u002F30.carousel",{"title":340,"path":841,"stem":842,"section":95},"\u002Fen\u002Freference\u002Fcascade-select","en\u002F03.reference\u002F31.cascade-select",{"title":344,"path":844,"stem":845,"section":162},"\u002Fen\u002Freference\u002Fchart","en\u002F03.reference\u002F32.chart",{"title":348,"path":847,"stem":848,"section":95},"\u002Fen\u002Freference\u002Fcheckbox-group","en\u002F03.reference\u002F33.checkbox-group",{"title":352,"path":850,"stem":851,"section":95},"\u002Fen\u002Freference\u002Fcheckbox","en\u002F03.reference\u002F34.checkbox",{"title":356,"path":853,"stem":854,"section":120},"\u002Fen\u002Freference\u002Fchip","en\u002F03.reference\u002F35.chip",{"title":360,"path":856,"stem":857,"section":120},"\u002Fen\u002Freference\u002Fclient-only","en\u002F03.reference\u002F36.client-only",{"title":364,"path":859,"stem":860,"section":145},"\u002Fen\u002Freference\u002Fclipboard","en\u002F03.reference\u002F37.clipboard",{"title":368,"path":862,"stem":863,"section":42},"\u002Fen\u002Freference\u002Fcollapsible","en\u002F03.reference\u002F38.collapsible",{"title":372,"path":865,"stem":866,"section":162},"\u002Fen\u002Freference\u002Fcollection","en\u002F03.reference\u002F39.collection",{"title":376,"path":868,"stem":869,"section":95},"\u002Fen\u002Freference\u002Fcolor-picker","en\u002F03.reference\u002F40.color-picker",{"title":380,"path":871,"stem":872,"section":95},"\u002Fen\u002Freference\u002Fcombobox","en\u002F03.reference\u002F41.combobox",{"title":384,"path":874,"stem":875,"section":210},"\u002Fen\u002Freference\u002Fcommand","en\u002F03.reference\u002F42.command",{"title":388,"path":877,"stem":878,"section":162},"\u002Fen\u002Freference\u002Fcomment","en\u002F03.reference\u002F43.comment",{"title":392,"path":880,"stem":881,"section":120},"\u002Fen\u002Freference\u002Fconfig-provider","en\u002F03.reference\u002F44.config-provider",{"title":396,"path":883,"stem":884,"section":42},"\u002Fen\u002Freference\u002Fcontainer","en\u002F03.reference\u002F45.container",{"title":400,"path":886,"stem":887,"section":162},"\u002Fen\u002Freference\u002Fdata-view","en\u002F03.reference\u002F46.data-view",{"title":404,"path":889,"stem":890,"section":95},"\u002Fen\u002Freference\u002Fdate-input","en\u002F03.reference\u002F47.date-input",{"title":408,"path":892,"stem":893,"section":95},"\u002Fen\u002Freference\u002Fdate-picker","en\u002F03.reference\u002F48.date-picker",{"title":412,"path":895,"stem":896,"section":120},"\u002Fen\u002Freference\u002Fdeferred-content","en\u002F03.reference\u002F49.deferred-content",{"title":416,"path":898,"stem":899,"section":162},"\u002Fen\u002Freference\u002Fdescriptions","en\u002F03.reference\u002F50.descriptions",{"title":420,"path":901,"stem":902,"section":210},"\u002Fen\u002Freference\u002Fdialog","en\u002F03.reference\u002F51.dialog",{"title":424,"path":904,"stem":905,"section":145},"\u002Fen\u002Freference\u002Fdock","en\u002F03.reference\u002F52.dock",{"title":428,"path":907,"stem":908,"section":145},"\u002Fen\u002Freference\u002Fdownload-trigger","en\u002F03.reference\u002F53.download-trigger",{"title":432,"path":910,"stem":911,"section":210},"\u002Fen\u002Freference\u002Fdrawer","en\u002F03.reference\u002F54.drawer",{"title":436,"path":913,"stem":914,"section":95},"\u002Fen\u002Freference\u002Fdynamic-input","en\u002F03.reference\u002F55.dynamic-input",{"title":440,"path":916,"stem":917,"section":95},"\u002Fen\u002Freference\u002Feditable","en\u002F03.reference\u002F56.editable",{"title":444,"path":919,"stem":920,"section":42},"\u002Fen\u002Freference\u002Fellipsis","en\u002F03.reference\u002F57.ellipsis",{"title":448,"path":922,"stem":923,"section":85},"\u002Fen\u002Freference\u002Fempty","en\u002F03.reference\u002F58.empty",{"title":452,"path":925,"stem":926,"section":95},"\u002Fen\u002Freference\u002Ffield","en\u002F03.reference\u002F59.field",{"title":456,"path":928,"stem":929,"section":95},"\u002Fen\u002Freference\u002Ffieldset","en\u002F03.reference\u002F60.fieldset",{"title":460,"path":931,"stem":932,"section":95},"\u002Fen\u002Freference\u002Ffile-upload","en\u002F03.reference\u002F61.file-upload",{"title":464,"path":934,"stem":935,"section":145},"\u002Fen\u002Freference\u002Ffloat-button","en\u002F03.reference\u002F62.float-button",{"title":468,"path":937,"stem":938,"section":210},"\u002Fen\u002Freference\u002Ffloating-panel","en\u002F03.reference\u002F63.floating-panel",{"title":472,"path":940,"stem":941,"section":210},"\u002Fen\u002Freference\u002Ffocus-trap","en\u002F03.reference\u002F64.focus-trap",{"title":476,"path":943,"stem":944,"section":95},"\u002Fen\u002Freference\u002Fform","en\u002F03.reference\u002F65.form",{"title":480,"path":946,"stem":947,"section":120},"\u002Fen\u002Freference\u002Fformat","en\u002F03.reference\u002F66.format",{"title":484,"path":949,"stem":950,"section":42},"\u002Fen\u002Freference\u002Fframe","en\u002F03.reference\u002F67.frame",{"title":488,"path":952,"stem":953,"section":42},"\u002Fen\u002Freference\u002Fgrid","en\u002F03.reference\u002F68.grid",{"title":492,"path":955,"stem":956,"section":120},"\u002Fen\u002Freference\u002Fhighlight","en\u002F03.reference\u002F69.highlight",{"title":496,"path":958,"stem":959,"section":210},"\u002Fen\u002Freference\u002Fhover-card","en\u002F03.reference\u002F70.hover-card",{"title":500,"path":961,"stem":962,"section":120},"\u002Fen\u002Freference\u002Ficon","en\u002F03.reference\u002F71.icon",{"title":504,"path":964,"stem":965,"section":90},"\u002Fen\u002Freference\u002Fimage-cropper","en\u002F03.reference\u002F72.image-cropper",{"title":508,"path":967,"stem":968,"section":90},"\u002Fen\u002Freference\u002Fimage-viewer","en\u002F03.reference\u002F73.image-viewer",{"title":512,"path":970,"stem":971,"section":90},"\u002Fen\u002Freference\u002Fimage","en\u002F03.reference\u002F74.image",{"title":516,"path":973,"stem":974,"section":95},"\u002Fen\u002Freference\u002Finput-group","en\u002F03.reference\u002F75.input-group",{"title":520,"path":976,"stem":977,"section":95},"\u002Fen\u002Freference\u002Finput","en\u002F03.reference\u002F76.input",{"title":524,"path":979,"stem":980,"section":162},"\u002Fen\u002Freference\u002Fjson-tree-view","en\u002F03.reference\u002F77.json-tree-view",{"title":528,"path":982,"stem":983,"section":120},"\u002Fen\u002Freference\u002Fkbd","en\u002F03.reference\u002F78.kbd",{"title":42,"path":985,"stem":986,"section":42},"\u002Fen\u002Freference\u002Flayout","en\u002F03.reference\u002F79.layout",{"title":535,"path":988,"stem":989,"section":47},"\u002Fen\u002Freference\u002Flink","en\u002F03.reference\u002F80.link",{"title":539,"path":991,"stem":992,"section":162},"\u002Fen\u002Freference\u002Flist","en\u002F03.reference\u002F81.list",{"title":543,"path":994,"stem":995,"section":95},"\u002Fen\u002Freference\u002Flistbox","en\u002F03.reference\u002F82.listbox",{"title":547,"path":997,"stem":998,"section":90},"\u002Fen\u002Freference\u002Fmarquee","en\u002F03.reference\u002F83.marquee",{"title":551,"path":1000,"stem":1001,"section":42},"\u002Fen\u002Freference\u002Fmasonry","en\u002F03.reference\u002F84.masonry",{"title":555,"path":1003,"stem":1004,"section":95},"\u002Fen\u002Freference\u002Fmentions","en\u002F03.reference\u002F85.mentions",{"title":559,"path":1006,"stem":1007,"section":210},"\u002Fen\u002Freference\u002Fmenu","en\u002F03.reference\u002F86.menu",{"title":563,"path":1009,"stem":1010,"section":47},"\u002Fen\u002Freference\u002Fmenubar","en\u002F03.reference\u002F87.menubar",{"title":567,"path":1012,"stem":1013,"section":85},"\u002Fen\u002Freference\u002Fmeter","en\u002F03.reference\u002F88.meter",{"title":571,"path":1015,"stem":1016,"section":47},"\u002Fen\u002Freference\u002Fnavigation-menu","en\u002F03.reference\u002F89.navigation-menu",{"title":575,"path":1018,"stem":1019,"section":95},"\u002Fen\u002Freference\u002Fnumber-input","en\u002F03.reference\u002F90.number-input",{"title":579,"path":1021,"stem":1022,"section":162},"\u002Fen\u002Freference\u002Forder-list","en\u002F03.reference\u002F91.order-list",{"title":583,"path":1024,"stem":1025,"section":42},"\u002Fen\u002Freference\u002Fpage-header","en\u002F03.reference\u002F92.page-header",{"title":587,"path":1027,"stem":1028,"section":47},"\u002Fen\u002Freference\u002Fpagination","en\u002F03.reference\u002F93.pagination",{"title":591,"path":1030,"stem":1031,"section":95},"\u002Fen\u002Freference\u002Fpassword-input","en\u002F03.reference\u002F94.password-input",{"title":595,"path":1033,"stem":1034,"section":95},"\u002Fen\u002Freference\u002Fpin-input","en\u002F03.reference\u002F95.pin-input",{"title":599,"path":1036,"stem":1037,"section":210},"\u002Fen\u002Freference\u002Fpopconfirm","en\u002F03.reference\u002F96.popconfirm",{"title":603,"path":1039,"stem":1040,"section":210},"\u002Fen\u002Freference\u002Fpopover","en\u002F03.reference\u002F97.popover",{"title":607,"path":1042,"stem":1043,"section":120},"\u002Fen\u002Freference\u002Fpresence","en\u002F03.reference\u002F98.presence",{"title":611,"path":1045,"stem":1046,"section":85},"\u002Fen\u002Freference\u002Fprogress-group","en\u002F03.reference\u002F99.progress-group",{"id":1048,"title":476,"body":1049,"description":1288,"extension":1289,"meta":1290,"navigation":1291,"path":477,"seo":1292,"stem":478,"__hash__":1293},"docs_en\u002Fen\u002F02.components\u002F65.form.md",{"type":1050,"value":1051,"toc":1278},"minimark",[1052,1057,1061,1064,1067,1071,1075,1079,1129,1133,1136],[1053,1054,1056],"h2",{"id":1055},"basic-usage","Basic usage",[1058,1059],"component-demo",{"name":1060},"form\u002Fbasic",[1058,1062],{"name":1063},"form\u002Fcustom-validation",[1058,1065],{"name":1066},"form\u002Finputs",[1053,1068,1070],{"id":1069},"props","Props",[1072,1073,476],"h3",{"id":1074},"form",[1076,1077,1078],"p",{},"The form element itself: native submit interception handing the event\nto the engine, one grid, one spacing voice.",[1080,1081,1082,1101],"table",{},[1083,1084,1085],"thead",{},[1086,1087,1088,1092,1095,1098],"tr",{},[1089,1090,1091],"th",{},"Prop",[1089,1093,1094],{},"Type",[1089,1096,1097],{},"Default",[1089,1099,1100],{},"Description",[1102,1103,1104],"tbody",{},[1086,1105,1106,1112,1117,1122],{},[1107,1108,1109],"td",{},[1110,1111,1074],"code",{},[1107,1113,1114],{},[1110,1115,1116],{},"Object as PropType\u003CAnyFormApi>",[1107,1118,1119],{},[1110,1120,1121],{},"undefined",[1107,1123,1124,1125,1128],{},"The engine instance from ",[1110,1126,1127],{},"useForm"," — values, validation and submit all live there. Optional: a form assembled without an engine (the generative vessel) degrades to layout and native semantics.",[1072,1130,1132],{"id":1131},"formfield","FormField",[1076,1134,1135],{},"The named slot in the grid: label, control, hint — and the engine's\nerrors for this name, shown through the same parts the standalone\nField family styles. The default slot receives the engine's live\nfield (value, handleChange, handleBlur, full state), so every\ncapability it has is right there where the control is wired.",[1080,1137,1138,1150],{},[1083,1139,1140],{},[1086,1141,1142,1144,1146,1148],{},[1089,1143,1091],{},[1089,1145,1094],{},[1089,1147,1097],{},[1089,1149,1100],{},[1102,1151,1152,1169,1186,1204,1222,1242,1260],{},[1086,1153,1154,1158,1162,1166],{},[1107,1155,1156],{},[1110,1157,1074],{},[1107,1159,1160],{},[1110,1161,1116],{},[1107,1163,1164],{},[1110,1165,1121],{},[1107,1167,1168],{},"Overrides the enclosing Form's engine — for a field assembled on its own.",[1086,1170,1171,1176,1181,1183],{},[1107,1172,1173],{},[1110,1174,1175],{},"name",[1107,1177,1178],{},[1110,1179,1180],{},"String",[1107,1182],{},[1107,1184,1185],{},"The engine's key for this slot's value and errors.",[1086,1187,1188,1193,1197,1201],{},[1107,1189,1190],{},[1110,1191,1192],{},"label",[1107,1194,1195],{},[1110,1196,1180],{},[1107,1198,1199],{},[1110,1200,1121],{},[1107,1202,1203],{},"The heading above the control.",[1086,1205,1206,1211,1215,1219],{},[1107,1207,1208],{},[1110,1209,1210],{},"hint",[1107,1212,1213],{},[1110,1214,1180],{},[1107,1216,1217],{},[1110,1218,1121],{},[1107,1220,1221],{},"The quiet line under the control, shown while there is no error.",[1086,1223,1224,1229,1234,1239],{},[1107,1225,1226],{},[1110,1227,1228],{},"required",[1107,1230,1231],{},[1110,1232,1233],{},"Boolean",[1107,1235,1236],{},[1110,1237,1238],{},"false",[1107,1240,1241],{},"Marks the label with the required ornament.",[1086,1243,1244,1249,1253,1257],{},[1107,1245,1246],{},[1110,1247,1248],{},"invalid",[1107,1250,1251],{},[1110,1252,1233],{},[1107,1254,1255],{},[1110,1256,1238],{},[1107,1258,1259],{},"Forces the invalid dress, outside any engine's verdict.",[1086,1261,1262,1267,1271,1275],{},[1107,1263,1264],{},[1110,1265,1266],{},"disabled",[1107,1268,1269],{},[1110,1270,1233],{},[1107,1272,1273],{},[1110,1274,1238],{},[1107,1276,1277],{},"Mutes the slot.",{"title":1279,"searchDepth":1280,"depth":1280,"links":1281},"",2,[1282,1283],{"id":1055,"depth":1280,"text":1056},{"id":1069,"depth":1280,"text":1070,"children":1284},[1285,1287],{"id":1074,"depth":1286,"text":476},3,{"id":1131,"depth":1286,"text":1132},"The form element itself: native submit interception handing the event to the engine, one grid, one spacing voice.","md",{},{"section":95},{"title":476,"description":1288},"fqX2Gvj-mchydVzvFVQDFjTJ_3XUZK3tCTPacbaFrc0",[1295,1297],{"title":472,"path":473,"stem":474,"description":1296,"section":210,"children":-1},"Trap focus within a subtree — for containers that live outside the dialog machine but still owe the keyboard a boundary. Headless, like the rest of Ark's utilities.",{"title":480,"path":481,"stem":482,"description":1298,"section":120,"children":-1},"Format, dressed in the paper-and-ink system: Intl formatting for numbers, currency, bytes and relative time. The parts — Number, Byte, Time, RelativeTime.","\u003Cpre class=\"th-code th-code--vue\" data-language=\"vue\">\u003Ccode><\u003Cspan class=\"th-token th-tag\">script\u003C\u002Fspan> setup \u003Cspan class=\"th-token th-attr\">lang\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"ts"\u003C\u002Fspan>>\n\u003Cspan class=\"th-token th-keyword\">import\u003C\u002Fspan> { \u003Cspan class=\"th-token th-type\">Button\u003C\u002Fspan>, \u003Cspan class=\"th-token th-type\">Form\u003C\u002Fspan>, \u003Cspan class=\"th-token th-type\">FormField\u003C\u002Fspan>, \u003Cspan class=\"th-token th-type\">Input\u003C\u002Fspan>, \u003Cspan class=\"th-token th-type\">Textarea\u003C\u002Fspan>, useForm } \u003Cspan class=\"th-token th-keyword\">from\u003C\u002Fspan> \u003Cspan class=\"th-token th-string\">"@bysages\u002Fvue"\u003C\u002Fspan>;\n\u003Cspan class=\"th-token th-keyword\">import\u003C\u002Fspan> { ref } \u003Cspan class=\"th-token th-keyword\">from\u003C\u002Fspan> \u003Cspan class=\"th-token th-string\">"vue"\u003C\u002Fspan>;\n\u003Cspan class=\"th-token th-keyword\">import\u003C\u002Fspan> { z } \u003Cspan class=\"th-token th-keyword\">from\u003C\u002Fspan> \u003Cspan class=\"th-token th-string\">"zod"\u003C\u002Fspan>;\n\n\u003Cspan class=\"th-token th-keyword\">const\u003C\u002Fspan> status = \u003Cspan class=\"th-token th-function\">ref\u003C\u002Fspan>(\u003Cspan class=\"th-token th-string\">""\u003C\u002Fspan>);\n\n\u003Cspan class=\"th-token th-keyword\">const\u003C\u002Fspan> form = \u003Cspan class=\"th-token th-function\">useForm\u003C\u002Fspan>({\n  \u003Cspan class=\"th-token th-property\">defaultValues\u003C\u002Fspan>: { \u003Cspan class=\"th-token th-property\">title\u003C\u002Fspan>: \u003Cspan class=\"th-token th-string\">""\u003C\u002Fspan>, \u003Cspan class=\"th-token th-property\">abstract\u003C\u002Fspan>: \u003Cspan class=\"th-token th-string\">""\u003C\u002Fspan> },\n  \u003Cspan class=\"th-token th-property\">validators\u003C\u002Fspan>: {\n    \u003Cspan class=\"th-token th-property\">onChange\u003C\u002Fspan>: z.\u003Cspan class=\"th-token th-property\">object\u003C\u002Fspan>({\n      \u003Cspan class=\"th-token th-property\">title\u003C\u002Fspan>: z.\u003Cspan class=\"th-token th-property\">string\u003C\u002Fspan>().\u003Cspan class=\"th-token th-property\">min\u003C\u002Fspan>(\u003Cspan class=\"th-token th-number\">1\u003C\u002Fspan>, \u003Cspan class=\"th-token th-string\">"The title is required."\u003C\u002Fspan>),\n      \u003Cspan class=\"th-token th-property\">abstract\u003C\u002Fspan>: z.\u003Cspan class=\"th-token th-property\">string\u003C\u002Fspan>().\u003Cspan class=\"th-token th-property\">min\u003C\u002Fspan>(\u003Cspan class=\"th-token th-number\">8\u003C\u002Fspan>, \u003Cspan class=\"th-token th-string\">"Write at least 8 characters."\u003C\u002Fspan>),\n    }),\n  },\n  \u003Cspan class=\"th-token th-property\">onSubmit\u003C\u002Fspan>: () => {\n    status.\u003Cspan class=\"th-token th-property\">value\u003C\u002Fspan> = \u003Cspan class=\"th-token th-string\">"Submitted."\u003C\u002Fspan>;\n  },\n});\n<\u002F\u003Cspan class=\"th-token th-tag\">script\u003C\u002Fspan>>\n\n<\u003Cspan class=\"th-token th-tag\">template\u003C\u002Fspan>>\n  <\u003Cspan class=\"th-token th-tag\">Form\u003C\u002Fspan> \u003Cspan class=\"th-token th-attr\">:form\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"form"\u003C\u002Fspan> \u003Cspan class=\"th-token th-attr\">class\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"w-full"\u003C\u002Fspan>>\n    <\u003Cspan class=\"th-token th-tag\">FormField\u003C\u002Fspan> \u003Cspan class=\"th-token th-attr\">name\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"title"\u003C\u002Fspan> \u003Cspan class=\"th-token th-attr\">label\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"Title"\u003C\u002Fspan> \u003Cspan class=\"th-token th-attr\">hint\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"One line, no period"\u003C\u002Fspan> required>\n      <\u003Cspan class=\"th-token th-tag\">template\u003C\u002Fspan> #default=\u003Cspan class=\"th-token th-string\">"{ field }"\u003C\u002Fspan>>\n        <\u003Cspan class=\"th-token th-tag\">Input\u003C\u002Fspan>\n          \u003Cspan class=\"th-token th-attr\">:model-value\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"field.state.value"\u003C\u002Fspan>\n          \u003Cspan class=\"th-token th-attr\">placeholder\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"Title of the piece"\u003C\u002Fspan>\n          \u003Cspan class=\"th-token th-attr\">@update:model-value\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"field.handleChange"\u003C\u002Fspan>\n          \u003Cspan class=\"th-token th-attr\">@blur\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"field.handleBlur"\u003C\u002Fspan>\n        \u002F>\n      <\u002F\u003Cspan class=\"th-token th-tag\">template\u003C\u002Fspan>>\n    <\u002F\u003Cspan class=\"th-token th-tag\">FormField\u003C\u002Fspan>>\n    <\u003Cspan class=\"th-token th-tag\">FormField\u003C\u002Fspan> \u003Cspan class=\"th-token th-attr\">name\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"abstract"\u003C\u002Fspan> \u003Cspan class=\"th-token th-attr\">label\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"Abstract"\u003C\u002Fspan>>\n      <\u003Cspan class=\"th-token th-tag\">template\u003C\u002Fspan> #default=\u003Cspan class=\"th-token th-string\">"{ field }"\u003C\u002Fspan>>\n        <\u003Cspan class=\"th-token th-tag\">Textarea\u003C\u002Fspan>\n          \u003Cspan class=\"th-token th-attr\">:model-value\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"field.state.value"\u003C\u002Fspan>\n          \u003Cspan class=\"th-token th-attr\">placeholder\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"What the piece says"\u003C\u002Fspan>\n          \u003Cspan class=\"th-token th-attr\">@update:model-value\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"field.handleChange"\u003C\u002Fspan>\n          \u003Cspan class=\"th-token th-attr\">@blur\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"field.handleBlur"\u003C\u002Fspan>\n        \u002F>\n      <\u002F\u003Cspan class=\"th-token th-tag\">template\u003C\u002Fspan>>\n    <\u002F\u003Cspan class=\"th-token th-tag\">FormField\u003C\u002Fspan>>\n    <\u003Cspan class=\"th-token th-tag\">Button\u003C\u002Fspan> \u003Cspan class=\"th-token th-attr\">type\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"submit"\u003C\u002Fspan>>Submit<\u002F\u003Cspan class=\"th-token th-tag\">Button\u003C\u002Fspan>>\n  <\u002F\u003Cspan class=\"th-token th-tag\">Form\u003C\u002Fspan>>\n  <\u003Cspan class=\"th-token th-tag\">p\u003C\u002Fspan> \u003Cspan class=\"th-token th-attr\">role\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"status"\u003C\u002Fspan> \u003Cspan class=\"th-token th-attr\">class\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"mt-3 text-sm text-tertiary"\u003C\u002Fspan>>\n    {{ status }}\n  <\u002F\u003Cspan class=\"th-token th-tag\">p\u003C\u002Fspan>>\n<\u002F\u003Cspan class=\"th-token th-tag\">template\u003C\u002Fspan>>\n\u003C\u002Fcode>\u003C\u002Fpre>","\u003Cpre class=\"th-code th-code--vue\" data-language=\"vue\">\u003Ccode><\u003Cspan class=\"th-token th-tag\">script\u003C\u002Fspan> setup \u003Cspan class=\"th-token th-attr\">lang\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"ts"\u003C\u002Fspan>>\n\u003Cspan class=\"th-token th-keyword\">import\u003C\u002Fspan> { \u003Cspan class=\"th-token th-type\">Button\u003C\u002Fspan>, \u003Cspan class=\"th-token th-type\">Form\u003C\u002Fspan>, \u003Cspan class=\"th-token th-type\">FormField\u003C\u002Fspan>, \u003Cspan class=\"th-token th-type\">Input\u003C\u002Fspan>, \u003Cspan class=\"th-token th-type\">Textarea\u003C\u002Fspan>, useForm } \u003Cspan class=\"th-token th-keyword\">from\u003C\u002Fspan> \u003Cspan class=\"th-token th-string\">"@bysages\u002Fvue"\u003C\u002Fspan>;\n\u003Cspan class=\"th-token th-keyword\">import\u003C\u002Fspan> { ref } \u003Cspan class=\"th-token th-keyword\">from\u003C\u002Fspan> \u003Cspan class=\"th-token th-string\">"vue"\u003C\u002Fspan>;\n\n\u003Cspan class=\"th-token th-keyword\">const\u003C\u002Fspan> status = \u003Cspan class=\"th-token th-function\">ref\u003C\u002Fspan>(\u003Cspan class=\"th-token th-string\">""\u003C\u002Fspan>);\n\n\u003Cspan class=\"th-token th-keyword\">const\u003C\u002Fspan> form = \u003Cspan class=\"th-token th-function\">useForm\u003C\u002Fspan>({\n  \u003Cspan class=\"th-token th-property\">defaultValues\u003C\u002Fspan>: { \u003Cspan class=\"th-token th-property\">title\u003C\u002Fspan>: \u003Cspan class=\"th-token th-string\">""\u003C\u002Fspan>, \u003Cspan class=\"th-token th-property\">abstract\u003C\u002Fspan>: \u003Cspan class=\"th-token th-string\">""\u003C\u002Fspan> },\n  \u003Cspan class=\"th-token th-property\">onSubmit\u003C\u002Fspan>: () => {\n    status.\u003Cspan class=\"th-token th-property\">value\u003C\u002Fspan> = \u003Cspan class=\"th-token th-string\">"Submitted."\u003C\u002Fspan>;\n  },\n});\n\n\u003Cspan class=\"th-token th-keyword\">const\u003C\u002Fspan> titleValidators = {\n  \u003Cspan class=\"th-token th-property\">onChange\u003C\u002Fspan>: ({ value }: { \u003Cspan class=\"th-token th-property\">value\u003C\u002Fspan>: \u003Cspan class=\"th-token th-type\">string\u003C\u002Fspan> }) => (value ? \u003Cspan class=\"th-token th-literal\">undefined\u003C\u002Fspan> : \u003Cspan class=\"th-token th-string\">"Title is required"\u003C\u002Fspan>),\n};\n\n\u003Cspan class=\"th-token th-keyword\">const\u003C\u002Fspan> abstractValidators = {\n  \u003Cspan class=\"th-token th-property\">onChange\u003C\u002Fspan>: ({ value }: { \u003Cspan class=\"th-token th-property\">value\u003C\u002Fspan>: \u003Cspan class=\"th-token th-type\">string\u003C\u002Fspan> }) => {\n    \u003Cspan class=\"th-token th-keyword\">if\u003C\u002Fspan> (!value) \u003Cspan class=\"th-token th-keyword\">return\u003C\u002Fspan> \u003Cspan class=\"th-token th-string\">"The abstract is required"\u003C\u002Fspan>;\n    \u003Cspan class=\"th-token th-keyword\">if\u003C\u002Fspan> (value.\u003Cspan class=\"th-token th-property\">length\u003C\u002Fspan> < \u003Cspan class=\"th-token th-number\">8\u003C\u002Fspan>) \u003Cspan class=\"th-token th-keyword\">return\u003C\u002Fspan> \u003Cspan class=\"th-token th-string\">"At least 8 characters"\u003C\u002Fspan>;\n    \u003Cspan class=\"th-token th-keyword\">return\u003C\u002Fspan> \u003Cspan class=\"th-token th-literal\">undefined\u003C\u002Fspan>;\n  },\n};\n<\u002F\u003Cspan class=\"th-token th-tag\">script\u003C\u002Fspan>>\n\n<\u003Cspan class=\"th-token th-tag\">template\u003C\u002Fspan>>\n  <\u003Cspan class=\"th-token th-tag\">Form\u003C\u002Fspan> \u003Cspan class=\"th-token th-attr\">:form\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"form"\u003C\u002Fspan> \u003Cspan class=\"th-token th-attr\">class\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"w-full"\u003C\u002Fspan>>\n    <\u003Cspan class=\"th-token th-tag\">FormField\u003C\u002Fspan>\n      \u003Cspan class=\"th-token th-attr\">name\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"title"\u003C\u002Fspan>\n      \u003Cspan class=\"th-token th-attr\">label\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"Title"\u003C\u002Fspan>\n      \u003Cspan class=\"th-token th-attr\">hint\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"One line, no period"\u003C\u002Fspan>\n      required\n      \u003Cspan class=\"th-token th-attr\">:validators\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"titleValidators"\u003C\u002Fspan>\n    >\n      <\u003Cspan class=\"th-token th-tag\">template\u003C\u002Fspan> #default=\u003Cspan class=\"th-token th-string\">"{ field }"\u003C\u002Fspan>>\n        <\u003Cspan class=\"th-token th-tag\">Input\u003C\u002Fspan>\n          \u003Cspan class=\"th-token th-attr\">:model-value\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"field.state.value"\u003C\u002Fspan>\n          \u003Cspan class=\"th-token th-attr\">placeholder\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"Title of the piece"\u003C\u002Fspan>\n          \u003Cspan class=\"th-token th-attr\">@update:model-value\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"field.handleChange"\u003C\u002Fspan>\n          \u003Cspan class=\"th-token th-attr\">@blur\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"field.handleBlur"\u003C\u002Fspan>\n        \u002F>\n      <\u002F\u003Cspan class=\"th-token th-tag\">template\u003C\u002Fspan>>\n    <\u002F\u003Cspan class=\"th-token th-tag\">FormField\u003C\u002Fspan>>\n    <\u003Cspan class=\"th-token th-tag\">FormField\u003C\u002Fspan> \u003Cspan class=\"th-token th-attr\">name\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"abstract"\u003C\u002Fspan> \u003Cspan class=\"th-token th-attr\">label\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"Abstract"\u003C\u002Fspan> \u003Cspan class=\"th-token th-attr\">:validators\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"abstractValidators"\u003C\u002Fspan>>\n      <\u003Cspan class=\"th-token th-tag\">template\u003C\u002Fspan> #default=\u003Cspan class=\"th-token th-string\">"{ field }"\u003C\u002Fspan>>\n        <\u003Cspan class=\"th-token th-tag\">Textarea\u003C\u002Fspan>\n          \u003Cspan class=\"th-token th-attr\">:model-value\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"field.state.value"\u003C\u002Fspan>\n          \u003Cspan class=\"th-token th-attr\">placeholder\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"What the piece says"\u003C\u002Fspan>\n          \u003Cspan class=\"th-token th-attr\">@update:model-value\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"field.handleChange"\u003C\u002Fspan>\n          \u003Cspan class=\"th-token th-attr\">@blur\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"field.handleBlur"\u003C\u002Fspan>\n        \u002F>\n      <\u002F\u003Cspan class=\"th-token th-tag\">template\u003C\u002Fspan>>\n    <\u002F\u003Cspan class=\"th-token th-tag\">FormField\u003C\u002Fspan>>\n    <\u003Cspan class=\"th-token th-tag\">Button\u003C\u002Fspan> \u003Cspan class=\"th-token th-attr\">type\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"submit"\u003C\u002Fspan>>Submit<\u002F\u003Cspan class=\"th-token th-tag\">Button\u003C\u002Fspan>>\n  <\u002F\u003Cspan class=\"th-token th-tag\">Form\u003C\u002Fspan>>\n  <\u003Cspan class=\"th-token th-tag\">p\u003C\u002Fspan> \u003Cspan class=\"th-token th-attr\">role\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"status"\u003C\u002Fspan> \u003Cspan class=\"th-token th-attr\">class\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"mt-3 text-sm text-tertiary"\u003C\u002Fspan>>\n    {{ status }}\n  <\u002F\u003Cspan class=\"th-token th-tag\">p\u003C\u002Fspan>>\n<\u002F\u003Cspan class=\"th-token th-tag\">template\u003C\u002Fspan>>\n\u003C\u002Fcode>\u003C\u002Fpre>","\u003Cpre class=\"th-code th-code--vue\" data-language=\"vue\">\u003Ccode><\u003Cspan class=\"th-token th-tag\">script\u003C\u002Fspan> setup \u003Cspan class=\"th-token th-attr\">lang\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"ts"\u003C\u002Fspan>>\n\u003Cspan class=\"th-token th-keyword\">import\u003C\u002Fspan> {\n  \u003Cspan class=\"th-token th-type\">Button\u003C\u002Fspan>,\n  \u003Cspan class=\"th-token th-type\">CheckboxGroup\u003C\u002Fspan>,\n  \u003Cspan class=\"th-token th-type\">Form\u003C\u002Fspan>,\n  \u003Cspan class=\"th-token th-type\">FormField\u003C\u002Fspan>,\n  \u003Cspan class=\"th-token th-type\">Input\u003C\u002Fspan>,\n  \u003Cspan class=\"th-token th-type\">Switch\u003C\u002Fspan>,\n  \u003Cspan class=\"th-token th-type\">Textarea\u003C\u002Fspan>,\n  useForm,\n} \u003Cspan class=\"th-token th-keyword\">from\u003C\u002Fspan> \u003Cspan class=\"th-token th-string\">"@bysages\u002Fvue"\u003C\u002Fspan>;\n\u003Cspan class=\"th-token th-keyword\">import\u003C\u002Fspan> { ref } \u003Cspan class=\"th-token th-keyword\">from\u003C\u002Fspan> \u003Cspan class=\"th-token th-string\">"vue"\u003C\u002Fspan>;\n\u003Cspan class=\"th-token th-keyword\">import\u003C\u002Fspan> { z } \u003Cspan class=\"th-token th-keyword\">from\u003C\u002Fspan> \u003Cspan class=\"th-token th-string\">"zod"\u003C\u002Fspan>;\n\n\u003Cspan class=\"th-token th-keyword\">const\u003C\u002Fspan> status = \u003Cspan class=\"th-token th-function\">ref\u003C\u002Fspan>(\u003Cspan class=\"th-token th-string\">""\u003C\u002Fspan>);\n\n\u003Cspan class=\"th-token th-keyword\">const\u003C\u002Fspan> topics = [\n  { \u003Cspan class=\"th-token th-property\">label\u003C\u002Fspan>: \u003Cspan class=\"th-token th-string\">"Typography"\u003C\u002Fspan>, \u003Cspan class=\"th-token th-property\">value\u003C\u002Fspan>: \u003Cspan class=\"th-token th-string\">"typography"\u003C\u002Fspan> },\n  { \u003Cspan class=\"th-token th-property\">label\u003C\u002Fspan>: \u003Cspan class=\"th-token th-string\">"Lighting"\u003C\u002Fspan>, \u003Cspan class=\"th-token th-property\">value\u003C\u002Fspan>: \u003Cspan class=\"th-token th-string\">"lighting"\u003C\u002Fspan> },\n  { \u003Cspan class=\"th-token th-property\">label\u003C\u002Fspan>: \u003Cspan class=\"th-token th-string\">"Motion"\u003C\u002Fspan>, \u003Cspan class=\"th-token th-property\">value\u003C\u002Fspan>: \u003Cspan class=\"th-token th-string\">"motion"\u003C\u002Fspan> },\n];\n\n\u003Cspan class=\"th-token th-keyword\">const\u003C\u002Fspan> form = \u003Cspan class=\"th-token th-function\">useForm\u003C\u002Fspan>({\n  \u003Cspan class=\"th-token th-property\">defaultValues\u003C\u002Fspan>: {\n    \u003Cspan class=\"th-token th-property\">title\u003C\u002Fspan>: \u003Cspan class=\"th-token th-string\">""\u003C\u002Fspan>,\n    \u003Cspan class=\"th-token th-property\">summary\u003C\u002Fspan>: \u003Cspan class=\"th-token th-string\">""\u003C\u002Fspan>,\n    \u003Cspan class=\"th-token th-property\">topics\u003C\u002Fspan>: [] \u003Cspan class=\"th-token th-keyword\">as\u003C\u002Fspan> \u003Cspan class=\"th-token th-type\">string\u003C\u002Fspan>[],\n    \u003Cspan class=\"th-token th-property\">consent\u003C\u002Fspan>: \u003Cspan class=\"th-token th-literal\">false\u003C\u002Fspan>,\n  },\n  \u003Cspan class=\"th-token th-property\">validators\u003C\u002Fspan>: {\n    \u003Cspan class=\"th-token th-property\">onChange\u003C\u002Fspan>: z.\u003Cspan class=\"th-token th-property\">object\u003C\u002Fspan>({\n      \u003Cspan class=\"th-token th-property\">title\u003C\u002Fspan>: z.\u003Cspan class=\"th-token th-property\">string\u003C\u002Fspan>().\u003Cspan class=\"th-token th-property\">min\u003C\u002Fspan>(\u003Cspan class=\"th-token th-number\">1\u003C\u002Fspan>, \u003Cspan class=\"th-token th-string\">"The title is required."\u003C\u002Fspan>),\n      \u003Cspan class=\"th-token th-property\">summary\u003C\u002Fspan>: z.\u003Cspan class=\"th-token th-property\">string\u003C\u002Fspan>().\u003Cspan class=\"th-token th-property\">min\u003C\u002Fspan>(\u003Cspan class=\"th-token th-number\">8\u003C\u002Fspan>, \u003Cspan class=\"th-token th-string\">"Write at least 8 characters."\u003C\u002Fspan>),\n      \u003Cspan class=\"th-token th-property\">topics\u003C\u002Fspan>: z.\u003Cspan class=\"th-token th-property\">array\u003C\u002Fspan>(z.\u003Cspan class=\"th-token th-property\">string\u003C\u002Fspan>()).\u003Cspan class=\"th-token th-property\">min\u003C\u002Fspan>(\u003Cspan class=\"th-token th-number\">1\u003C\u002Fspan>, \u003Cspan class=\"th-token th-string\">"Pick at least one topic."\u003C\u002Fspan>),\n      \u003Cspan class=\"th-token th-property\">consent\u003C\u002Fspan>: z.\u003Cspan class=\"th-token th-property\">boolean\u003C\u002Fspan>().\u003Cspan class=\"th-token th-property\">refine\u003C\u002Fspan>((v) => v, \u003Cspan class=\"th-token th-string\">"Please accept the terms."\u003C\u002Fspan>),\n    }),\n  },\n  \u003Cspan class=\"th-token th-property\">onSubmit\u003C\u002Fspan>: () => {\n    status.\u003Cspan class=\"th-token th-property\">value\u003C\u002Fspan> = \u003Cspan class=\"th-token th-string\">"Submitted."\u003C\u002Fspan>;\n  },\n});\n<\u002F\u003Cspan class=\"th-token th-tag\">script\u003C\u002Fspan>>\n\n<\u003Cspan class=\"th-token th-tag\">template\u003C\u002Fspan>>\n  <\u003Cspan class=\"th-token th-tag\">Form\u003C\u002Fspan> \u003Cspan class=\"th-token th-attr\">:form\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"form"\u003C\u002Fspan> \u003Cspan class=\"th-token th-attr\">class\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"w-full"\u003C\u002Fspan>>\n    <\u003Cspan class=\"th-token th-tag\">FormField\u003C\u002Fspan> \u003Cspan class=\"th-token th-attr\">name\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"title"\u003C\u002Fspan> \u003Cspan class=\"th-token th-attr\">label\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"Title"\u003C\u002Fspan> required>\n      <\u003Cspan class=\"th-token th-tag\">template\u003C\u002Fspan> #default=\u003Cspan class=\"th-token th-string\">"{ field }"\u003C\u002Fspan>>\n        <\u003Cspan class=\"th-token th-tag\">Input\u003C\u002Fspan>\n          \u003Cspan class=\"th-token th-attr\">:model-value\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"field.state.value"\u003C\u002Fspan>\n          \u003Cspan class=\"th-token th-attr\">placeholder\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"Title of the piece"\u003C\u002Fspan>\n          \u003Cspan class=\"th-token th-attr\">@update:model-value\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"field.handleChange"\u003C\u002Fspan>\n          \u003Cspan class=\"th-token th-attr\">@blur\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"field.handleBlur"\u003C\u002Fspan>\n        \u002F>\n      <\u002F\u003Cspan class=\"th-token th-tag\">template\u003C\u002Fspan>>\n    <\u002F\u003Cspan class=\"th-token th-tag\">FormField\u003C\u002Fspan>>\n    <\u003Cspan class=\"th-token th-tag\">FormField\u003C\u002Fspan> \u003Cspan class=\"th-token th-attr\">name\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"summary"\u003C\u002Fspan> \u003Cspan class=\"th-token th-attr\">label\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"Summary"\u003C\u002Fspan> \u003Cspan class=\"th-token th-attr\">hint\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"A few sentences"\u003C\u002Fspan>>\n      <\u003Cspan class=\"th-token th-tag\">template\u003C\u002Fspan> #default=\u003Cspan class=\"th-token th-string\">"{ field }"\u003C\u002Fspan>>\n        <\u003Cspan class=\"th-token th-tag\">Textarea\u003C\u002Fspan>\n          \u003Cspan class=\"th-token th-attr\">:model-value\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"field.state.value"\u003C\u002Fspan>\n          \u003Cspan class=\"th-token th-attr\">placeholder\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"What the piece says"\u003C\u002Fspan>\n          \u003Cspan class=\"th-token th-attr\">@update:model-value\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"field.handleChange"\u003C\u002Fspan>\n          \u003Cspan class=\"th-token th-attr\">@blur\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"field.handleBlur"\u003C\u002Fspan>\n        \u002F>\n      <\u002F\u003Cspan class=\"th-token th-tag\">template\u003C\u002Fspan>>\n    <\u002F\u003Cspan class=\"th-token th-tag\">FormField\u003C\u002Fspan>>\n    <\u003Cspan class=\"th-token th-tag\">FormField\u003C\u002Fspan> \u003Cspan class=\"th-token th-attr\">name\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"topics"\u003C\u002Fspan> \u003Cspan class=\"th-token th-attr\">label\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"Topics"\u003C\u002Fspan> required>\n      <\u003Cspan class=\"th-token th-tag\">template\u003C\u002Fspan> #default=\u003Cspan class=\"th-token th-string\">"{ field }"\u003C\u002Fspan>>\n        <\u003Cspan class=\"th-token th-tag\">CheckboxGroup\u003C\u002Fspan>\n          \u003Cspan class=\"th-token th-attr\">:model-value\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"field.state.value"\u003C\u002Fspan>\n          \u003Cspan class=\"th-token th-attr\">:options\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"topics"\u003C\u002Fspan>\n          \u003Cspan class=\"th-token th-attr\">@update:model-value\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"field.handleChange"\u003C\u002Fspan>\n          \u003Cspan class=\"th-token th-attr\">@blur\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"field.handleBlur"\u003C\u002Fspan>\n        \u002F>\n      <\u002F\u003Cspan class=\"th-token th-tag\">template\u003C\u002Fspan>>\n    <\u002F\u003Cspan class=\"th-token th-tag\">FormField\u003C\u002Fspan>>\n    <\u003Cspan class=\"th-token th-tag\">FormField\u003C\u002Fspan> \u003Cspan class=\"th-token th-attr\">name\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"consent"\u003C\u002Fspan>>\n      <\u003Cspan class=\"th-token th-tag\">template\u003C\u002Fspan> #default=\u003Cspan class=\"th-token th-string\">"{ field }"\u003C\u002Fspan>>\n        <\u003Cspan class=\"th-token th-tag\">Switch.Root\u003C\u002Fspan>\n          \u003Cspan class=\"th-token th-attr\">:checked\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"field.state.value"\u003C\u002Fspan>\n          \u003Cspan class=\"th-token th-attr\">@update:checked\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"field.handleChange"\u003C\u002Fspan>\n          \u003Cspan class=\"th-token th-attr\">@blur\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"field.handleBlur"\u003C\u002Fspan>\n        >\n          <\u003Cspan class=\"th-token th-tag\">Switch.Control\u003C\u002Fspan>>\n            <\u003Cspan class=\"th-token th-tag\">Switch.Thumb\u003C\u002Fspan> \u002F>\n          <\u002F\u003Cspan class=\"th-token th-tag\">Switch.Control\u003C\u002Fspan>>\n          <\u003Cspan class=\"th-token th-tag\">Switch.Label\u003C\u002Fspan>>I accept the terms<\u002F\u003Cspan class=\"th-token th-tag\">Switch.Label\u003C\u002Fspan>>\n          <\u003Cspan class=\"th-token th-tag\">Switch.HiddenInput\u003C\u002Fspan> \u002F>\n        <\u002F\u003Cspan class=\"th-token th-tag\">Switch.Root\u003C\u002Fspan>>\n      <\u002F\u003Cspan class=\"th-token th-tag\">template\u003C\u002Fspan>>\n    <\u002F\u003Cspan class=\"th-token th-tag\">FormField\u003C\u002Fspan>>\n    <\u003Cspan class=\"th-token th-tag\">Button\u003C\u002Fspan> \u003Cspan class=\"th-token th-attr\">type\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"submit"\u003C\u002Fspan>>Submit<\u002F\u003Cspan class=\"th-token th-tag\">Button\u003C\u002Fspan>>\n  <\u002F\u003Cspan class=\"th-token th-tag\">Form\u003C\u002Fspan>>\n  <\u003Cspan class=\"th-token th-tag\">p\u003C\u002Fspan> \u003Cspan class=\"th-token th-attr\">role\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"status"\u003C\u002Fspan> \u003Cspan class=\"th-token th-attr\">class\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"mt-3 text-sm text-tertiary"\u003C\u002Fspan>>\n    {{ status }}\n  <\u002F\u003Cspan class=\"th-token th-tag\">p\u003C\u002Fspan>>\n<\u002F\u003Cspan class=\"th-token th-tag\">template\u003C\u002Fspan>>\n\u003C\u002Fcode>\u003C\u002Fpre>",1790878642602]