text: (window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-4995fffc"],{"7a71":function(e,l,t){"use strict";t.r(l);var n=t("7a23"),i=Object(n["Y"])("data-v-0cc66a27");Object(n["F"])("data-v-0cc66a27");var a={class:"content-section introduction"},d=Object(n["m"])("div",{class:"feature-intro"},[Object(n["m"])("h1",null,"Form Layout"),Object(n["m"])("p",null,[Object(n["l"])("Form layout is a CSS utility optimized for creating forms with ease. FormLayout is not included in PrimeVue as it is provided by "),Object(n["m"])("a",{href:"https://github.com/primefaces/primeflex"},"PrimeFlex"),Object(n["l"])(", a shared grid library between PrimeFaces, PrimeNG, PrimeReact and PrimeVue projects.")])],-1),c={class:"content-section implementation"},s={class:"card"},o=Object(n["m"])("h5",null,"Vertical",-1),m={class:"p-fluid"},r={class:"p-field"},p=Object(n["m"])("label",{for:"firstname1"},"Firstname",-1),b={class:"p-field"},u=Object(n["m"])("label",{for:"lastname1"},"Lastname",-1),v={class:"card"},f=Object(n["m"])("h5",null,"Vertical and Grid",-1),y={class:"p-fluid p-formgrid p-grid"},h={class:"p-field p-col"},O=Object(n["m"])("label",{for:"firstname2"},"Firstname",-1),j={class:"p-field p-col"},x=Object(n["m"])("label",{for:"lastname2"},"Lastname",-1),g={class:"card"},L=Object(n["m"])("h5",null,"Horizontal and Fixed Width",-1),C={class:"p-field p-grid"},I=Object(n["m"])("label",{for:"firstname3",class:"p-col-fixed",style:{width:"100px"}},"Firstname",-1),w={class:"p-col"},F={class:"p-field p-grid"},V=Object(n["m"])("label",{for:"lastname3",class:"p-col-fixed",style:{width:"100px"}},"Lastname",-1),T={class:"p-col"},A={class:"card"},k=Object(n["m"])("h5",null,"Horizontal and Fluid",-1),z={class:"p-fluid"},B={class:"p-field p-grid"},S=Object(n["m"])("label",{for:"firstname4",class:"p-col-12 p-mb-2 p-md-2 p-mb-md-0"},"Firstname",-1),R={class:"p-col-12 p-md-10"},H={class:"p-field p-grid"},U=Object(n["m"])("label",{for:"lastname4",class:"p-col-12 p-mb-2 p-md-2 p-mb-md-0"},"Lastname",-1),D={class:"p-col-12 p-md-10"},W={class:"card"},K=Object(n["m"])("h5",null,"Inline",-1),P={class:"p-formgroup-inline"},E={class:"p-field"},G=Object(n["m"])("label",{for:"firstname5",class:"p-sr-only"},"Firstname",-1),M={class:"p-field"},_=Object(n["m"])("label",{for:"lastname5",class:"p-sr-only"},"Lastname",-1),N={class:"card"},Z=Object(n["m"])("h5",null,"Vertical Checkbox",-1),J={class:"p-field-checkbox"},$=Object(n["m"])("label",{for:"city1"},"Chicago",-1),q={class:"p-field-checkbox"},Y=Object(n["m"])("label",{for:"city2"},"Los Angeles",-1),Q=Object(n["m"])("h5",null,"Horizontal Checkbox",-1),X={class:"p-formgroup-inline"},ee={class:"p-field-checkbox"},le=Object(n["m"])("label",{for:"city3"},"Chicago",-1),te={class:"p-field-checkbox"},ne=Object(n["m"])("label",{for:"city4"},"Los Angeles",-1),ie={class:"card"},ae=Object(n["m"])("h5",null,"Vertical RadioButton",-1),de={class:"p-field-radiobutton"},ce=Object(n["m"])("label",{for:"city5"},"Chicago",-1),se={class:"p-field-radiobutton"},oe=Object(n["m"])("label",{for:"city6"},"Los Angeles",-1),me=Object(n["m"])("h5",null,"Horizontal RadioButton",-1),re={class:"p-formgroup-inline"},pe={class:"p-field-radiobutton"},be=Object(n["m"])("label",{for:"city7"},"Chicago",-1),ue={class:"p-field-radiobutton"},ve=Object(n["m"])("label",{for:"city8"},"Los Angeles",-1),fe={class:"card"},ye=Object(n["m"])("h5",null,"Help Text",-1),he={class:"p-field p-fluid"},Oe=Object(n["m"])("label",{for:"username"},"Username",-1),je=Object(n["m"])("small",{id:"username-help"},"Enter your username to reset your password.",-1),xe={class:"card"},ge=Object(n["m"])("h5",null,"Advanced",-1),Le={class:"p-fluid p-formgrid p-grid"},Ce={class:"p-field p-col-12 p-md-6"},Ie=Object(n["m"])("label",{for:"firstname6"},"Firstname",-1),we={class:"p-field p-col-12 p-md-6"},Fe=Object(n["m"])("label",{for:"lastname6"},"Lastname",-1),Ve={class:"p-field p-col-12"},Te=Object(n["m"])("label",{for:"address"},"Address",-1),Ae={class:"p-field p-col-12 p-md-6"},ke=Object(n["m"])("label",{for:"city"},"City",-1),ze={class:"p-field p-col-12 p-md-3"},Be=Object(n["m"])("label",{for:"state"},"State",-1),Se={class:"p-field p-col-12 p-md-3"},Re=Object(n["m"])("label",{for:"zip"},"Zip",-1);Object(n["D"])();var He=i((function(e,l,t,i,He,Ue){var De=Object(n["K"])("AppDemoActions"),We=Object(n["K"])("InputText"),Ke=Object(n["K"])("Button"),Pe=Object(n["K"])("Checkbox"),Ee=Object(n["K"])("RadioButton"),Ge=Object(n["K"])("Textarea"),Me=Object(n["K"])("Dropdown"),_e=Object(n["K"])("FormLayoutDoc");return Object(n["C"])(),Object(n["h"])("div",null,[Object(n["m"])("div",a,[d,Object(n["m"])(De)]),Object(n["m"])("div",c,[Object(n["m"])("div",s,[o,Object(n["m"])("div",m,[Object(n["m"])("div",r,[p,Object(n["m"])(We,{id:"firstname1",type:"text"})]),Object(n["m"])("div",b,[u,Object(n["m"])(We,{id:"lastname1",type:"text"})])])]),Object(n["m"])("div",v,[f,Object(n["m"])("div",y,[Object(n["m"])("div",h,[O,Object(n["m"])(We,{id:"firstname2",type:"text"})]),Object(n["m"])("div",j,[x,Object(n["m"])(We,{id:"lastname2",type:"text"})])])]),Object(n["m"])("div",g,[L,Object(n["m"])("div",C,[I,Object(n["m"])("div",w,[Object(n["m"])(We,{id:"firstname3",type:"text"})])]),Object(n["m"])("div",F,[V,Object(n["m"])("div",T,[Object(n["m"])(We,{id:"lastname3",type:"text"})])])]),Object(n["m"])("div",A,[k,Object(n["m"])("div",z,[Object(n["m"])("div",B,[S,Object(n["m"])("div",R,[Object(n["m"])(We,{id:"firstname4",type:"text"})])]),Object(n["m"])("div",H,[U,Object(n["m"])("div",D,[Object(n["m"])(We,{id:"lastname4",type:"text"})])])])]),Object(n["m"])("div",W,[K,Object(n["m"])("div",P,[Object(n["m"])("div",E,[G,Object(n["m"])(We,{id:"firstname5",type:"text",placeholder:"Firstname"})]),Object(n["m"])("div",M,[_,Object(n["m"])(We,{id:"lastname5",type:"text",placeholder:"Lastname"})]),Object(n["m"])(Ke,{type:"button",label:"Submit"})])]),Object(n["m"])("div",N,[Z,Object(n["m"])("div",J,[Object(n["m"])(Pe,{id:"city1",name:"city1",value:"Chicago",modelValue:He.cities1,"onUpdate:modelValue":l[1]||(l[1]=function(e){return He.cities1=e})},null,8,["modelValue"]),$]),Object(n["m"])("div",q,[Object(n["m"])(Pe,{id:"city2",name:"city1",value:"Los Angeles",modelValue:He.cities1,"onUpdate:modelValue":l[2]||(l[2]=function(e){return He.cities1=e})},null,8,["modelValue"]),Y]),Q,Object(n["m"])("div",X,[Object(n["m"])("div",ee,[Object(n["m"])(Pe,{id:"city3",name:"city2",value:"Chicago",modelValue:He.cities2,"onUpdate:modelValue":l[3]||(l[3]=function(e){return He.cities2=e})},null,8,["modelValue"]),le]),Object(n["m"])("div",te,[Object(n["m"])(Pe,{id:"city4",name:"city2",value:"Los Angeles",modelValue:He.cities2,"onUpdate:modelValue":l[4]||(l[4]=function(e){return He.cities2=e})},null,8,["modelValue"]),ne])])]),Object(n["m"])("div",ie,[ae,Object(n["m"])("div",de,[Object(n["m"])(Ee,{id:"city5",name:"city1",value:"Chicago",modelValue:He.city1,"onUpdate:modelValue":l[5]||(l[5]=function(e){return He.city1=e})},null,8,["modelValue"]),ce]),Object(n["m"])("div",se,[Object(n["m"])(Ee,{id:"city6",name:"city1",value:"Los Angeles",modelValue:He.city1,"onUpdate:modelValue":l[6]||(l[6]=function(e){return He.city1=e})},null,8,["modelValue"]),oe]),me,Object(n["m"])("div",re,[Object(n["m"])("div",pe,[Object(n["m"])(Ee,{id:"city7",name:"city2",value:"Chicago",modelValue:He.city2,"onUpdate:modelValue":l[7]||(l[7]=function(e){return He.city2=e})},null,8,["modelValue"]),be]),Object(n["m"])("div",ue,[Object(n["m"])(Ee,{id:"city8",name:"city2",value:"Los Angeles",modelValue:He.city2,"onUpdate:modelValue":l[8]||(l[8]=function(e){return He.city2=e})},null,8,["modelValue"]),ve])])]),Object(n["m"])("div",fe,[ye,Object(n["m"])("div",he,[Oe,Object(n["m"])(We,{id:"username",type:"username","aria-describedby":"username-help"}),je])]),Object(n["m"])("div",xe,[ge,Object(n["m"])("div",Le,[Object(n["m"])("div",Ce,[Ie,Object(n["m"])(We,{id:"firstname6",type:"text"})]),Object(n["m"])("div",we,[Fe,Object(n["m"])(We,{id:"lastname6",type:"text"})]),Object(n["m"])("div",Ve,[Te,Object(n["m"])(Ge,{id:"address",rows:"4"})]),Object(n["m"])("div",Ae,[ke,Object(n["m"])(We,{id:"city",type:"text"})]),Object(n["m"])("div",ze,[Be,Object(n["m"])(Me,{inputId:"state",modelValue:He.selectedState,"onUpdate:modelValue":l[9]||(l[9]=function(e){return He.selectedState=e}),options:He.states,optionLabel:"name",placeholder:"Select"},null,8,["modelValue","options"])]),Object(n["m"])("div",Se,[Re,Object(n["m"])(We,{id:"zip",type:"text"})])])])]),Object(n["m"])(_e)])})),Ue=Object(n["m"])("h5",null,"Getting Started",-1),De=Object(n["m"])("p",null,[Object(n["l"])("Core member of the FormLayout is the "),Object(n["m"])("i",null,".p-field"),Object(n["l"])(" class that wraps the input field and the associated label.")],-1),We=Object(n["m"])("code",null,'\n<div class="p-field">\n    <label for="fieldId">Label</label>\n    <InputText id="fieldId" type="text" />\n</div>\n\n',-1),Ke=Object(n["m"])("h5",null,"Vertical Layout",-1),Pe=Object(n["m"])("p",null,[Object(n["l"])("In its simplest form, a vertical layout is created when used within "),Object(n["m"])("i",null,".p-fluid"),Object(n["l"])(" that makes the components use all available width.")],-1),Ee=Object(n["m"])("code",null,'\n<div class="p-fluid">\n    <div class="p-field">\n        <label for="firstname">Firstname</label>\n        <InputText id="firstname" type="text" />\n    </div>\n    <div class="p-field">\n        <label for="lastname">Lastname</label>\n        <InputText id="lastname" type="text" />\n    </div>\n</div>\n\n',-1),Ge=Object(n["m"])("h5",null,"Vertical Layout with Grid",-1),Me=Object(n["m"])("p",null,[Object(n["l"])("This is where FormLayout actually hooks-in to PrimeFlex with the help of "),Object(n["m"])("i",null,".p-formgrid"),Object(n["l"])(" class to optimize the content for form design. Example below arranges two fields to be displayed next two each other.")],-1),_e=Object(n["m"])("code",null,'\n<div class="p-fluid p-formgrid p-grid">\n        <div class="p-field p-col">\n        <label for="firstname">Firstname</label>\n        <InputText id="firstname" type="text" />\n    </div>\n    <div class="p-field p-col">\n        <label for="lastname">Lastname</label>\n        <InputText id="lastname" type="text" />\n    </div>\n</div>\n\n',-1),Ne=Object(n["m"])("h5",null,"Horizontal and Fixed Width",-1),Ze=Object(n["m"])("p",null,"In horizontal form, label of the field is displayed on the same row of the input as opposed to the vertical alternative. In this example, label has a fixed width where container of the inputs gets the remaining space. ",-1),Je=Object(n["m"])("code",null,'\n<div class="p-field p-grid">\n    <label for="firstname" class="p-col-fixed" style="width:100px">Firstname</label>\n    <div class="p-col">\n        <InputText id="firstname" type="text" />\n    </div>\n</div>\n<div class="p-field p-grid">\n    <label for="lastname" class="p-col-fixed" style="width:100px">Lastname</label>\n    <div class="p-col">\n        <InputText id="lastname" type="text" />\n    </div>\n</div>\n\n',-1),$e=Object(n["m"])("h5",null,"Horizontal and Fluid",-1),qe=Object(n["m"])("p",null,[Object(n["l"])("Wrapping the form in the previous example with "),Object(n["m"])("i",null,".p-fluid"),Object(n["l"])(" and removing the fixed width results in a fluid layout.")],-1),Ye=Object(n["m"])("code",null,'\n<div class="p-fluid">\n    <div class="p-field p-grid">\n        <label for="firstname" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Firstname</label>\n        <div class="p-col-12 p-md-10">\n            <InputText id="firstname" type="text" />\n        </div>\n    </div>\n    <div class="p-field p-grid">\n        <label for="lastname" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Lastname</label>\n        <div class="p-col-12 p-md-10">\n            <InputText id="lastname" type="text" />\n        </div>\n    </div>\n</div>\n\n',-1),Qe=Object(n["m"])("h5",null,"Inline",-1),Xe=Object(n["m"])("p",null,[Object(n["l"])("Inline forms are used to display the content on the same row and can simply be implemented by adding "),Object(n["m"])("i",null,".p-formgroup-inline"),Object(n["l"])(" to the form container. Note that per design requirements, if labels are not visually hidden, it is suggested to use "),Object(n["m"])("i",null,".p-sr-only"),Object(n["l"])(" to still support screen readers.")],-1),el=Object(n["m"])("code",null,'\n<div class="p-formgroup-inline">\n    <div class="p-field">\n        <label for="firstname" class="p-sr-only">Firstname</label>\n        <InputText id="firstname" type="text" placeholder="Firstname" />\n    </div>\n    <div class="p-field">\n        <label for="lastname" class="p-sr-only">Lastname</label>\n        <InputText id="lastname" type="text" placeholder="Lastname" />\n    </div>\n    <Button type="button" label="Submit" />\n</div>\n\n',-1),ll=Object(n["m"])("h5",null,"Checkbox and RadioButton",-1),tl=Object(n["m"])("p",null,[Object(n["l"])("Checkbox and RadioButton have exclusive layout support via "),Object(n["m"])("i",null,".p-field-checkbox"),Object(n["l"])(" and "),Object(n["m"])("i",null,".p-field-radiobutton"),Object(n["l"])(" classes respectively. Examples here demonstrates vertical and horizontal layout alternatives.")],-1),nl=Object(n["m"])("code",null,'\n<h3>Vertical Checkbox</h3>\n<div class="p-field-checkbox">\n    <Checkbox id="city1" name="city1" value="Chicago" v-model="cities1" />\n    <label for="city1">Chicago</label>\n</div>\n<div class="p-field-checkbox">\n    <Checkbox id="city2" name="city1" value="Los Angeles" v-model="cities1" />\n    <label for="city2">Los Angeles</label>\n</div>\n\n<h3>Horizontal Checkbox</h3>\n<div class="p-formgroup-inline">\n    <div class="p-field-checkbox">\n        <Checkbox id="city3" name="city2" value="Chicago" v-model="cities2" />\n        <label for="city3">Chicago</label>\n    </div>\n    <div class="p-field-checkbox">\n        <Checkbox id="city4" name="city2" value="Los Angeles" v-model="cities2" />\n        <label for="city4">Los Angeles</label>\n    </div>\n</div>\n\n',-1),il=Object(n["m"])("code",null,'\n<h3>Vertical RadioButton</h3>\n<div class="p-field-radiobutton">\n    <RadioButton id="city5" name="city1" value="Chicago" v-model="city1" />\n    <label for="city5">Chicago</label>\n</div>\n<div class="p-field-radiobutton">\n    <RadioButton id="city6" name="city1" value="Los Angeles" v-model="city1" />\n    <label for="city6">Los Angeles</label>\n</div>\n\n<h3>Horizontal RadioButton</h3>\n<div class="p-formgroup-inline">\n    <div class="p-field-checkbox">\n        <RadioButton id="city7" name="city2" value="Chicago" v-model="city2" />\n        <label for="city7">Chicago</label>\n    </div>\n    <div class="p-field-checkbox">\n        <RadioButton id="city8" name="city2" value="Los Angeles" v-model="city2" />\n        <label for="city8">Los Angeles</label>\n    </div>\n</div>\n\n',-1),al=Object(n["m"])("h5",null,"Helper text",-1),dl=Object(n["m"])("p",null,[Object(n["l"])("Helper text is an optional element defined with the "),Object(n["m"])("i",null,"small"),Object(n["l"])(" tag to display additional information about the input field.")],-1),cl=Object(n["m"])("code",null,'\n<div class="p-field p-fluid">\n    <label for="username">Username</label>\n    <InputText id="username" type="username" aria-describedby="username-help" />\n    <small id="username-help">Enter your username to reset your password.</small>\n</div>\n\n',-1),sl=Object(n["m"])("h5",null,"Advanced Forms",-1),ol=Object(n["m"])("p",null,[Object(n["l"])("A responsive form with various input fields can easily be implemented using a combination of "),Object(n["m"])("i",null,".p-field"),Object(n["l"])(", "),Object(n["m"])("i",null,".p-formgrid"),Object(n["l"])(" and "),Object(n["m"])("i",null,".p-fluid"),Object(n["l"])(".")],-1),ml=Object(n["m"])("code",null,'\n<div class="p-fluid p-formgrid p-grid">\n    <div class="p-field p-col-12 p-md-6">\n        <label for="firstname">Firstname</label>\n        <InputText id="firstname" type="text" />\n    </div>\n    <div class="p-field p-col-12 p-md-6">\n        <label for="lastname">Lastname</label>\n        <InputText id="lastname" type="text" />\n    </div>\n    <div class="p-field p-col-12">\n        <label for="address">Address</label>\n        <Textarea id="address" rows="4" />\n    </div>\n    <div class="p-field p-col-12 p-md-6">\n        <label for="city">City</label>\n        <InputText id="city" type="text" />\n    </div>\n    <div class="p-field p-col-12 p-md-3">\n        <label for="state">State</label>\n        <Dropdown inputId="state" v-model="selectedState" :options="states" optionLabel="name" placeholder="Select" />\n    </div>\n    <div class="p-field p-col-12 p-md-3">\n        <label for="zip">Zip</label>\n        <InputText id="zip" type="text" />\n    </div>\n</div>\n\n',-1),rl=Object(n["m"])("h5",null,"Customization",-1),pl=Object(n["m"])("p",null,[Object(n["l"])("FormLayout comes with sensible defaults, in case these values need to be customized suggested way is building "),Object(n["m"])("a",{href:"https://github.com/primefaces/primeflex/blob/master/primeflex.scss"},"primeflex.scss"),Object(n["l"])(" with your on variables.")],-1),bl=Object(n["m"])("div",{class:"doc-tablewrapper"},[Object(n["m"])("table",{class:"doc-table"},[Object(n["m"])("thead",null,[Object(n["m"])("tr",null,[Object(n["m"])("th",null,"Variable"),Object(n["m"])("th",null,"Default")])]),Object(n["m"])("tbody",null,[Object(n["m"])("tr",null,[Object(n["m"])("td",null,"$fieldMargin"),Object(n["m"])("td",null,"1em")]),Object(n["m"])("tr",null,[Object(n["m"])("td",null,"$fieldLabelMargin"),Object(n["m"])("td",null,".5em")])])])],-1);function ul(e,l,t,i,a,d){var c=Object(n["K"])("AppDoc"),s=Object(n["L"])("code");return Object(n["C"])(),Object(n["h"])(c,{name:"FormLayoutDemo",sources:a.sources,github:"formlayout/FormLayoutDemo.vue"},{default:Object(n["U"])((function(){return[Ue,De,Object(n["V"])(Object(n["m"])("pre",null,[We],512),[[s]]),Ke,Pe,Object(n["V"])(Object(n["m"])("pre",null,[Ee],512),[[s]]),Ge,Me,Object(n["V"])(Object(n["m"])("pre",null,[_e],512),[[s]]),Ne,Ze,Object(n["V"])(Object(n["m"])("pre",null,[Je],512),[[s]]),$e,qe,Object(n["V"])(Object(n["m"])("pre",null,[Ye],512),[[s]]),Qe,Xe,Object(n["V"])(Object(n["m"])("pre",null,[el],512),[[s]]),ll,tl,Object(n["V"])(Object(n["m"])("pre",null,[nl],512),[[s]]),Object(n["V"])(Object(n["m"])("pre",null,[il],512),[[s]]),al,dl,Object(n["V"])(Object(n["m"])("pre",null,[cl],512),[[s]]),sl,ol,Object(n["V"])(Object(n["m"])("pre",null,[ml],512),[[s]]),rl,pl,bl]})),_:1},8,["sources"])}var vl={data:function(){return{sources:{"options-api":{tabName:"Options API Source",content:'\n<template>\n    <div>\n        <div class="card">\n            <h5>Vertical</h5>\n            <div class="p-fluid">\n                <div class="p-field">\n                    <label for="firstname1">Firstname</label>\n                    <InputText id="firstname1" type="text" />\n                </div>\n                <div class="p-field">\n                    <label for="lastname1">Lastname</label>\n                    <InputText id="lastname1" type="text" />\n                </div>\n            </div>\n        </div>\n\n        <div class="card">\n            <h5>Vertical and Grid</h5>\n            <div class="p-fluid p-formgrid p-grid">\n                <div class="p-field p-col">\n                    <label for="firstname2">Firstname</label>\n                    <InputText id="firstname2" type="text" />\n                </div>\n                <div class="p-field p-col">\n                    <label for="lastname2">Lastname</label>\n                    <InputText id="lastname2" type="text" />\n                </div>\n            </div>\n        </div>\n\n        <div class="card">\n            <h5>Horizontal and Fixed Width</h5>\n            <div class="p-field p-grid">\n                <label for="firstname3" class="p-col-fixed" style="width:100px">Firstname</label>\n                <div class="p-col">\n                    <InputText id="firstname3" type="text" />\n                </div>\n            </div>\n            <div class="p-field p-grid">\n                <label for="lastname3" class="p-col-fixed" style="width:100px">Lastname</label>\n                <div class="p-col">\n                    <InputText id="lastname3" type="text" />\n                </div>\n            </div>\n        </div>\n\n        <div class="card">\n            <h5>Horizontal and Fluid</h5>\n            <div class="p-fluid">\n                <div class="p-field p-grid">\n                    <label for="firstname4" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Firstname</label>\n                    <div class="p-col-12 p-md-10">\n                        <InputText id="firstname4" type="text" />\n                    </div>\n                </div>\n                <div class="p-field p-grid">\n                    <label for="lastname4" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Lastname</label>\n                    <div class="p-col-12 p-md-10">\n                        <InputText id="lastname4" type="text" />\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div class="card">\n            <h5>Inline</h5>\n            <div class="p-formgroup-inline">\n                <div class="p-field">\n                    <label for="firstname5" class="p-sr-only">Firstname</label>\n                    <InputText id="firstname5" type="text" placeholder="Firstname" />\n                </div>\n                <div class="p-field">\n                    <label for="lastname5" class="p-sr-only">Lastname</label>\n                    <InputText id="lastname5" type="text" placeholder="Lastname" />\n                </div>\n                <Button type="button" label="Submit" />\n            </div>\n        </div>\n\n        <div class="card">\n            <h5>Vertical Checkbox</h5>\n            <div class="p-field-checkbox">\n                <Checkbox id="city1" name="city1" value="Chicago" v-model="cities1" />\n                <label for="city1">Chicago</label>\n            </div>\n            <div class="p-field-checkbox">\n                <Checkbox id="city2" name="city1" value="Los Angeles" v-model="cities1" />\n                <label for="city2">Los Angeles</label>\n            </div>\n\n            <h5>Horizontal Checkbox</h5>\n            <div class="p-formgroup-inline">\n                <div class="p-field-checkbox">\n                    <Checkbox id="city3" name="city2" value="Chicago" v-model="cities2" />\n                    <label for="city3">Chicago</label>\n                </div>\n                <div class="p-field-checkbox">\n                    <Checkbox id="city4" name="city2" value="Los Angeles" v-model="cities2" />\n                    <label for="city4">Los Angeles</label>\n                </div>\n            </div>\n        </div>\n\n        <div class="card">\n            <h5>Vertical RadioButton</h5>\n            <div class="p-field-radiobutton">\n                <RadioButton id="city5" name="city1" value="Chicago" v-model="city1" />\n                <label for="city5">Chicago</label>\n            </div>\n            <div class="p-field-radiobutton">\n                <RadioButton id="city6" name="city1" value="Los Angeles" v-model="city1" />\n                <label for="city6">Los Angeles</label>\n            </div>\n\n            <h5>Horizontal RadioButton</h5>\n            <div class="p-formgroup-inline">\n                <div class="p-field-radiobutton">\n                    <RadioButton id="city7" name="city2" value="Chicago" v-model="city2" />\n                    <label for="city7">Chicago</label>\n                </div>\n                <div class="p-field-radiobutton">\n                    <RadioButton id="city8" name="city2" value="Los Angeles" v-model="city2" />\n                    <label for="city8">Los Angeles</label>\n                </div>\n            </div>\n        </div>\n\n        <div class="card">\n            <h5>Help Text</h5>\n            <div class="p-field p-fluid">\n                <label for="username">Username</label>\n                <InputText id="username" type="username" aria-describedby="username-help" />\n                <small id="username-help">Enter your username to reset your password.</small>\n            </div>\n        </div>\n\n        <div class="card">\n            <h5>Advanced</h5>\n            <div class="p-fluid p-formgrid p-grid">\n                <div class="p-field p-col-12 p-md-6">\n                    <label for="firstname6">Firstname</label>\n                    <InputText id="firstname6" type="text" />\n                </div>\n                <div class="p-field p-col-12 p-md-6">\n                    <label for="lastname6">Lastname</label>\n                    <InputText id="lastname6" type="text" />\n                </div>\n                <div class="p-field p-col-12">\n                    <label for="address">Address</label>\n                    <Textarea id="address" rows="4" />\n                </div>\n                <div class="p-field p-col-12 p-md-6">\n                    <label for="city">City</label>\n                    <InputText id="city" type="text" />\n                </div>\n                <div class="p-field p-col-12 p-md-3">\n                    <label for="state">State</label>\n                    <Dropdown inputId="state" v-model="selectedState" :options="states" optionLabel="name" placeholder="Select" />\n                </div>\n                <div class="p-field p-col-12 p-md-3">\n                    <label for="zip">Zip</label>\n                    <InputText id="zip" type="text" />\n                </div>\n            </div>\n        </div>\n    </div>\n</template>\n\n<script>\nexport default {\n    data() {\n        return {\n            selectedState: null,\n            states: [\n                {name: \'Arizona\', code: \'Arizona\'},\n                {name: \'California\', value: \'California\'},\n                {name: \'Florida\', code: \'Florida\'},\n                {name: \'Ohio\', code: \'Ohio\'},\n                {name: \'Washington\', code: \'Washington\'}\n            ],\n            cities1: [],\n            cities2: [],\n            city1: null,\n            city2: null\n        }\n    }\n}\n<\\/script>\n\n<style lang="scss" scoped>\n@media screen and (max-width: 489px) {\n    .p-formgroup-inline {\n        .p-field {\n            margin-bottom: 1em !important;\n        }\n    }\n}\n\n.layout-content .content-section.implementation > h3 {\n    font-weight: 600;\n}\n\ntextarea {\n    resize: none;\n}\n</style>\n'},"composition-api":{tabName:"Composition API Source",content:'\n<template>\n    <div>\n        <div class="card">\n            <h5>Vertical</h5>\n            <div class="p-fluid">\n                <div class="p-field">\n                    <label for="firstname1">Firstname</label>\n                    <InputText id="firstname1" type="text" />\n                </div>\n                <div class="p-field">\n                    <label for="lastname1">Lastname</label>\n                    <InputText id="lastname1" type="text" />\n                </div>\n            </div>\n        </div>\n\n        <div class="card">\n            <h5>Vertical and Grid</h5>\n            <div class="p-fluid p-formgrid p-grid">\n                <div class="p-field p-col">\n                    <label for="firstname2">Firstname</label>\n                    <InputText id="firstname2" type="text" />\n                </div>\n                <div class="p-field p-col">\n                    <label for="lastname2">Lastname</label>\n                    <InputText id="lastname2" type="text" />\n                </div>\n            </div>\n        </div>\n\n        <div class="card">\n            <h5>Horizontal and Fixed Width</h5>\n            <div class="p-field p-grid">\n                <label for="firstname3" class="p-col-fixed" style="width:100px">Firstname</label>\n                <div class="p-col">\n                    <InputText id="firstname3" type="text" />\n                </div>\n            </div>\n            <div class="p-field p-grid">\n                <label for="lastname3" class="p-col-fixed" style="width:100px">Lastname</label>\n                <div class="p-col">\n                    <InputText id="lastname3" type="text" />\n                </div>\n            </div>\n        </div>\n\n        <div class="card">\n            <h5>Horizontal and Fluid</h5>\n            <div class="p-fluid">\n                <div class="p-field p-grid">\n                    <label for="firstname4" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Firstname</label>\n                    <div class="p-col-12 p-md-10">\n                        <InputText id="firstname4" type="text" />\n                    </div>\n                </div>\n                <div class="p-field p-grid">\n                    <label for="lastname4" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Lastname</label>\n                    <div class="p-col-12 p-md-10">\n                        <InputText id="lastname4" type="text" />\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div class="card">\n            <h5>Inline</h5>\n            <div class="p-formgroup-inline">\n                <div class="p-field">\n                    <label for="firstname5" class="p-sr-only">Firstname</label>\n                    <InputText id="firstname5" type="text" placeholder="Firstname" />\n                </div>\n                <div class="p-field">\n                    <label for="lastname5" class="p-sr-only">Lastname</label>\n                    <InputText id="lastname5" type="text" placeholder="Lastname" />\n                </div>\n                <Button type="button" label="Submit" />\n            </div>\n        </div>\n\n        <div class="card">\n            <h5>Vertical Checkbox</h5>\n            <div class="p-field-checkbox">\n                <Checkbox id="city1" name="city1" value="Chicago" v-model="cities1" />\n                <label for="city1">Chicago</label>\n            </div>\n            <div class="p-field-checkbox">\n                <Checkbox id="city2" name="city1" value="Los Angeles" v-model="cities1" />\n                <label for="city2">Los Angeles</label>\n            </div>\n\n            <h5>Horizontal Checkbox</h5>\n            <div class="p-formgroup-inline">\n                <div class="p-field-checkbox">\n                    <Checkbox id="city3" name="city2" value="Chicago" v-model="cities2" />\n                    <label for="city3">Chicago</label>\n                </div>\n                <div class="p-field-checkbox">\n                    <Checkbox id="city4" name="city2" value="Los Angeles" v-model="cities2" />\n                    <label for="city4">Los Angeles</label>\n                </div>\n            </div>\n        </div>\n\n        <div class="card">\n            <h5>Vertical RadioButton</h5>\n            <div class="p-field-radiobutton">\n                <RadioButton id="city5" name="city1" value="Chicago" v-model="city1" />\n                <label for="city5">Chicago</label>\n            </div>\n            <div class="p-field-radiobutton">\n                <RadioButton id="city6" name="city1" value="Los Angeles" v-model="city1" />\n                <label for="city6">Los Angeles</label>\n            </div>\n\n            <h5>Horizontal RadioButton</h5>\n            <div class="p-formgroup-inline">\n                <div class="p-field-radiobutton">\n                    <RadioButton id="city7" name="city2" value="Chicago" v-model="city2" />\n                    <label for="city7">Chicago</label>\n                </div>\n                <div class="p-field-radiobutton">\n                    <RadioButton id="city8" name="city2" value="Los Angeles" v-model="city2" />\n                    <label for="city8">Los Angeles</label>\n                </div>\n            </div>\n        </div>\n\n        <div class="card">\n            <h5>Help Text</h5>\n            <div class="p-field p-fluid">\n                <label for="username">Username</label>\n                <InputText id="username" type="username" aria-describedby="username-help" />\n                <small id="username-help">Enter your username to reset your password.</small>\n            </div>\n        </div>\n\n        <div class="card">\n            <h5>Advanced</h5>\n            <div class="p-fluid p-formgrid p-grid">\n                <div class="p-field p-col-12 p-md-6">\n                    <label for="firstname6">Firstname</label>\n                    <InputText id="firstname6" type="text" />\n                </div>\n                <div class="p-field p-col-12 p-md-6">\n                    <label for="lastname6">Lastname</label>\n                    <InputText id="lastname6" type="text" />\n                </div>\n                <div class="p-field p-col-12">\n                    <label for="address">Address</label>\n                    <Textarea id="address" rows="4" />\n                </div>\n                <div class="p-field p-col-12 p-md-6">\n                    <label for="city">City</label>\n                    <InputText id="city" type="text" />\n                </div>\n                <div class="p-field p-col-12 p-md-3">\n                    <label for="state">State</label>\n                    <Dropdown inputId="state" v-model="selectedState" :options="states" optionLabel="name" placeholder="Select" />\n                </div>\n                <div class="p-field p-col-12 p-md-3">\n                    <label for="zip">Zip</label>\n                    <InputText id="zip" type="text" />\n                </div>\n            </div>\n        </div>\n    </div>\n</template>\n\n<script>\nimport { ref } from \'vue\';\n\nexport default {\n    setup() {\n        const selectedState = ref(null);\n        const states = ref([\n            {name: \'Arizona\', code: \'Arizona\'},\n            {name: \'California\', value: \'California\'},\n            {name: \'Florida\', code: \'Florida\'},\n            {name: \'Ohio\', code: \'Ohio\'},\n            {name: \'Washington\', code: \'Washington\'}\n        ]);\n        const cities1 = ref([]);\n        const cities2 = ref([]);\n        const city1 = ref(null);\n        const city2 = ref(null);\n\n        return { selectedState, states, cities1, cities2, city1, city2 }\n    }\n}\n<\\/script>\n\n<style lang="scss" scoped>\n@media screen and (max-width: 489px) {\n    .p-formgroup-inline {\n        .p-field {\n            margin-bottom: 1em !important;\n        }\n    }\n}\n\n.layout-content .content-section.implementation > h3 {\n    font-weight: 600;\n}\n\ntextarea {\n    resize: none;\n}\n</style>\n'}}}}};vl.render=ul;var fl=vl,yl={data:function(){return{selectedState:null,states:[{name:"Arizona",code:"Arizona"},{name:"California",value:"California"},{name:"Florida",code:"Florida"},{name:"Ohio",code:"Ohio"},{name:"Washington",code:"Washington"}],cities1:[],cities2:[],city1:null,city2:null}},components:{FormLayoutDoc:fl}};t("da8e1");yl.render=He,yl.__scopeId="data-v-0cc66a27";l["default"]=yl},bc8a:function(e,l,t){var n=t("24fb");l=n(!1),l.push([e.i,"@media screen and (max-width:489px){.p-formgroup-inline .p-field[data-v-0cc66a27]{margin-bottom:1em!important}}.layout-content .content-section.implementation>h3[data-v-0cc66a27]{font-weight:600}textarea[data-v-0cc66a27]{resize:none}",""]),e.exports=l},c843:function(e,l,t){var n=t("bc8a");n.__esModule&&(n=n.default),"string"===typeof n&&(n=[[e.i,n,""]]),n.locals&&(e.exports=n.locals);var i=t("499e").default;i("14a096c0",n,!0,{sourceMap:!1,shadowMode:!1})},da8e1:function(e,l,t){"use strict";t("c843")}}]);