@salesforce-ux/design-system
Version:
Salesforce Lightning Design System
1 lines • 65 kB
JavaScript
var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/form-element/docs.mdx.js"]=function(e){function t(t){for(var l,o,s=t[0],r=t[1],d=t[2],c=0,u=[];c<s.length;c++)o=s[c],Object.prototype.hasOwnProperty.call(n,o)&&n[o]&&u.push(n[o][0]),n[o]=0;for(l in r)Object.prototype.hasOwnProperty.call(r,l)&&(e[l]=r[l]);for(m&&m(t);u.length;)u.shift()();return i.push.apply(i,d||[]),a()}function a(){for(var e,t=0;t<i.length;t++){for(var a=i[t],l=!0,s=1;s<a.length;s++){var r=a[s];0!==n[r]&&(l=!1)}l&&(i.splice(t--,1),e=o(o.s=a[0]))}return e}var l={},n={39:0},i=[];function o(t){if(l[t])return l[t].exports;var a=l[t]={i:t,l:!1,exports:{}};return e[t].call(a.exports,a,a.exports,o),a.l=!0,a.exports}o.m=e,o.c=l,o.d=function(e,t,a){o.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:a})},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.t=function(e,t){if(1&t&&(e=o(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var a=Object.create(null);if(o.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var l in e)o.d(a,l,function(t){return e[t]}.bind(null,l));return a},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="/assets/scripts/bundle/";var s=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs||[],r=s.push.bind(s);s.push=t,s=s.slice();for(var d=0;d<s.length;d++)t(s[d]);var m=r;return i.push([718,0]),a()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},718:function(e,t,a){"use strict";a.r(t),a.d(t,"getElement",(function(){return W})),a.d(t,"getContents",(function(){return Q}));var l=a(0),n=a.n(l),i=a(4),o=a(2),s=a(27),r=a(15),d=a(14),m=a(7),c=a(8),u=a(17),p=a(32),b=a(46),f=(a(49),a(5),a(36)),h=a(3),E=a.n(h),g=function(e){var t=e.children;return n.a.createElement("div",{className:"slds-form-element__row"},t)};g.propTypes={children:E.a.node.isRequired};var v=function(e){var t=e.isStacked,a=e.isHorizontal,l=e.isEditing,i=e.isRequired,o=e.isAddress,s=e.hasTooltip,r=e.hasError,d=e.errorId,m=e.inlineMessage,u=e.labelContent,p=e.children;return n.a.createElement(c.a,{hasCompoundFields:!0,isAddress:o,isStacked:t,isHorizontal:a,isEditing:l,isRequired:i,hasTooltip:s,hasError:r,errorId:d,inlineMessage:m,label:u},p)};v.propTypes={children:E.a.node.isRequired,isStacked:E.a.bool,isHorizontal:E.a.bool,isEditing:E.a.bool,isRequired:E.a.bool,isAddress:E.a.bool,hasTooltip:E.a.bool,hasError:E.a.bool,errorId:E.a.string,inlineMessage:E.a.string,labelContent:E.a.string};var y=a(55),S=a(80),C=a(37),_=a(23),z=a(24),x=a(11),w={rows:[{fields:[{type:"text",label:"Assigned To",value:"Jack Rogers",avatar:"/assets/images/avatar1.jpg",isRequired:!0,link:!0,component:n.a.createElement(c.b,{inputId:"stacked-form-element-id-01",labelContent:"Assigned To",isRequired:!0,isEditing:!0,isStacked:!0},n.a.createElement(u.a,{id:"stacked-form-element-id-01",readOnly:!0,defaultValue:"Jack Rogers",required:!0}))},{type:"lookup",label:"Team Name",value:"Salesforce Lightning Design System",link:!0,component:n.a.createElement(_.b,{id:"stacked-combobox-id-01",label:"Team Name","aria-controls":"stacked-listbox-id-01",autocomplete:!0,isEditing:!0,isStacked:!0,inputIconPosition:"right",rightInputIcon:n.a.createElement(m.b,{className:"slds-input__icon slds-input__icon_right",symbol:"clear",title:"Clear the text input",assistiveText:"Clear the text input"}),results:n.a.createElement(z.e,{id:"stacked-listbox-id-01",snapshot:{},type:"entity",count:2}),resultsType:"listbox",value:"Salesforce Lightning Design System"})}]},{fields:[{type:"checkbox",label:"Security Assessment Required?",value:n.a.createElement(x.a,{symbol:"steps",size:"x-small",useCurrentColor:!0,assistiveText:"False",title:"False"}),component:n.a.createElement(S.a,{labelContent:"Security Assessment Required?",isEditing:!0,isStacked:!0})},{type:"picklist",label:"Status",component:n.a.createElement(_.b,{id:"stacked-combobox-id-02",label:"Status","aria-controls":"stacked-listbox-id-02",readonly:!0,isEditing:!0,isStacked:!0,inputIconPosition:"right",rightInputIcon:n.a.createElement(x.a,{symbol:"down",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right",assistiveText:!1,title:!1}),results:n.a.createElement(z.e,{id:"stacked-listbox-id-02",snapshot:{},type:"plain",count:2,visualSelection:!0}),resultsType:"listbox"})}]},{fields:[{type:"checkbox-group",label:"Personalization Settings",value:"Disable end user personalization",component:n.a.createElement(c.a,{label:"App Personalization Settings",isEditing:!0,isStacked:!0},n.a.createElement(p.a,{label:"Disable end user personalization",name:"default",checked:!0}),n.a.createElement(p.a,{label:"Don't automatically create temporary tabs",name:"default"}))},{type:"",label:"",value:""}]},{fields:[{type:"text",label:"SLA Serial Number",value:"5367",hasTooltip:!0,component:n.a.createElement(c.b,{labelContent:"SLA Serial Number",inputId:"stacked-form-element-id-02",hasTooltip:!0,isEditing:!0,isStacked:!0},n.a.createElement(u.a,{id:"stacked-form-element-id-02",defaultValue:"5367"}))},{type:"date",label:"SLA Expiration Date",value:"1/1/2018",component:n.a.createElement(c.b,{formElementClassName:"slds-dropdown-trigger slds-dropdown-trigger_click slds-is-open",labelContent:"Date",inputId:"stacked-form-element-id-03",hasRightIcon:!0,isEditing:!0,isStacked:!0},n.a.createElement(u.a,{id:"stacked-form-element-id-03",defaultValue:"1/1/2018"}),n.a.createElement(m.b,{className:"slds-input__icon slds-input__icon_right",symbol:"event",assistiveText:"Select a date",title:"Select a date"}))}]},{fields:[{type:"location",label:"Location",value:"10.283, 54.293",component:n.a.createElement(v,{labelContent:"Location",isEditing:!0,isStacked:!0},n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_1-of-2"},n.a.createElement(c.b,{labelContent:"Longitude",inputId:"stacked-location-longitude-01"},n.a.createElement(u.a,{id:"stacked-location-longitude-01",defaultValue:"10.283"}))),n.a.createElement("div",{className:"slds-size_1-of-2"},n.a.createElement(c.b,{labelContent:"Latitude",inputId:"stacked-location-latitude-01"},n.a.createElement(u.a,{id:"stacked-location-latitude-01",defaultValue:"54.293"})))))},{type:"multiselect",label:"Selected Languages",value:"Arabic, Chinese, English, German",component:n.a.createElement(C.j,{isEditing:!0,isStacked:!0,dataSet:C.b,isResponsive:!0})}]},{fields:[{type:"address",label:"Billing Address",value:["525 S. Lexington Ave","Burlington, NC 27215","USA"],link:!0,isRequired:!0,hasTooltip:!0,component:n.a.createElement(v,{labelContent:"Billing Address",isAddress:!0,isEditing:!0,isRequired:!0,hasTooltip:!0,isStacked:!0},n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_1-of-1"},n.a.createElement(c.b,{labelContent:"Billing Street",inputId:"stacked-form-element-id-04"},n.a.createElement(b.a,{id:"stacked-form-element-id-04",defaultValue:"525 S. Lexington Ave",required:!0})))),n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_4-of-6"},n.a.createElement(c.b,{labelContent:"Billing City",inputId:"stacked-form-element-id-05"},n.a.createElement(u.a,{id:"stacked-form-element-id-05",defaultValue:"Burlington",required:!0}))),n.a.createElement("div",{className:"slds-size_2-of-6"},n.a.createElement(c.b,{labelContent:"Billing State/Province",inputId:"stacked-form-element-id-06"},n.a.createElement(u.a,{id:"stacked-form-element-id-06",defaultValue:"NC",required:!0})))),n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_4-of-6"},n.a.createElement(c.b,{labelContent:"Billing Zip/Postal Code",inputId:"stacked-form-element-id-07"},n.a.createElement(u.a,{id:"stacked-form-element-id-07",defaultValue:"27215",required:!0}))),n.a.createElement("div",{className:"slds-size_2-of-6"},n.a.createElement(c.b,{labelContent:"Billing Country",inputId:"stacked-form-element-id-08"},n.a.createElement(u.a,{id:"stacked-form-element-id-08",defaultValue:"USA",required:!0})))))},{type:"address",label:"Shipping Address",value:["312 Constitution Place","Austin, TX 78767","USA"],link:!0,component:n.a.createElement(v,{labelContent:"Shipping Address",isAddress:!0,isEditing:!0,isStacked:!0},n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_1-of-1"},n.a.createElement(c.b,{labelContent:"Shipping Street",inputId:"stacked-form-element-id-09"},n.a.createElement(b.a,{id:"stacked-form-element-id-09",defaultValue:"312 Constitution Place"})))),n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_4-of-6"},n.a.createElement(c.b,{labelContent:"Shipping City",inputId:"stacked-form-element-id-10"},n.a.createElement(u.a,{id:"stacked-form-element-id-10",defaultValue:"Austin"}))),n.a.createElement("div",{className:"slds-size_2-of-6"},n.a.createElement(c.b,{labelContent:"Shipping State/Province",inputId:"stacked-form-element-id-11"},n.a.createElement(u.a,{id:"stacked-form-element-id-11",defaultValue:"TX"})))),n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_4-of-6"},n.a.createElement(c.b,{labelContent:"Shipping Zip/Postal Code",inputId:"stacked-form-element-id-12"},n.a.createElement(u.a,{id:"stacked-form-element-id-12",defaultValue:"78767"}))),n.a.createElement("div",{className:"slds-size_2-of-6"},n.a.createElement(c.b,{labelContent:"Shipping Country",inputId:"stacked-form-element-id-13"},n.a.createElement(u.a,{id:"stacked-form-element-id-13",defaultValue:"USA"})))))}]},{fields:[{type:"textarea",label:"Description",value:["Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod."],column:1,component:n.a.createElement(c.b,{labelContent:"Description",inputId:"stacked-form-element-id-14",isStacked:!0,isEditing:!0,column:1},n.a.createElement(b.a,{id:"stacked-form-element-id-14",defaultValue:"Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod."}))}]}]},A={rows:[{fields:[{type:"text",label:"Assigned To",value:"Jack Rogers",avatar:"/assets/images/avatar1.jpg",isRequired:!0,link:!0,component:n.a.createElement(c.b,{isHorizontal:!0,inputId:"horizontal-form-element-id-01",labelContent:"Assigned To",isRequired:!0,isEditing:!0},n.a.createElement(u.a,{id:"horizontal-form-element-id-01",readOnly:!0,defaultValue:"Jack Rogers",required:!0}))},{type:"lookup",label:"Team Name",value:"Salesforce Lightning Design System",link:!0,component:n.a.createElement(_.b,{isHorizontal:!0,id:"horizontal-combobox-id-01",label:"Team Name","aria-controls":"horizontal-listbox-id-01",isEditing:!0,autocomplete:!0,inputIconPosition:"right",rightInputIcon:n.a.createElement(m.b,{className:"slds-input__icon slds-input__icon_right",symbol:"clear",title:"Clear the text input",assistiveText:"Clear the text input"}),results:n.a.createElement(z.e,{id:"horizontal-listbox-id-01",snapshot:{},type:"entity",count:2}),resultsType:"listbox",value:"Salesforce Lightning Design System"})}]},{fields:[{type:"checkbox",label:"Security Assessment Required?",value:n.a.createElement(x.a,{symbol:"steps",size:"x-small",useCurrentColor:!0,assistiveText:"False",title:"False"}),component:n.a.createElement(S.a,{labelContent:"Security Assessment Required?",isHorizontal:!0,isEditing:!0})},{type:"picklist",label:"Status",component:n.a.createElement(_.b,{isHorizontal:!0,id:"horizontal-combobox-id-02",label:"Status","aria-controls":"horizontal-listbox-id-02",readonly:!0,isEditing:!0,inputIconPosition:"right",rightInputIcon:n.a.createElement(x.a,{symbol:"down",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right",assistiveText:!1,title:!1}),results:n.a.createElement(z.e,{id:"horizontal-listbox-id-02",snapshot:{},type:"plain",count:2,visualSelection:!0}),resultsType:"listbox"})}]},{fields:[{type:"checkbox-group",label:"Personalization Settings",value:"Disable end user personalization",component:n.a.createElement(c.a,{isHorizontal:!0,label:"App Personalization Settings",isEditing:!0},n.a.createElement(p.a,{label:"Disable end user personalization",name:"default",checked:!0}),n.a.createElement(p.a,{label:"Don't automatically create temporary tabs",name:"default"}))},{type:"",label:"",value:""}]},{fields:[{type:"text",label:"SLA Serial Number",value:"5367",hasTooltip:!0,component:n.a.createElement(c.b,{isHorizontal:!0,labelContent:"SLA Serial Number",inputId:"horizontal-form-element-id-02",hasTooltip:!0,isEditing:!0},n.a.createElement(u.a,{id:"horizontal-form-element-id-02",defaultValue:"5367"}))},{type:"date",label:"SLA Expiration Date",value:"1/1/2018",component:n.a.createElement(c.b,{isHorizontal:!0,isEditing:!0,formElementClassName:"slds-dropdown-trigger slds-dropdown-trigger_click slds-is-open",labelContent:"Date",inputId:"horizontal-form-element-id-03",hasRightIcon:!0},n.a.createElement(u.a,{id:"horizontal-form-element-id-03",defaultValue:"1/1/2018"}),n.a.createElement(m.b,{className:"slds-input__icon slds-input__icon_right",symbol:"event",assistiveText:"Select a date",title:"Select a date"}))}]},{fields:[{type:"textarea",label:"Description",value:["Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod."],column:1,component:n.a.createElement(c.b,{isHorizontal:!0,labelContent:"Description",inputId:"horizontal-form-element-id-14",isEditing:!0,column:1},n.a.createElement(b.a,{id:"horizontal-form-element-id-14",defaultValue:"Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod."}))}]},{fields:[{type:"location",label:"Location",value:"10.283, 54.293",component:n.a.createElement(v,{labelContent:"Location",isEditing:!0,isHorizontal:!0},n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_1-of-2"},n.a.createElement(c.b,{labelContent:"Longitude",inputId:"horizontal-location-longitude-01"},n.a.createElement(u.a,{id:"horizontal-location-longitude-01",defaultValue:"10.283"}))),n.a.createElement("div",{className:"slds-size_1-of-2"},n.a.createElement(c.b,{labelContent:"Latitude",inputId:"horizontal-location-latitude-01"},n.a.createElement(u.a,{id:"horizontal-location-latitude-01",defaultValue:"54.293"})))))},{type:"multiselect",label:"Selected Languages",value:"Arabic, Chinese, English, German",component:n.a.createElement(C.j,{isStacked:!0,isEditing:!0,dataSet:C.b,isResponsive:!0})}]},{fields:[{type:"address",label:"Billing Address",value:["525 S. Lexington Ave","Burlington, NC 27215","USA"],link:!0,isRequired:!0,hasTooltip:!0,component:n.a.createElement(v,{labelContent:"Billing Address",isAddress:!0,isEditing:!0,isRequired:!0,hasTooltip:!0,isStacked:!0},n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_1-of-1"},n.a.createElement(c.b,{labelContent:"Billing Street",inputId:"horizontal-form-element-id-04"},n.a.createElement(b.a,{id:"horizontal-form-element-id-04",defaultValue:"525 S. Lexington Ave",required:!0})))),n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_4-of-6"},n.a.createElement(c.b,{labelContent:"Billing City",inputId:"horizontal-form-element-id-05"},n.a.createElement(u.a,{id:"horizontal-form-element-id-05",defaultValue:"Burlington",required:!0}))),n.a.createElement("div",{className:"slds-size_2-of-6"},n.a.createElement(c.b,{labelContent:"Billing State/Province",inputId:"horizontal-form-element-id-06"},n.a.createElement(u.a,{id:"horizontal-form-element-id-06",defaultValue:"NC",required:!0})))),n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_4-of-6"},n.a.createElement(c.b,{labelContent:"Billing Zip/Postal Code",inputId:"horizontal-form-element-id-07"},n.a.createElement(u.a,{id:"horizontal-form-element-id-07",defaultValue:"27215",required:!0}))),n.a.createElement("div",{className:"slds-size_2-of-6"},n.a.createElement(c.b,{labelContent:"Billing Country",inputId:"horizontal-form-element-id-08"},n.a.createElement(u.a,{id:"horizontal-form-element-id-08",defaultValue:"USA",required:!0})))))},{type:"address",label:"Shipping Address",value:["312 Constitution Place","Austin, TX 78767","USA"],link:!0,component:n.a.createElement(v,{labelContent:"Shipping Address",isAddress:!0,isEditing:!0,isStacked:!0},n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_1-of-1"},n.a.createElement(c.b,{labelContent:"Shipping Street",inputId:"horizontal-form-element-id-09"},n.a.createElement(b.a,{id:"horizontal-form-element-id-09",defaultValue:"312 Constitution Place"})))),n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_4-of-6"},n.a.createElement(c.b,{labelContent:"Shipping City",inputId:"horizontal-form-element-id-10"},n.a.createElement(u.a,{id:"horizontal-form-element-id-10",defaultValue:"Austin"}))),n.a.createElement("div",{className:"slds-size_2-of-6"},n.a.createElement(c.b,{labelContent:"Shipping State/Province",inputId:"horizontal-form-element-id-11"},n.a.createElement(u.a,{id:"horizontal-form-element-id-11",defaultValue:"TX"})))),n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_4-of-6"},n.a.createElement(c.b,{labelContent:"Shipping Zip/Postal Code",inputId:"horizontal-form-element-id-12"},n.a.createElement(u.a,{id:"horizontal-form-element-id-12",defaultValue:"78767"}))),n.a.createElement("div",{className:"slds-size_2-of-6"},n.a.createElement(c.b,{labelContent:"Shipping Country",inputId:"horizontal-form-element-id-13"},n.a.createElement(u.a,{id:"horizontal-form-element-id-13",defaultValue:"USA"})))))}]}]},k={rows:[{fields:[{type:"text",label:"Assigned To",value:"Jack Rogers",avatar:"/assets/images/avatar1.jpg",component:n.a.createElement(c.b,{isHorizontal:!0,inputId:"horizontal-form-element-id-01",labelContent:"Assigned To",isEditing:!0},n.a.createElement(u.a,{id:"horizontal-form-element-id-01",readOnly:!0,defaultValue:"Jack Rogers"}))},{type:"lookup",label:"Team Name",value:"Salesforce Lightning Design System",link:!0,component:n.a.createElement(_.b,{isHorizontal:!0,id:"horizontal-combobox-id-01",label:"Team Name","aria-controls":"horizontal-listbox-id-01",isEditing:!0,autocomplete:!0,inputIconPosition:"right",rightInputIcon:n.a.createElement(m.b,{className:"slds-input__icon slds-input__icon_right",symbol:"clear",title:"Clear the text input",assistiveText:"Clear the text input"}),results:n.a.createElement(z.e,{id:"horizontal-listbox-id-01",snapshot:{},type:"entity",count:2}),resultsType:"listbox",value:"Salesforce Lightning Design System"})}]},{fields:[{type:"text",label:"Account Name",value:"",isRequired:!0,component:n.a.createElement(c.b,{isRequired:!0,isHorizontal:!0,labelContent:"Account Name",inputId:"horizontal-form-element-id-02",isEditing:!0,hasError:!0,errorId:"horizontal-form-element-error-id-01",inlineMessage:"Complete this field"},n.a.createElement(u.a,{id:"horizontal-form-element-id-02",defaultValue:""}))},{type:"date",label:"SLA Expiration Date",value:"1/1/2018",component:n.a.createElement(c.b,{isHorizontal:!0,isEditing:!0,formElementClassName:"slds-dropdown-trigger slds-dropdown-trigger_click slds-is-open",labelContent:"Date",inputId:"horizontal-form-element-id-03",hasRightIcon:!0},n.a.createElement(u.a,{id:"horizontal-form-element-id-03",defaultValue:"1/1/2018"}),n.a.createElement(m.b,{className:"slds-input__icon slds-input__icon_right",symbol:"event",assistiveText:"Select a date",title:"Select a date"}))}]},{fields:[{type:"textarea",label:"Description",value:["Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod."],column:1,component:n.a.createElement(c.b,{isHorizontal:!0,labelContent:"Description",inputId:"horizontal-form-element-id-14",isEditing:!0,column:1},n.a.createElement(b.a,{id:"horizontal-form-element-id-14",defaultValue:"Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod."}))}]}]},I={rows:[{fields:[{type:"text",label:"Assigned To",value:"Jack Rogers",avatar:"/assets/images/avatar1.jpg",isRequired:!0,link:!0,column:1,component:n.a.createElement(c.b,{inputId:"form-element-id-01",labelContent:"Assigned To",isRequired:!0,isEditing:!0},n.a.createElement(u.a,{id:"form-element-id-01",readOnly:!0,defaultValue:"Jack Rogers",required:!0}))}]},{fields:[{type:"lookup",label:"Team Name",value:"Salesforce Lightning Design System",link:!0,column:1,component:n.a.createElement(_.b,{id:"combobox-id-01",label:"Team Name","aria-controls":"listbox-id-01",autocomplete:!0,inputIconPosition:"right",rightInputIcon:n.a.createElement(m.b,{className:"slds-input__icon slds-input__icon_right",symbol:"clear",title:"Clear the text input",assistiveText:"Clear the text input"}),results:n.a.createElement(z.e,{id:"listbox-id-01",snapshot:{},type:"entity",count:2}),resultsType:"listbox",value:"Salesforce Lightning Design System"})}]},{fields:[{type:"checkbox",label:"Security Assessment Required?",value:n.a.createElement(x.a,{symbol:"steps",size:"x-small",useCurrentColor:!0,assistiveText:"False",title:"False"}),column:1,component:n.a.createElement(S.a,{labelContent:"Security Assessment Required?",isEditing:!0})}]},{fields:[{type:"picklist",label:"Status",column:1,component:n.a.createElement(_.b,{id:"combobox-id-02",label:"Status","aria-controls":"listbox-id-02",readonly:!0,inputIconPosition:"right",rightInputIcon:n.a.createElement(x.a,{symbol:"down",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right",assistiveText:!1,title:!1}),results:n.a.createElement(z.e,{id:"listbox-id-02",snapshot:{},type:"plain",count:2,visualSelection:!0}),resultsType:"listbox"})}]},{fields:[{type:"text",label:"Reference Image",value:"The URL for the image is https://www.google.com/imgres?imgurl=https%3A%2F%2Fis1-ssl.mzstatic.com%2Fimage%2Fthumb%2FPurple128%2Fv4%2F50%2F98%2Fb6%2F5098b62e-b26d-6d0e-bda4-26a85c42fe1f%2FAppIcon-1x_U007emarketing-0-0-GLES2_U002c0-512MB-sRGB-0-0-0-85-220-0-0-0-3.png%2F246x0w.jpg&imgrefurl=https%3A%2F%2Fitunes.apple.com%2Fus%2Fapp%2Fflower%2Fid1279174518%3Fmt%3D8&docid=2fZCCC_Ugr43lM&tbnid=9soMHOA780_ooM%3A&vet=10ahUKEwiJzc206-PcAhVYIjQIHcJsB3YQMwjxASgAMAA..i&w=246&h=246&bih=1320&biw=1280&q=flower&ved=0ahUKEwiJzc206-PcAhVYIjQIHcJsB3YQMwjxASgAMAA&iact=mrc&uact=8",column:1,component:n.a.createElement(c.b,{labelContent:"Reference Image",inputId:"form-element-id-15",isStacked:!0,isEditing:!0},n.a.createElement(b.a,{id:"form-element-id-15",defaultValue:"The URL for the image is https://www.google.com/imgres?imgurl=https%3A%2F%2Fis1-ssl.mzstatic.com%2Fimage%2Fthumb%2FPurple128%2Fv4%2F50%2F98%2Fb6%2F5098b62e-b26d-6d0e-bda4-26a85c42fe1f%2FAppIcon-1x_U007emarketing-0-0-GLES2_U002c0-512MB-sRGB-0-0-0-85-220-0-0-0-3.png%2F246x0w.jpg&imgrefurl=https%3A%2F%2Fitunes.apple.com%2Fus%2Fapp%2Fflower%2Fid1279174518%3Fmt%3D8&docid=2fZCCC_Ugr43lM&tbnid=9soMHOA780_ooM%3A&vet=10ahUKEwiJzc206-PcAhVYIjQIHcJsB3YQMwjxASgAMAA..i&w=246&h=246&bih=1320&biw=1280&q=flower&ved=0ahUKEwiJzc206-PcAhVYIjQIHcJsB3YQMwjxASgAMAA&iact=mrc&uact=8"}))}]},{fields:[{type:"richtext",label:"Rich Text Output",column:1,value:n.a.createElement("div",{className:"slds-rich-text-editor__output"},n.a.createElement("p",null,"Here's a big image"),n.a.createElement("p",null,n.a.createElement("img",{src:"/assets/images/themes/oneSalesforce/banner-group-public-default.png",alt:""})))}]},{fields:[{type:"text",label:"SLA Serial Number",value:"5367",hasTooltip:!0,column:1,component:n.a.createElement(c.b,{labelContent:"SLA Serial Number",inputId:"form-element-id-02",hasTooltip:!0,isEditing:!0},n.a.createElement(u.a,{id:"form-element-id-02",defaultValue:"5367"}))}]},{fields:[{type:"date",label:"SLA Expiration Date",value:"1/1/2018",column:1,component:n.a.createElement(c.b,{formElementClassName:"slds-dropdown-trigger slds-dropdown-trigger_click slds-is-open",labelContent:"Date",inputId:"form-element-id-03",hasRightIcon:!0},n.a.createElement(u.a,{id:"form-element-id-03",defaultValue:"1/1/2018"}),n.a.createElement(m.b,{className:"slds-input__icon slds-input__icon_right",symbol:"event",assistiveText:"Select a date",title:"Select a date"}))}]},{fields:[{type:"location",label:"Location",value:"10.283, 54.293",column:1,component:n.a.createElement(v,{labelContent:"Location",isEditing:!0,isHorizontal:!0},n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_1-of-2"},n.a.createElement(c.b,{labelContent:"Longitude",inputId:"location-longitude-01"},n.a.createElement(u.a,{id:"location-longitude-01",defaultValue:"10.283"}))),n.a.createElement("div",{className:"slds-size_1-of-2"},n.a.createElement(c.b,{labelContent:"Latitude",inputId:"location-latitude-01"},n.a.createElement(u.a,{id:"location-latitude-01",defaultValue:"54.293"})))))}]},{fields:[{type:"multiselect",label:"Selected Languages",value:"Arabic, Chinese, English, German",column:1,component:n.a.createElement(C.j,{dataSet:C.b,isResponsive:!0})}]},{fields:[{type:"address",label:"Billing Address",value:["525 S. Lexington Ave","Burlington, NC 27215","USA"],link:!0,isRequired:!0,hasTooltip:!0,column:1,component:n.a.createElement(v,{labelContent:"Billing Address",isAddress:!0,isEditing:!0,isRequired:!0,hasTooltip:!0,isStacked:!0},n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_1-of-1"},n.a.createElement(c.b,{labelContent:"Billing Street",inputId:"form-element-id-04"},n.a.createElement(b.a,{id:"form-element-id-04",defaultValue:"525 S. Lexington Ave",required:!0})))),n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_4-of-6"},n.a.createElement(c.b,{labelContent:"Billing City",inputId:"form-element-id-05"},n.a.createElement(u.a,{id:"form-element-id-05",defaultValue:"Burlington",required:!0}))),n.a.createElement("div",{className:"slds-size_2-of-6"},n.a.createElement(c.b,{labelContent:"Billing State/Province",inputId:"form-element-id-06"},n.a.createElement(u.a,{id:"form-element-id-06",defaultValue:"NC",required:!0})))),n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_4-of-6"},n.a.createElement(c.b,{labelContent:"Billing Zip/Postal Code",inputId:"form-element-id-07"},n.a.createElement(u.a,{id:"form-element-id-07",defaultValue:"27215",required:!0}))),n.a.createElement("div",{className:"slds-size_2-of-6"},n.a.createElement(c.b,{labelContent:"Billing Country",inputId:"form-element-id-08"},n.a.createElement(u.a,{id:"form-element-id-08",defaultValue:"USA",required:!0})))))}]},{fields:[{type:"address",label:"Shipping Address",value:["312 Constitution Place","Austin, TX 78767","USA"],link:!0,column:1,component:n.a.createElement(v,{labelContent:"Shipping Address",isAddress:!0,isEditing:!0,isStacked:!0},n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_1-of-1"},n.a.createElement(c.b,{labelContent:"Shipping Street",inputId:"form-element-id-09"},n.a.createElement(b.a,{id:"form-element-id-09",defaultValue:"312 Constitution Place"})))),n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_4-of-6"},n.a.createElement(c.b,{labelContent:"Shipping City",inputId:"form-element-id-10"},n.a.createElement(u.a,{id:"form-element-id-10",defaultValue:"Austin"}))),n.a.createElement("div",{className:"slds-size_2-of-6"},n.a.createElement(c.b,{labelContent:"Shipping State/Province",inputId:"form-element-id-11"},n.a.createElement(u.a,{id:"form-element-id-11",defaultValue:"TX"})))),n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_4-of-6"},n.a.createElement(c.b,{labelContent:"Shipping Zip/Postal Code",inputId:"form-element-id-12"},n.a.createElement(u.a,{id:"form-element-id-12",defaultValue:"78767"}))),n.a.createElement("div",{className:"slds-size_2-of-6"},n.a.createElement(c.b,{labelContent:"Shipping Country",inputId:"form-element-id-13"},n.a.createElement(u.a,{id:"form-element-id-13",defaultValue:"USA"})))))}]},{fields:[{type:"textarea",label:"Description",value:["Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod."],column:1,component:n.a.createElement(c.b,{labelContent:"Description",inputId:"form-element-id-14",isStacked:!0,isEditing:!0},n.a.createElement(b.a,{id:"form-element-id-14",defaultValue:"Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod."}))}]}]},N={rows:[{fields:[{type:"text",label:"Assigned To",value:"Jack Rogers",avatar:"/assets/images/avatar1.jpg",isRequired:!0,link:!0,component:n.a.createElement(c.b,{inputId:"form-element-id-01",labelContent:"Assigned To",isRequired:!0,isEditing:!0},n.a.createElement(u.a,{id:"form-element-id-01",readOnly:!0,defaultValue:"Jack Rogers",required:!0}))},{type:"lookup",label:"Team Name",value:"Salesforce Lightning Design System",link:!0,component:n.a.createElement(_.b,{id:"combobox-id-01",label:"Team Name","aria-controls":"listbox-id-01",autocomplete:!0,isEditing:!0,inputIconPosition:"right",rightInputIcon:n.a.createElement(m.b,{className:"slds-input__icon slds-input__icon_right",symbol:"clear",title:"Clear the text input",assistiveText:"Clear the text input"}),results:n.a.createElement(z.e,{id:"listbox-id-01",snapshot:{},type:"entity",count:2}),resultsType:"listbox",value:"Salesforce Lightning Design System"})}]},{fields:[{type:"checkbox",label:"Security Assessment Required?",value:"False",component:n.a.createElement(S.a,{labelContent:"Security Assessment Required?",isEditing:!0})},{type:"picklist",label:"Status",component:n.a.createElement(_.b,{id:"combobox-id-02",label:"Status",value:"In Progress","aria-controls":"listbox-id-02",readonly:!0,isEditing:!0,inputIconPosition:"right",rightInputIcon:n.a.createElement(x.a,{symbol:"down",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right",assistiveText:!1,title:!1}),results:n.a.createElement(z.e,{id:"listbox-id-02",snapshot:{},type:"plain",count:2,visualSelection:!0}),resultsType:"listbox"})}]},{fields:[{type:"checkbox-group",label:"Personalization Settings",value:"Disable end user personalization",component:n.a.createElement(c.a,{label:"App Personalization Settings",isEditing:!0},n.a.createElement(p.a,{label:"Disable end user personalization",name:"default",checked:!0}),n.a.createElement(p.a,{label:"Don't automatically create temporary tabs",name:"default"}))},{type:"",label:"",value:""}]},{fields:[{type:"text",label:"SLA Serial Number",value:"5367",hasTooltip:!0,component:n.a.createElement(c.b,{labelContent:"SLA Serial Number",inputId:"form-element-id-02",hasTooltip:!0,isEditing:!0},n.a.createElement(u.a,{id:"form-element-id-02",defaultValue:"5367"}))},{type:"date",label:"SLA Expiration Date",value:"1/1/2018",component:n.a.createElement(c.b,{formElementClassName:"slds-dropdown-trigger slds-dropdown-trigger_click slds-is-open",labelContent:"Date",inputId:"form-element-id-03",hasRightIcon:!0,isEditing:!0},n.a.createElement(u.a,{id:"form-element-id-03",defaultValue:"1/1/2018"}),n.a.createElement(m.b,{className:"slds-input__icon slds-input__icon_right",symbol:"event",assistiveText:"Select a date",title:"Select a date"}))}]},{fields:[{type:"location",label:"Location",value:"10.283, 54.293",component:n.a.createElement(c.a,{label:"Location",isEditing:!0,hasCompoundFields:!0,isDeprecated:!0},n.a.createElement("div",{className:"slds-form-element__group"},n.a.createElement("div",{className:"slds-form-element__row"},n.a.createElement(c.b,{formElementClassName:"slds-size_1-of-2",labelContent:"Longitude",inputId:"location-longitude-01"},n.a.createElement(u.a,{id:"location-longitude-01",defaultValue:"10.283"})),n.a.createElement(c.b,{formElementClassName:"slds-size_1-of-2",labelContent:"Latitude",inputId:"location-latitude-01"},n.a.createElement(u.a,{id:"location-latitude-01",defaultValue:"54.293"})))))},{type:"multiselect",label:"Selected Languages",value:"Arabic, Chinese, English, German",component:n.a.createElement(C.j,{isEditing:!0,dataSet:C.b,isResponsive:!0,isStacked:!0})}]},{fields:[{type:"address",label:"Billing Address",value:["525 S. Lexington Ave","Burlington, NC 27215","USA"],link:!0,isRequired:!0,hasTooltip:!0,component:n.a.createElement(c.a,{label:"Billing Address",isRequired:!0,isEditing:!0,isStacked:!0,isAddress:!0,hasTooltip:!0,hasCompoundFields:!0,isDeprecated:!0},n.a.createElement("div",{className:"slds-form-element__group"},n.a.createElement("div",{className:"slds-form-element__row"},n.a.createElement(c.b,{formElementClassName:"slds-size_1-of-1",labelContent:"Billing Street",inputId:"form-element-id-04"},n.a.createElement(b.a,{id:"form-element-id-04",defaultValue:"525 S. Lexington Ave",required:!0}))),n.a.createElement("div",{className:"slds-form-element__row"},n.a.createElement(c.b,{formElementClassName:"slds-size_4-of-6",labelContent:"Billing City",inputId:"form-element-id-05"},n.a.createElement(u.a,{id:"form-element-id-05",defaultValue:"Burlington",required:!0})),n.a.createElement(c.b,{formElementClassName:"slds-size_2-of-6",labelContent:"Billing State/Province",inputId:"form-element-id-06"},n.a.createElement(u.a,{id:"form-element-id-06",defaultValue:"NC",required:!0}))),n.a.createElement("div",{className:"slds-form-element__row"},n.a.createElement(c.b,{formElementClassName:"slds-size_4-of-6",labelContent:"Billing Zip/Postal Code",inputId:"form-element-id-07"},n.a.createElement(u.a,{id:"form-element-id-07",defaultValue:"27215",required:!0})),n.a.createElement(c.b,{formElementClassName:"slds-size_2-of-6",labelContent:"Billing Country",inputId:"form-element-id-08"},n.a.createElement(u.a,{id:"form-element-id-08",defaultValue:"USA",required:!0})))))},{type:"address",label:"Shipping Address",value:["312 Constitution Place","Austin, TX 78767","USA"],link:!0,component:n.a.createElement(c.a,{label:"Shipping Address",isEditing:!0,isStacked:!0,isAddress:!0,hasCompoundFields:!0,isDeprecated:!0},n.a.createElement("div",{className:"slds-form-element__group"},n.a.createElement("div",{className:"slds-form-element__row"},n.a.createElement(c.b,{formElementClassName:"slds-size_1-of-1",labelContent:"Shipping Street",inputId:"form-element-id-09"},n.a.createElement(b.a,{id:"form-element-id-09",defaultValue:"312 Constitution Place"}))),n.a.createElement("div",{className:"slds-form-element__row"},n.a.createElement(c.b,{formElementClassName:"slds-size_4-of-6",labelContent:"Shipping City",inputId:"form-element-id-10"},n.a.createElement(u.a,{id:"form-element-id-10",defaultValue:"Austin"})),n.a.createElement(c.b,{formElementClassName:"slds-size_2-of-6",labelContent:"Shipping State/Province",inputId:"form-element-id-11"},n.a.createElement(u.a,{id:"form-element-id-11",defaultValue:"TX"}))),n.a.createElement("div",{className:"slds-form-element__row"},n.a.createElement(c.b,{formElementClassName:"slds-size_4-of-6",labelContent:"Shipping Zip/Postal Code",inputId:"form-element-id-12"},n.a.createElement(u.a,{id:"form-element-id-12",defaultValue:"78767"})),n.a.createElement(c.b,{formElementClassName:"slds-size_2-of-6",labelContent:"Shipping Country",inputId:"form-element-id-13"},n.a.createElement(u.a,{id:"form-element-id-13",defaultValue:"USA"})))))}]},{fields:[{type:"textarea",label:"Description",value:["Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod."],column:1,component:n.a.createElement(c.b,{labelContent:"Description",inputId:"form-element-id-14",isStacked:!0,isEditing:!0,column:1},n.a.createElement(b.a,{id:"form-element-id-14",defaultValue:"Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod."}))}]}]},q=("".concat("Stacked"," - Default"),"".concat("Stacked"),y.c,"".concat("Stacked"," - Edit Mode"),"".concat("Stacked"),y.c,[{id:"stacked-single-column",label:"".concat("Stacked"," - 1 column Read Only"),context:"".concat("Stacked"),element:n.a.createElement(y.c,{direction:"stacked",snapshot:I,isViewMode:!0})},{id:"stacked-single-column-in-narrow-container",label:"".concat("Stacked"," - 1 column - In narrow container"),context:"".concat("Stacked"),demoStyles:"max-width: 280px;",storybookStyles:!0,element:n.a.createElement(y.c,{direction:"stacked",snapshot:w})},{id:"deprecated-view-stacked",label:"".concat("Stacked"," - View Mode (Deprecated)"),context:"Deprecated",element:n.a.createElement(y.c,{direction:"stacked",snapshot:N,isViewMode:!0,hasInlineEdit:!0,isDeprecated:!0})},{id:"deprecated-edit-stacked",label:"Deprecated - Stacked form layout - Edit Mode",context:"Deprecated",element:n.a.createElement(y.c,{direction:"stacked",snapshot:N,isDeprecated:!0})},{id:"simple-stacked",label:"".concat("Stacked"," - Simple form layout"),context:"".concat("Stacked"),element:n.a.createElement("div",{className:"slds-form"},n.a.createElement(c.b,{labelContent:"Text Input",inputId:"stacked-input-id-01",isStacked:!0},n.a.createElement(u.a,{id:"stacked-input-id-01",placeholder:"Placeholder text…"})),n.a.createElement(c.b,{labelContent:"Textarea Input",inputId:"stacked-input-id-02",isStacked:!0},n.a.createElement(b.a,{id:"stacked-input-id-02",placeholder:"Placeholder text…"})),n.a.createElement(c.a,{label:"Checkbox Group Label",isStacked:!0},n.a.createElement(p.a,{label:"All opportunities owned by you",name:"default"}),n.a.createElement(p.a,{label:"All contacts in the account owned by you",name:"default"})),n.a.createElement(c.a,{label:"Radio Group Label",isStacked:!0},n.a.createElement(f.c,{label:"Lead generation",name:"options"}),n.a.createElement(f.c,{label:"Education leads",name:"options"})))},{id:"stacked",label:"".concat("Stacked"," - View Mode"),context:"".concat("Stacked"),element:n.a.createElement(y.c,{direction:"stacked",snapshot:w,isViewMode:!0,hasInlineEdit:!0})}]),j=("".concat("Horizontal"," - Default"),"".concat("Horizontal"),y.c,[{id:"edit-horizontal",label:"".concat("Horizontal"," - Edit Mode"),context:"".concat("Horizontal"),element:n.a.createElement(y.c,{direction:"horizontal",snapshot:A})},{id:"form-element-horizontal-edit-error",label:"".concat("Horizontal"," - (Edit Mode with Error)"),context:"".concat("Horizontal"),element:n.a.createElement(y.c,{direction:"horizontal",snapshot:k})}]),T=[{id:"horizontal-single-column",label:"".concat("Horizontal"," - 1 column - Read Only Mode"),context:"".concat("Horizontal"),element:n.a.createElement(y.c,{direction:"horizontal",snapshot:I,isViewMode:!0})},{id:"deprecated-view-horizontal",label:"".concat("Horizontal"," - View Mode (Deprecated)"),context:"Deprecated",element:n.a.createElement(y.c,{direction:"horizontal",snapshot:N,isViewMode:!0,hasInlineEdit:!0,isDeprecated:!0})},{id:"deprecated-edit-horizontal",label:"".concat("Horizontal"," - Edit Mode (Deprecated)"),context:"Deprecated",element:n.a.createElement(y.c,{direction:"horizontal",snapshot:N,isDeprecated:!0})},{id:"simple-horizontal",label:"".concat("Horizontal"," - Simple form layout"),context:"".concat("Horizontal"),element:n.a.createElement("div",{className:"slds-form"},n.a.createElement(c.b,{labelContent:"Text Input",inputId:"horizontal-input-id-01",isHorizontal:!0},n.a.createElement(u.a,{id:"horizontal-input-id-01",placeholder:"Placeholder text…"})),n.a.createElement(c.b,{labelContent:"Textarea Input",inputId:"horizontal-input-id-02",isHorizontal:!0},n.a.createElement(b.a,{id:"horizontal-input-id-02",placeholder:"Placeholder text…"})),n.a.createElement(c.a,{label:"Checkbox Group Label",isHorizontal:!0},n.a.createElement(p.a,{label:"All opportunities owned by you",name:"default"}),n.a.createElement(p.a,{label:"All contacts in the account owned by you",name:"default"})),n.a.createElement(c.a,{label:"Radio Group Label",isHorizontal:!0},n.a.createElement(f.c,{label:"Lead generation",name:"options"}),n.a.createElement(f.c,{label:"Education leads",name:"options"})))},{id:"horizontal",label:"".concat("Horizontal"," - View Mode"),element:n.a.createElement(y.c,{direction:"horizontal",snapshot:A,isViewMode:!0,hasInlineEdit:!0})}],O=function(e){var t=e.hasTooltip,a=e.isRequired;return n.a.createElement(n.a.Fragment,null,n.a.createElement(c.a,{hasCompoundFields:!0,hasTooltip:t,isRequired:a,isDeprecated:!0,label:"Location"},n.a.createElement("div",{className:"slds-form-element__group"},n.a.createElement("div",{className:"slds-form-element__row"},n.a.createElement(c.b,{formElementClassName:"slds-size_1-of-2",labelContent:"Latitude",inputId:"input-10"},n.a.createElement(u.a,{id:"input-10"})),n.a.createElement(c.b,{formElementClassName:"slds-size_1-of-2",labelContent:"Longitude",inputId:"input-11"},n.a.createElement(u.a,{id:"input-11"}))))),n.a.createElement(c.a,{hasCompoundFields:!0,label:"Shipping Address",isAddress:!0,isDeprecated:!0},n.a.createElement("div",{className:"slds-form-element__group"},n.a.createElement("div",{className:"slds-form-element__row"},n.a.createElement(c.b,{formElementClassName:"slds-size_1-of-1",labelContent:"Shipping Street",inputId:"input-12"},n.a.createElement(u.a,{id:"input-12"}))),n.a.createElement("div",{className:"slds-form-element__row"},n.a.createElement(c.b,{formElementClassName:"slds-size_4-of-6",labelContent:"Shipping City",inputId:"input-13"},n.a.createElement(u.a,{id:"input-13"})),n.a.createElement(c.b,{formElementClassName:"slds-size_2-of-6",labelContent:"Shipping State/Province",inputId:"input-14"},n.a.createElement(u.a,{id:"input-14",defaultValue:"MT"}))),n.a.createElement("div",{className:"slds-form-element__row"},n.a.createElement(c.b,{formElementClassName:"slds-size_4-of-6",labelContent:"Shipping Zip/Postal Code",inputId:"input-15"},n.a.createElement(u.a,{id:"input-15"})),n.a.createElement(c.b,{formElementClassName:"slds-size_2-of-6",labelContent:"Shipping Country",inputId:"input-16"},n.a.createElement(u.a,{id:"input-16",defaultValue:"Canada"}))))))};O.propTypes={hasTooltip:E.a.bool,isRequired:E.a.bool};var V=[{id:"compound-default",label:"".concat("Compound"," - Default"),context:"".concat("Compound"),element:n.a.createElement(v,{labelContent:"Location"},n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_1-of-2"},n.a.createElement(c.b,{labelContent:"Latitude",inputId:"input-01"},n.a.createElement(u.a,{id:"input-01"}))),n.a.createElement("div",{className:"slds-size_1-of-2"},n.a.createElement(c.b,{labelContent:"Longitude",inputId:"input-02"},n.a.createElement(u.a,{id:"input-02"})))))}],L=("".concat("Compound"," - Required"),"".concat("Compound"),c.b,u.a,c.b,u.a,"".concat("Compound"," - Help text icon with tooltip"),"".concat("Compound"),c.b,u.a,c.b,u.a,"".concat("Compound"," - Error"),"".concat("Compound"),c.b,u.a,c.b,u.a,"".concat("Compound"," - Form Layout (Required)"),"".concat("Compound"),"".concat("Compound"," - Form Layout (Required with Tooltip Help)"),"".concat("Compound"),c.a,c.b,u.a,c.b,u.a,"".concat("Compound"," - Form Layout"),"".concat("Compound"),[{id:"address-default",label:"".concat("Address"," - Default"),context:"".concat("Address"),element:n.a.createElement(v,{labelContent:"Billing Address",isAddress:!0},n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_1-of-1"},n.a.createElement(c.b,{labelContent:"Billing Street",inputId:"form-element-id-01"},n.a.createElement(b.a,{id:"form-element-id-01",defaultValue:"525 S. Lexington Ave",required:!0})))),n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_4-of-6"},n.a.createElement(c.b,{labelContent:"Billing City",inputId:"form-element-id-02"},n.a.createElement(u.a,{id:"form-element-id-02",defaultValue:"Burlington",required:!0}))),n.a.createElement("div",{className:"slds-size_2-of-6"},n.a.createElement(c.b,{labelContent:"Billing State/Province",inputId:"form-element-id-03"},n.a.createElement(u.a,{id:"form-element-id-03",defaultValue:"NC",required:!0})))),n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_4-of-6"},n.a.createElement(c.b,{labelContent:"Billing Zip/Postal Code",inputId:"form-element-id-04"},n.a.createElement(u.a,{id:"form-element-id-04",defaultValue:"27215",required:!0}))),n.a.createElement("div",{className:"slds-size_2-of-6"},n.a.createElement(c.b,{labelContent:"Billing Country",inputId:"form-element-id-05"},n.a.createElement(u.a,{id:"form-element-id-05",defaultValue:"USA",required:!0})))))},{id:"help-text",label:"".concat("Address"," - Help text icon with tooltip"),context:"".concat("Address"),element:n.a.createElement(v,{labelContent:"Billing Address",isAddress:!0,hasTooltip:!0},n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_1-of-1"},n.a.createElement(c.b,{labelContent:"Billing Street",inputId:"form-element-id-06"},n.a.createElement(b.a,{id:"form-element-id-06",defaultValue:"525 S. Lexington Ave",required:!0})))),n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_4-of-6"},n.a.createElement(c.b,{labelContent:"Billing City",inputId:"form-element-id-07"},n.a.createElement(u.a,{id:"form-element-id-07",defaultValue:"Burlington",required:!0}))),n.a.createElement("div",{className:"slds-size_2-of-6"},n.a.createElement(c.b,{labelContent:"Billing State/Province",inputId:"form-element-id-08"},n.a.createElement(u.a,{id:"form-element-id-08",defaultValue:"NC",required:!0})))),n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_4-of-6"},n.a.createElement(c.b,{labelContent:"Billing Zip/Postal Code",inputId:"form-element-id-09"},n.a.createElement(u.a,{id:"form-element-id-09",defaultValue:"27215",required:!0}))),n.a.createElement("div",{className:"slds-size_2-of-6"},n.a.createElement(c.b,{labelContent:"Billing Country",inputId:"form-element-id-10"},n.a.createElement(u.a,{id:"form-element-id-10",defaultValue:"USA",required:!0})))))}]),F=("".concat("Address"," - Required"),"".concat("Address"),c.b,b.a,c.b,u.a,c.b,u.a,c.b,u.a,c.b,u.a,"".concat("Address"," - Error"),"".concat("Address"),c.b,b.a,c.b,u.a,c.b,u.a,c.b,u.a,c.b,u.a,a(1)),P=a(39),R=i.c.a,D=i.c.code,H=i.c.em,M=i.c.h2,B=i.c.h3,U=i.c.h4,J=i.c.h5,Z=i.c.p,G=i.c.strong,W=function(){return Object(l.createElement)(i.b,{},Object(l.createElement)("div",{className:"doc lead"},"A Form Element contains an HTML input element paired with a label."),Object(l.createElement)(o.a,{exampleOnly:!0},Object(l.createElement)(c.b,{labelContent:"Form Label",inputId:"form-element-showcase-01",isRequired:!0},Object(l.createElement)(u.a,{id:"form-element-showcase-01",placeholder:"Placeholder text…",required:!0}))),M({id:"About-Form-Elements"},"About Form Elements"),Z({},"The Form Element is initialized with ",D({},"slds-form-element")," and is made up of three primary pieces; a label (",D({},"slds-form-element__label"),"), a form control container (",D({},"slds-form-element__control"),"), and a form input element, i.e. ",D({},"<input>"),"."),B({id:"Form-Label"},"Form Label"),Z({},"A form label should use either the ",D({},"<label>")," or ",D({},"<legend>")," elements with the class ",D({},"slds-form-element__label"),". Use ",D({},"<legend>")," when you have a ",R({href:"/components/form-element/#Compound"},"compound form"),"."),Object(l.createElement)(s.a,{toggleCode:!1},Object(l.createElement)("label",{className:"slds-form-element__label",htmlFor:"unique-id-of-input"},"Form label")),B({id:"Form-Control"},"Form Control"),Z({},"A form control is a ",D({},"div")," with the class ",D({},"slds-form-element__control"),". The control is required to maintain the structure of the Form Element."),Object(l.createElement)(s.a,{toggleCode:!1},Object(l.createElement)("div",{className:"slds-form-element__control"},"Any form type goes here")),B({id:"Form-Input-Elements"},"Form Input Elements"),Z({},"There are many types of input elements that can be used in the Form Element, including ",R({href:"/components/input"},"inputs"),", ",R({href:"/components/textarea"},"text areas"),", ",R({href:"/components/checkbox"},"checkboxes"),", and ",R({href:"/components/radio-group"},"radio buttons"),". Visit the individual component pages for in-depth details of their specific states and visuals."),B({id:"Accessibility"},"Accessibility"),Z({},"Labels must have the ",D({},"for")," attribute applied, and its value must match the ID of the associated form element, like ",D({},'<input id="unique-id-of-input" />'),". This association ensures that assistive technology informs users about what information to enter where."),B({id:"Mobile"},"Mobile"),Object(l.createElement)(P.a,{patternSpecificText:"form elements will have an increased size of label and info icon"}),Object(l.createElement)(o.a,{frameOnly:!0,frameTitle:"Example mobile styles for form elements"},Object(l.createElement)(c.b,{labelContent:"Form Label",inputId:"form-element-showcase-01",isRequired:!0},Object(l.createElement)(u.a,{id:"form-element-showcase-01",placeholder:"Placeholder text…",required:!0}))),M({id:"Base"},"Base"),Object(l.createElement)(r.a,{title:"Form Element - Base"},Object(l.createElement)(o.a,null,Object(l.createElement)(c.b,{labelContent:"Form Label",inputId:"form-element-01"},Object(l.createElement)(u.a,{id:"form-element-01",placeholder:"Placeholder text…"})))),M({id:"States"},"States"),B({id:"View-ModeStatic"},"View Mode/Static"),Z({},"If a form element requires a view mode or static state, instead of ",D({},"slds-form-element__label")," being a ",D({},"<label>")," element, we want to change the element to a ",D({},"<span>"),". This is because the form is no longer a form but a statically read name and value pair."),Z({},"The string inside of ",D({},"slds-form-element__control")," needs to be wrapped in a ",D({},"<div>")," as well, with the class ",D({},"slds-form-element__static")," applied to it."),Z({},"In addition to the structural changes — if the form element is standalone, you can ",H({},"optionally")," apply ",D({},"slds-form-element__readonly"),". The class will help spacing and separation between o