@salesforce-ux/design-system
Version:
Salesforce Lightning Design System
1 lines • 80 kB
JavaScript
var SLDS=SLDS||{};SLDS["__internal/chunked/docs/ui/components/form-element/docs.mdx.js"]=function(e){function t(t){for(var a,o,d=t[0],r=t[1],s=t[2],u=0,c=[];u<d.length;u++)o=d[u],n[o]&&c.push(n[o][0]),n[o]=0;for(a in r)Object.prototype.hasOwnProperty.call(r,a)&&(e[a]=r[a]);for(m&&m(t);c.length;)c.shift()();return i.push.apply(i,s||[]),l()}function l(){for(var e,t=0;t<i.length;t++){for(var l=i[t],a=!0,d=1;d<l.length;d++){var r=l[d];0!==n[r]&&(a=!1)}a&&(i.splice(t--,1),e=o(o.s=l[0]))}return e}var a={},n={17:0},i=[];function o(t){if(a[t])return a[t].exports;var l=a[t]={i:t,l:!1,exports:{}};return e[t].call(l.exports,l,l.exports,o),l.l=!0,l.exports}o.m=e,o.c=a,o.d=function(e,t,l){o.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:l})},o.r=function(e){Object.defineProperty(e,"__esModule",{value:!0})},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 d=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs||[],r=d.push.bind(d);d.push=t,d=d.slice();for(var s=0;s<d.length;s++)t(d[s]);var m=r;return i.push([246,0]),l()}({0:function(e,t){e.exports=React},22:function(e,t,l){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.states=t.Textarea=void 0;var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var l=arguments[t];for(var a in l)Object.prototype.hasOwnProperty.call(l,a)&&(e[a]=l[a])}return e},n=d(l(0)),i=d(l(1)),o=l(13);function d(e){return e&&e.__esModule?e:{default:e}}var r="textarea-id-01",s=t.Textarea=function(e){return n.default.createElement("textarea",a({},e,{id:e.id||r,className:(0,i.default)("slds-textarea",e.className),placeholder:e.placeholder||"Placeholder Text"}))};t.default=n.default.createElement(o.FormElement,{labelContent:"Textarea Label",inputId:r},n.default.createElement(s,{id:r}));t.states=[{id:"disabled",label:"Disabled",element:n.default.createElement(o.FormElement,{labelContent:"Textarea Label",inputId:r},n.default.createElement(s,{id:r,disabled:!0}))},{id:"required",label:"Required",element:n.default.createElement(o.FormElement,{labelContent:"Textarea Label",inputId:r,isRequired:!0},n.default.createElement(s,{id:r,required:!0}))},{id:"error",label:"Error",element:n.default.createElement(o.FormElement,{hasError:!0,labelContent:"Textarea Label",inputId:r,isRequired:!0,errorId:"error-01",inlineMessage:"This field is required"},n.default.createElement(s,{id:r,required:!0,"aria-describedby":"error-01"}))},{id:"read-only",label:"Read only",element:n.default.createElement(o.SimpleFormElementWrapper,null,n.default.createElement("span",{className:"slds-form-element__label"},"Textarea Label"),n.default.createElement(o.FormElementControl,{className:"slds-border_bottom"},n.default.createElement("div",{className:"slds-form-element__static"},n.default.createElement("p",null,"Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Maecenas sed diam eget risus varius blandit sit amet non magna. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu leo. Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla. Maecenas faucibus mollis interdum."))))}]},240:function(e,t,l){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.states=void 0;var a=function(e){return e&&e.__esModule?e:{default:e}}(l(0)),n=l(32),i=l(13),o=l(16),d=l(22);t.default=a.default.createElement(n.CompoundFormElement,{labelContent:"Billing Address",isAddress:!0},a.default.createElement(n.CompoundFormRow,null,a.default.createElement("div",{className:"slds-size_1-of-1"},a.default.createElement(i.FormElement,{labelContent:"Billing Street",inputId:"form-element-id-04"},a.default.createElement(d.Textarea,{id:"form-element-id-04",defaultValue:"525 S. Lexington Ave",required:!0})))),a.default.createElement(n.CompoundFormRow,null,a.default.createElement("div",{className:"slds-size_4-of-6"},a.default.createElement(i.FormElement,{labelContent:"Billing City",inputId:"form-element-id-05"},a.default.createElement(o.Input,{id:"form-element-id-05",defaultValue:"Burlington",required:!0}))),a.default.createElement("div",{className:"slds-size_2-of-6"},a.default.createElement(i.FormElement,{labelContent:"Billing State/Province",inputId:"form-element-id-06"},a.default.createElement(o.Input,{id:"form-element-id-06",defaultValue:"NC",required:!0})))),a.default.createElement(n.CompoundFormRow,null,a.default.createElement("div",{className:"slds-size_4-of-6"},a.default.createElement(i.FormElement,{labelContent:"Billing Zip/Postal Code",inputId:"form-element-id-07"},a.default.createElement(o.Input,{id:"form-element-id-07",defaultValue:"27215",required:!0}))),a.default.createElement("div",{className:"slds-size_2-of-6"},a.default.createElement(i.FormElement,{labelContent:"Billing Country",inputId:"form-element-id-08"},a.default.createElement(o.Input,{id:"form-element-id-08",defaultValue:"USA",required:!0})))));t.states=[{id:"required",label:"Required",element:a.default.createElement(n.CompoundFormElement,{labelContent:"Billing Address",isAddress:!0,isRequired:!0},a.default.createElement(n.CompoundFormRow,null,a.default.createElement("div",{className:"slds-size_1-of-1"},a.default.createElement(i.FormElement,{labelContent:"Billing Street",inputId:"form-element-id-04"},a.default.createElement(d.Textarea,{id:"form-element-id-04",defaultValue:"525 S. Lexington Ave",required:!0})))),a.default.createElement(n.CompoundFormRow,null,a.default.createElement("div",{className:"slds-size_4-of-6"},a.default.createElement(i.FormElement,{labelContent:"Billing City",inputId:"form-element-id-05"},a.default.createElement(o.Input,{id:"form-element-id-05",defaultValue:"Burlington",required:!0}))),a.default.createElement("div",{className:"slds-size_2-of-6"},a.default.createElement(i.FormElement,{labelContent:"Billing State/Province",inputId:"form-element-id-06"},a.default.createElement(o.Input,{id:"form-element-id-06",defaultValue:"NC",required:!0})))),a.default.createElement(n.CompoundFormRow,null,a.default.createElement("div",{className:"slds-size_4-of-6"},a.default.createElement(i.FormElement,{labelContent:"Billing Zip/Postal Code",inputId:"form-element-id-07"},a.default.createElement(o.Input,{id:"form-element-id-07",defaultValue:"27215",required:!0}))),a.default.createElement("div",{className:"slds-size_2-of-6"},a.default.createElement(i.FormElement,{labelContent:"Billing Country",inputId:"form-element-id-08"},a.default.createElement(o.Input,{id:"form-element-id-08",defaultValue:"USA",required:!0})))))},{id:"help-text",label:"Has help text icon with tooltip",element:a.default.createElement(n.CompoundFormElement,{labelContent:"Billing Address",isAddress:!0,hasTooltip:!0},a.default.createElement(n.CompoundFormRow,null,a.default.createElement("div",{className:"slds-size_1-of-1"},a.default.createElement(i.FormElement,{labelContent:"Billing Street",inputId:"form-element-id-04"},a.default.createElement(d.Textarea,{id:"form-element-id-04",defaultValue:"525 S. Lexington Ave",required:!0})))),a.default.createElement(n.CompoundFormRow,null,a.default.createElement("div",{className:"slds-size_4-of-6"},a.default.createElement(i.FormElement,{labelContent:"Billing City",inputId:"form-element-id-05"},a.default.createElement(o.Input,{id:"form-element-id-05",defaultValue:"Burlington",required:!0}))),a.default.createElement("div",{className:"slds-size_2-of-6"},a.default.createElement(i.FormElement,{labelContent:"Billing State/Province",inputId:"form-element-id-06"},a.default.createElement(o.Input,{id:"form-element-id-06",defaultValue:"NC",required:!0})))),a.default.createElement(n.CompoundFormRow,null,a.default.createElement("div",{className:"slds-size_4-of-6"},a.default.createElement(i.FormElement,{labelContent:"Billing Zip/Postal Code",inputId:"form-element-id-07"},a.default.createElement(o.Input,{id:"form-element-id-07",defaultValue:"27215",required:!0}))),a.default.createElement("div",{className:"slds-size_2-of-6"},a.default.createElement(i.FormElement,{labelContent:"Billing Country",inputId:"form-element-id-08"},a.default.createElement(o.Input,{id:"form-element-id-08",defaultValue:"USA",required:!0})))))},{id:"has-error",label:"Has error",element:a.default.createElement(n.CompoundFormElement,{labelContent:"Billing Address",isAddress:!0,isRequired:!0,hasError:!0,errorId:"address-error-id-01",inlineMessage:"These fields are required"},a.default.createElement(n.CompoundFormRow,null,a.default.createElement("div",{className:"slds-size_1-of-1"},a.default.createElement(i.FormElement,{labelContent:"Billing Street",inputId:"form-element-id-04"},a.default.createElement(d.Textarea,{id:"form-element-id-04",defaultValue:"525 S. Lexington Ave",required:!0})))),a.default.createElement(n.CompoundFormRow,null,a.default.createElement("div",{className:"slds-size_4-of-6"},a.default.createElement(i.FormElement,{labelContent:"Billing City",inputId:"form-element-id-05"},a.default.createElement(o.Input,{id:"form-element-id-05",defaultValue:"Burlington",required:!0}))),a.default.createElement("div",{className:"slds-size_2-of-6"},a.default.createElement(i.FormElement,{labelContent:"Billing State/Province",inputId:"form-element-id-06"},a.default.createElement(o.Input,{id:"form-element-id-06",defaultValue:"NC",required:!0})))),a.default.createElement(n.CompoundFormRow,null,a.default.createElement("div",{className:"slds-size_4-of-6"},a.default.createElement(i.FormElement,{labelContent:"Billing Zip/Postal Code",inputId:"form-element-id-07"},a.default.createElement(o.Input,{id:"form-element-id-07",defaultValue:"27215",required:!0}))),a.default.createElement("div",{className:"slds-size_2-of-6"},a.default.createElement(i.FormElement,{labelContent:"Billing Country",inputId:"form-element-id-08"},a.default.createElement(o.Input,{id:"form-element-id-08",defaultValue:"USA",required:!0})))))}]},241:function(e,t,l){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.examples=t.states=void 0;var a=function(e){return e&&e.__esModule?e:{default:e}}(l(0)),n=l(32),i=l(13),o=l(16);t.default=a.default.createElement(n.CompoundFormElement,{labelContent:"Location"},a.default.createElement(n.CompoundFormRow,null,a.default.createElement("div",{className:"slds-size_1-of-2"},a.default.createElement(i.FormElement,{labelContent:"Latitude",inputId:"input-01"},a.default.createElement(o.Input,{id:"input-01"}))),a.default.createElement("div",{className:"slds-size_1-of-2"},a.default.createElement(i.FormElement,{labelContent:"Longitude",inputId:"input-02"},a.default.createElement(o.Input,{id:"input-02"})))));t.states=[{id:"required",label:"Required",element:a.default.createElement(n.CompoundFormElement,{labelContent:"Location",isRequired:!0},a.default.createElement(n.CompoundFormRow,null,a.default.createElement("div",{className:"slds-size_1-of-2"},a.default.createElement(i.FormElement,{labelContent:"Latitude",inputId:"input-01"},a.default.createElement(o.Input,{id:"input-01"}))),a.default.createElement("div",{className:"slds-size_1-of-2"},a.default.createElement(i.FormElement,{labelContent:"Longitude",inputId:"input-02"},a.default.createElement(o.Input,{id:"input-02"})))))},{id:"help-text",label:"Has help text icon with tooltip",element:a.default.createElement(n.CompoundFormElement,{labelContent:"Location",hasTooltip:!0},a.default.createElement(n.CompoundFormRow,null,a.default.createElement("div",{className:"slds-size_1-of-2"},a.default.createElement(i.FormElement,{labelContent:"Latitude",inputId:"input-01"},a.default.createElement(o.Input,{id:"input-01"}))),a.default.createElement("div",{className:"slds-size_1-of-2"},a.default.createElement(i.FormElement,{labelContent:"Longitude",inputId:"input-02"},a.default.createElement(o.Input,{id:"input-02"})))))},{id:"has-error",label:"Has error",element:a.default.createElement(n.CompoundFormElement,{labelContent:"Location",isRequired:!0},a.default.createElement(n.CompoundFormRow,null,a.default.createElement("div",{className:"slds-size_1-of-2"},a.default.createElement(i.FormElement,{labelContent:"Latitude",inputId:"input-01",isRequired:!0,hasError:!0,errorId:"error-message-unique-id",inlineMessage:"This field is required"},a.default.createElement(o.Input,{id:"input-01",required:!0,"aria-describedby":"error-message-unique-id"}))),a.default.createElement("div",{className:"slds-size_1-of-2"},a.default.createElement(i.FormElement,{labelContent:"Longitude",inputId:"input-02"},a.default.createElement(o.Input,{id:"input-02"})))))}],t.examples=[{id:"deprecated-stacked",label:"Deprecated - Compound form element",element:a.default.createElement(i.Fieldset,{label:"Location",hasCompoundFields:!0,isDeprecated:!0},a.default.createElement("div",{className:"slds-form-element__group"},a.default.createElement("div",{className:"slds-form-element__row"},a.default.createElement(i.FormElement,{formElementClassName:"slds-size_1-of-2",labelContent:"Longitude",inputId:"location-longitude-01"},a.default.createElement(o.Input,{id:"location-longitude-01",defaultValue:"10.283"})),a.default.createElement(i.FormElement,{formElementClassName:"slds-size_1-of-2",labelContent:"Latitude",inputId:"location-latitude-01"},a.default.createElement(o.Input,{id:"location-latitude-01",defaultValue:"54.293"})))))}]},242:function(e,t,l){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.examples=t.states=void 0;var a=u(l(0)),n=u(l(42)),i=function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var l in e)Object.prototype.hasOwnProperty.call(e,l)&&(t[l]=e[l]);return t.default=e,t}(l(41)),o=l(13),d=l(16),r=l(22),s=l(37),m=l(17);function u(e){return e&&e.__esModule?e:{default:e}}t.default=a.default.createElement(n.default,{direction:"horizontal",snapshot:i.ObjectFieldTypesHorizontal,isViewMode:!0,hasInlineEdit:!0});t.states=[{id:"edit-horizontal",label:"Horizontal form layout - Edit Mode",element:a.default.createElement(n.default,{direction:"horizontal",snapshot:i.ObjectFieldTypesHorizontal})}],t.examples=[{id:"horizontal-single-column",label:"Horizontal form layout - 1 column - Read Only Mode",element:a.default.createElement(n.default,{direction:"horizontal",snapshot:i.ObjectFieldTypesSingleColumn,isViewMode:!0})},{id:"deprecated-view-horizontal",label:"Deprecated - Horizontal form layout - View Mode",element:a.default.createElement(n.default,{direction:"horizontal",snapshot:i.DeprecatedObjectFieldTypes,isViewMode:!0,hasInlineEdit:!0,isDeprecated:!0})},{id:"deprecated-edit-horizontal",label:"Deprecated - Horizontal form layout - Edit Mode",element:a.default.createElement(n.default,{direction:"horizontal",snapshot:i.DeprecatedObjectFieldTypes,isDeprecated:!0})},{id:"simple-horizontal",label:"Simple - Horizontal form layout",element:a.default.createElement("div",{className:"slds-form"},a.default.createElement(o.FormElement,{labelContent:"Text Input",inputId:"horizontal-input-id-01",isHorizontal:!0},a.default.createElement(d.Input,{id:"horizontal-input-id-01",placeholder:"Placeholder Text"})),a.default.createElement(o.FormElement,{labelContent:"Textarea Input",inputId:"horizontal-input-id-02",isHorizontal:!0},a.default.createElement(r.Textarea,{id:"horizontal-input-id-02",placeholder:"Placeholder Text"})),a.default.createElement(o.Fieldset,{label:"Checkbox Group label",isHorizontal:!0},a.default.createElement(m.Checkbox,{label:"All opportunities owned by you",name:"default"}),a.default.createElement(m.Checkbox,{label:"All contacts in the account owned by you",name:"default"})),a.default.createElement(o.Fieldset,{label:"Radio Group label",isHorizontal:!0},a.default.createElement(s.Radio,{label:"Lead Generation",name:"options"}),a.default.createElement(s.Radio,{label:"Education Leads",name:"options"})))}]},243:function(e,t,l){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.examples=t.states=void 0;var a=u(l(0)),n=u(l(42)),i=function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var l in e)Object.prototype.hasOwnProperty.call(e,l)&&(t[l]=e[l]);return t.default=e,t}(l(41)),o=l(13),d=l(16),r=l(22),s=l(37),m=l(17);function u(e){return e&&e.__esModule?e:{default:e}}t.default=a.default.createElement(n.default,{direction:"stacked",snapshot:i.ObjectFieldTypes,isViewMode:!0,hasInlineEdit:!0});t.states=[{id:"edit-stacked",label:"Stacked form layout - Edit Mode",element:a.default.createElement(n.default,{direction:"stacked",snapshot:i.ObjectFieldTypes})}],t.examples=[{id:"stacked-single-column",label:"Stacked form layout - 1 column - Read Only Mode",element:a.default.createElement(n.default,{direction:"stacked",snapshot:i.ObjectFieldTypesSingleColumn,isViewMode:!0})},{id:"deprecated-view-stacked",label:"Deprecated - Stacked form layout - View Mode",element:a.default.createElement(n.default,{direction:"stacked",snapshot:i.DeprecatedObjectFieldTypes,isViewMode:!0,hasInlineEdit:!0,isDeprecated:!0})},{id:"deprecated-edit-stacked",label:"Deprecated - Stacked form layout - Edit Mode",element:a.default.createElement(n.default,{direction:"stacked",snapshot:i.DeprecatedObjectFieldTypes,isDeprecated:!0})},{id:"simple-stacked",label:"Simple - Stacked form layout",element:a.default.createElement("div",{className:"slds-form"},a.default.createElement(o.FormElement,{labelContent:"Text Input",inputId:"stacked-input-id-01",isStacked:!0},a.default.createElement(d.Input,{id:"stacked-input-id-01",placeholder:"Placeholder Text"})),a.default.createElement(o.FormElement,{labelContent:"Textarea Input",inputId:"stacked-input-id-02",isStacked:!0},a.default.createElement(r.Textarea,{id:"stacked-input-id-02",placeholder:"Placeholder Text"})),a.default.createElement(o.Fieldset,{label:"Checkbox Group label",isStacked:!0},a.default.createElement(m.Checkbox,{label:"All opportunities owned by you",name:"default"}),a.default.createElement(m.Checkbox,{label:"All contacts in the account owned by you",name:"default"})),a.default.createElement(o.Fieldset,{label:"Radio Group label",isStacked:!0},a.default.createElement(s.Radio,{label:"Lead Generation",name:"options"}),a.default.createElement(s.Radio,{label:"Education Leads",name:"options"})))}]},244:function(e,t,l){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.CheckboxStandalone=t.CheckboxPrimitive=void 0;var a=i(l(0)),n=i(l(2));function i(e){return e&&e.__esModule?e:{default:e}}var o=t.CheckboxPrimitive=function(e){var t=e.id,l=e.name,n=e.value,i=e.isDisabled,o=e.isChecked,d=e.isRequired,r=e.errorId;return a.default.createElement("input",{type:"checkbox",id:t,name:l||"label",value:n||"option",disabled:i,defaultChecked:o,required:d,"aria-describedby":r})};o.propTypes={id:n.default.string,name:n.default.string,value:n.default.string,isDisabled:n.default.bool,isChecked:n.default.bool,isRequired:n.default.bool,errorId:n.default.string},(t.CheckboxStandalone=function(e){var t=e.id,l=e.name,n=e.value,i=e.isDisabled,d=e.isChecked,r=e.isRequired,s=e.errorId;return a.default.createElement("span",{className:"slds-checkbox slds-checkbox_standalone"},a.default.createElement(o,{id:t,name:l,value:n,isDisabled:i,isChecked:d,isRequired:r,errorId:s}),a.default.createElement("span",{className:"slds-checkbox_faux"}))}).propTypes={id:n.default.string,name:n.default.string,value:n.default.string,isDisabled:n.default.bool,isChecked:n.default.bool,isRequired:n.default.bool,errorId:n.default.string}},245:function(e,t,l){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.states=t.Form=void 0;var a=m(l(0)),n=m(l(1)),i=l(13),o=l(16),d=l(22),r=l(37),s=l(17);function m(e){return e&&e.__esModule?e:{default:e}}var u=t.Form=function(e){return a.default.createElement("div",{className:(0,n.default)("slds-form",{"slds-form_stacked":e.isStacked},{"slds-form_horizontal":e.isHorizontal},e.className)},a.default.createElement(i.FormElement,{labelContent:"Text Input",inputId:"input-id-01"},a.default.createElement(o.Input,{id:"input-id-01"})),a.default.createElement(i.FormElement,{labelContent:"Textarea Label",inputId:"input-id-02"},a.default.createElement(d.Textarea,{id:"input-id-02"})),a.default.createElement("fieldset",{className:"slds-form-element"},a.default.createElement("legend",{className:"slds-form-element__legend slds-form-element__label"},"Checkbox Group label"),a.default.createElement("div",{className:"slds-form-element__control"},a.default.createElement(s.Checkbox,{label:"All opportunities owned by you",name:"default"}),a.default.createElement(s.Checkbox,{label:"All contacts in the account owned by you",name:"default"}))),a.default.createElement("fieldset",{className:"slds-form-element"},a.default.createElement("legend",{className:"slds-form-element__legend slds-form-element__label"},"Radio Group label"),a.default.createElement("div",{className:"slds-form-element__control"},a.default.createElement(r.Radio,{label:"Lead Generation",name:"options"}),a.default.createElement(r.Radio,{label:"Education Leads",name:"options"}))))};t.states=[{id:"horizontal",label:"Horizontal",element:a.default.createElement(u,{isHorizontal:!0})}]},246:function(e,t,l){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.getContents=t.getElement=void 0;var a=l(0),n=(I(a),l(7)),i=I(n),o=I(l(9)),d=I(l(11)),r=I(l(10)),s=I(l(12)),m=I(l(3)),u=l(13),c=l(16),f=(l(17),l(22)),p=(l(23),l(245),l(32)),E=l(42),h=I(E),b=F(l(41)),g=F(l(243)),v=F(l(242)),y=F(l(241)),C=F(l(240)),_=l(5);function F(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var l in e)Object.prototype.hasOwnProperty.call(e,l)&&(t[l]=e[l]);return t.default=e,t}function I(e){return e&&e.__esModule?e:{default:e}}var S=n.factories.a,x=n.factories.code,k=n.factories.em,w=n.factories.h2,z=n.factories.h3,T=n.factories.h4,A=n.factories.h5,N=n.factories.p,q=n.factories.strong,R=t.getElement=function(){return(0,a.createElement)(i.default,{},(0,a.createElement)("div",{className:"lead doc"},"An HTML form element contains a HTML label and element"),N({},"There are many types of form elements, including ",S({href:"/components/input"},"inputs"),", ",S({href:"/components/textarea"},"text areas"),", ",S({href:"/components/checkbox"},"checkboxes"),", and ",S({href:"/components/radio-group"},"radio buttons"),". Visit the individual component pages for in-depth details of specific states and visuals."),w({id:"Structuring-a-form-element"},"Structuring a form element"),N({},"To create a form element, a ",x({},"<div>")," element with the class ",x({},"slds-form-element")," is required."),N({},"A form element is made up of three primary elements, the label (",x({},"slds-form-element__label"),"), a container (",x({},"slds-form-element__control"),"), and the form element, i.e. ",x({},"<input>"),"."),(0,a.createElement)(r.default,{title:"Form Element - Base"},(0,a.createElement)(o.default,null,(0,a.createElement)(u.FormElement,{labelContent:"Form Label",inputId:"form-element-01"},(0,a.createElement)(c.Input,{id:"form-element-01",placeholder:"Placeholder Text"})))),z({id:"Form-Label"},"Form Label"),N({},"A form label should use the ",x({},"<label>")," element or ",x({},"<legend>")," element with the class ",x({},"slds-form-element__label"),". Use a ",x({},"<legend>")," when you have a ",S({href:"/components/form-element/#Compound"},"compound form")),N({},(0,a.createElement)(s.default,{type:"a11y",header:"Accessibility requirement"},"Labels must have the ",(0,a.createElement)("code",{className:"doc"},"for")," attribute applied, and its value must match the ID of the associated form element, like ",(0,a.createElement)("code",{className:"doc"},'<input id="unique-id-of-input">'),". This association ensures that assistive technology informs users about what information to enter where.")),(0,a.createElement)(d.default,{toggleCode:!1},(0,a.createElement)("label",{className:"slds-form-element__label",htmlFor:"unique-id-of-input"},"Form label")),z({id:"Form-Control"},"Form Control"),N({},"A form control is a ",x({},"div")," with the class ",x({},"slds-form-element__control"),". The control is required to maintain the structure of the form element."),(0,a.createElement)(d.default,{toggleCode:!1},(0,a.createElement)("div",{className:"slds-form-element__control"},"Any form type goes here")),w({id:"States"},"States"),z({id:"View-ModeStatic"},"View Mode/Static"),N({},"If a form element requires a view mode or static state, instead of ",x({},"slds-form-element__label")," being a ",x({},"<label>")," element, we want to change the element to a ",x({},"<span>"),". This is because the form is no longer a form but a statically read name and value pair."),N({},"The string inside of ",x({},"slds-form-element__control")," needs to be wrapped in a ",x({},"<div>")," as well, with the class ",x({},"slds-form-element__static")," applied to it."),N({},"In addition to the structural changes — if the form element is standalone, you can ",k({},"optionally")," apply ",x({},"slds-form-element__readonly"),". The class will help spacing and separation between other form elements. This class is ",q({},"",k({},"required"),"")," if the form element is in the context of a larger form composition."),(0,a.createElement)(r.default,{title:"Form Element - Readonly"},(0,a.createElement)(o.default,null,(0,a.createElement)(u.FormElement,{labelContent:"Status",isViewMode:!0},(0,a.createElement)(u.FormElementStatic,null,"In Progress")))),z({id:"Inline-Edit"},"Inline Edit"),N({},"If the form element has inline editable capabilities, the form element will ",q({},"",k({},"require"),"")," the class ",x({},"slds-form-element_edit"),". This will apply styles that help handle the structure of the additional elements, such as the button icon to switch the element out of view mode and into edit mode."),N({},"In addition, we want to provide an interaction hint by increasing the contrast of the button icon on hover by adding ",x({},"slds-hint-parent")," to the form element. The button icon will also require the class ",x({},"slds-button__icon_hint"),". This will notify the form element that this is the element we want to provide an interaction hint for. For more implementation details, please refer to ",S({href:"/components/button-icons/#Hint-on-hover"},"Button icon with hint on hover")),(0,a.createElement)(r.default,{title:"Form Element - Inline Edit"},(0,a.createElement)(o.default,null,(0,a.createElement)(u.FormElement,{labelContent:"Status",isViewMode:!0,isEditable:!0,hasHint:!0},(0,a.createElement)(u.FormElementStatic,null,"In Progress"),(0,a.createElement)(m.default,{iconClassName:"slds-button__icon_hint",symbol:"edit",assistiveText:"Edit: Status",title:"Edit: Status"})))),z({id:"Help-Text-Icon"},"Help Text Icon"),N({},"A form element can have help text that will display in a tooltip when hovering or focusing on an icon."),N({},"The icon comes in the form of a button icon so it can receive focus when a user tabs through a form with multiple form elements."),N({},"The button icon is ",q({},"",k({},"required"),"")," to be wrapped in a ",x({},"<div>")," with the class ",x({},"slds-form-element__icon")," and should be placed outside of the ",x({},"<label>")," element."),(0,a.createElement)(r.default,{title:"Form Element - Help Text Icon"},(0,a.createElement)(o.default,null,(0,a.createElement)(u.FormElement,{labelContent:"Status",inputId:"form-element-help-01",hasTooltip:!0},(0,a.createElement)(c.Input,{id:"form-element-help-01",placeholder:"Placeholder Text"})))),T({id:"Showing-tooltip"},"Showing tooltip"),N({},"The help text icon uses a tooltip to show the help text information. Please see ",S({href:"/components/tooltips/"},"Tooltips")," for implementation details."),(0,a.createElement)(r.default,{title:"Form Element - Help Text Icon - Showing tooltip"},(0,a.createElement)(o.default,{style:{paddingTop:"4rem"}},(0,a.createElement)(u.FormElement,{labelContent:"Status",inputId:"tooltip-showing-form-element-help-01",hasTooltip:!0,showTooltip:!0},(0,a.createElement)(c.Input,{id:"tooltip-showing-form-element-help-01",placeholder:"Placeholder Text"})))),z({id:"Feedback"},"Feedback"),N({},"A form element can have various methods of feedback, such as a required denotation or an inline error message."),T({id:"Required"},"Required"),N({},"When a form element is required, an ",x({},"<abbr>")," should be injected before the ",x({},"<input>")," and within the ",x({},"<label>")," and have the class ",x({},"slds-required"),"."),N({},"The ",x({},"<input>"),' element should also have the HTML attribute required or required="". Similarly, if it is disabled, it should have the disabled or disabled="" attribute. Do not use true/false values inside the required or disabled because the mere presence of these attributes signifies the field is required or disabled.'),(0,a.createElement)(r.default,{title:"Form Element - Required"},(0,a.createElement)(o.default,null,(0,a.createElement)(u.FormElement,{labelContent:"Form Label",inputId:"form-element-03",isRequired:!0},(0,a.createElement)(c.Input,{id:"form-element-03",placeholder:"Placeholder Text",required:!0})))),T({id:"Error"},"Error"),N({},"If an error has occurred while submitting a form, the form element with an error should provide feedback. The ",x({},"slds-has-error")," class is placed on the ",x({},'<div class="slds-form-element">')," element. Then, the error message for the user is placed in a ",x({},"<div>")," with the ",x({},"slds-form-element__help")," class."),N({},(0,a.createElement)(s.default,{type:"a11y",header:"Accessibility requirement"},"When a form element displays feedback notifying the user of an error, the error string should be linked to the element by adding the ",(0,a.createElement)("code",{className:"doc"},"aria-describedby")," attribute to the ",(0,a.createElement)("code",{className:"doc"},"<input>"),". The ",x({},"aria-describedby")," attribute must reference the id of the error message. This configuration allows screen readers to read the associated error message when the invalid field is focused.")),(0,a.createElement)(r.default,{title:"Form Element - Error"},(0,a.createElement)(o.default,null,(0,a.createElement)(u.FormElement,{hasError:!0,labelContent:"Form Label",inputId:"form-element-05",errorId:"form-error-01",isRequired:!0,inlineMessage:"This field is required"},(0,a.createElement)(c.Input,{id:"form-element-05",placeholder:"Placeholder Text",required:!0,"aria-describedby":"form-error-01"})))),w({id:"Layout"},"Layout"),N({},"If your form has more than one form element, you can switch the direction of ",x({},"slds-form-element__label")," and ",x({},"slds-form-element__control")," by applying ",x({},"slds-form-element_stacked")," for stacked labels and ",x({},"slds-form-element_horizontal")," for left-aligned labels. For optimal spacing and layout, ensure the ",x({},"slds-form-element")," class is present on each element within the form."),z({id:"Stacked"},"Stacked"),N({},"To vertically stack ",x({},"<label>")," and ",x({},"<input>")," pairs, place ",x({},"slds-form-element_stacked")," on the ",x({},"div")," with the class of ",x({},"slds-form-element")," for optimal spacing."),(0,a.createElement)(r.default,{title:"Form Layout - Stacked"},(0,a.createElement)(o.default,null,(0,_.getDisplayElementById)(g.examples,"simple-stacked"))),z({id:"Horizontal"},"Horizontal"),N({},"To horizontally align a ",x({},"<label>")," and ",x({},"<input>"),", use the ",x({},"slds-form-element_horizontal")," class on the ",x({},"div")," with the class of ",x({},"slds-form-element"),". The ",x({},"slds-form-element__label")," takes up 33% of the width, and the ",x({},"slds-form-element__control")," uses the remaining 66%."),(0,a.createElement)(r.default,{title:"Form Layout - Horizontal"},(0,a.createElement)(o.default,null,(0,_.getDisplayElementById)(v.examples,"simple-horizontal"))),T({id:"Single-Column-Support"},"Single Column Support"),N({},"When using ",x({},"slds-form-element_horizontal"),", you might find that the 33/66% distribution of the label to control might be too much in a single column form when displayed in a larger region. Another scenario where single column support would be useful is when a form element spans 100% while the other form elements in your form are 50/50 split. To reduce the distribution and/or align with 50/50 split form elements, adding the class ",x({},"slds-form-element_1-col")," to ",x({},"slds-form-element")," will re-distribute the layout."),A({id:"Standalone"},"Standalone"),(0,a.createElement)(r.default,{title:"Form Layout - Horizontal - Single Column standalone"},(0,a.createElement)(o.default,null,(0,a.createElement)(u.FormElement,{isHorizontal:!0,labelContent:"Description",inputId:"single-form-element-id-01",isEditing:!0,column:1},(0,a.createElement)(f.Textarea,{id:"single-form-element-id-01",defaultValue:"Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod."})))),A({id:"With-5050-split"},"With 50/50 split"),(0,a.createElement)(r.default,{title:"Form Layout - Horizontal - Single Column combo"},(0,a.createElement)(o.default,null,(0,a.createElement)("div",{className:"slds-form",role:"list"},(0,a.createElement)(E.RecordDetailRow,null,(0,a.createElement)(E.RecordDetailItem,null,(0,a.createElement)(u.FormElement,{isHorizontal:!0,labelContent:"Label",inputId:"single-form-element-id-02",isEditing:!0},(0,a.createElement)(c.Input,{id:"single-form-element-id-02",placeholder:"Placeholder Text"}))),(0,a.createElement)(E.RecordDetailItem,null,(0,a.createElement)(u.FormElement,{isHorizontal:!0,labelContent:"Label",inputId:"single-form-element-id-03",isEditing:!0},(0,a.createElement)(c.Input,{id:"single-form-element-id-03",placeholder:"Placeholder Text"})))),(0,a.createElement)(E.RecordDetailRow,null,(0,a.createElement)(E.RecordDetailItem,null,(0,a.createElement)(u.FormElement,{isHorizontal:!0,labelContent:"Description",inputId:"single-form-element-id-04",isEditing:!0,column:1},(0,a.createElement)(f.Textarea,{id:"single-form-element-id-04",placeholder:"Placeholder Text",defaultValue:"Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod."}))))))),z({id:"Compound"},"Compound"),N({},"A compound form is a grouping of several form elements described by a label/title. The compound form should be implemented as a ",x({},"<fieldset>"),", where the label/title is implemented as a ",x({},"<legend>")," element."),N({},"The ",x({},"<fieldset>")," ",q({},"",k({},"requires"),"")," the class ",x({},"slds-form-element_compound"),". This class handles the layout and wrapping of the form elements that are grouped together."),N({},"The ",x({},"<legend>")," element ",q({},"",k({},"requires"),"")," the class ",x({},"slds-form-element__legend"),". Legend elements can only accept a limited amount of CSS properties so this class is there to help manage its layout."),(0,a.createElement)(d.default,{toggleCode:!1},(0,a.createElement)(u.Fieldset,{hasCompoundFields:!0,label:"Fieldset Label"},"...")),T({id:"Rows"},"Rows"),N({},"Each row of a compound field should be wrapped in a ",x({},"<div>")," with the class ",x({},"slds-form-element__row"),"."),T({id:"Fields"},"Fields"),N({},"Each field inside of a compound row can be explicitly sized by using a sizing class, e.g. ",x({},"slds-size_1-of-2"),"."),(0,a.createElement)(d.default,{toggleCode:!1},(0,a.createElement)(p.CompoundFormRow,null,(0,a.createElement)("div",{className:"slds-size_1-of-2"},"..."))),(0,a.createElement)(r.default,{title:"Form Layout - Compound"},(0,a.createElement)(o.default,{style:{maxWidth:"400px"}},y.default)),T({id:"Address"},"Address"),N({},"Though an address form is utilizing the ",x({},"slds-form-element_compound")," class, we need to also add the ",x({},"slds-form-element_address")," class to the component. We modify some of the behavior of an address form with this class."),(0,a.createElement)(r.default,{title:"Form Layout - Compound - Address"},(0,a.createElement)(o.default,{style:{maxWidth:"400px"}},C.default)),w({id:"Usage-Examples"},"Usage Examples"),z({id:"Record-Form"},"Record Form"),N({},"A record form is a series of rows created by ",x({},"slds-form__row"),". Inside of each row contains up to 2 inline-editable form element. Each item inside of ",x({},"slds-form__row")," is required to be wrapped in a ",x({},"<div>")," with the class ",x({},"slds-form__item"),"."),(0,a.createElement)(s.default,{type:"a11y",header:"Accessibility Requirement"},"Due to the nature of how the record form is composed, we need to notify screen readers that this is a list by adding ",(0,a.createElement)("code",{className:"doc"},'role="list"')," to the ",(0,a.createElement)("code",{className:"doc"},"slds-form")," element. Every column inside of each row should get ",(0,a.createElement)("code",{className:"doc"},'role="listitem"')," to identify itself as items of the list."),T({id:"View-Mode"},"View Mode"),N({},"When in view/readonly mode, it is ",k({},"required")," to have the class ",x({},"slds-form-element_readonly")," on the ",x({},"slds-form-element")," element. This class will provide styles for scanability and spacing."),N({},"If inline-edit mode is enabled, you will also need to add ",x({},"slds-form-element_edit")," to the ",x({},"slds-form-element")," to accommodate the space for the edit button icon."),A({id:"Stacked-Alignment"},"Stacked Alignment"),N({},"When you want the form elements inside of your record form to be stacked. Each ",x({},"slds-form-element")," should also get the class ",x({},"slds-form-element_stacked"),"."),(0,a.createElement)(r.default,{title:"Form Element - Record Detail - View Mode"},(0,a.createElement)(o.default,null,(0,a.createElement)(h.default,{snapshot:b.ObjectFieldTypes,isViewMode:!0,hasInlineEdit:!0,direction:"stacked"}))),A({id:"Horizontal-Alignment"},"Horizontal Alignment"),N({},"By adding the class ",x({},"slds-form-element_horizontal")," to every ",x({},"slds-form-element"),", your form can switch from stacked to left-aligned, horizontal labels in order to reduce vertical space."),(0,a.createElement)(r.default,{title:"Form Element - Record Detail - View Mode - Horizontal"},(0,a.createElement)(o.default,null,(0,a.createElement)(h.default,{snapshot:b.ObjectFieldTypesHorizontal,isViewMode:!0,hasInlineEdit:!0,direction:"horizontal"}))),T({id:"Edit-Mode"},"Edit Mode"),N({},"When a form switches to edit mode, we need to replace all readonly form elements with their semantic field type form element. The structure remains the same:"),(0,a.createElement)(d.default,{toggleCode:!1},(0,a.createElement)(u.FormElement,{labelContent:"My Label",inputId:"unique-form-element-id"},"...")),N({},"The form content found inside of ",x({},"slds-form-element__control")," should be replaced with the appropriate field type of the view/readonly state."),A({id:"Stacked-Alignment-2"},"Stacked Alignment"),(0,a.createElement)(r.default,{title:"Form Element - Record Detail - Edit Mode"},(0,a.createElement)(o.default,null,(0,a.createElement)(h.default,{snapshot:b.ObjectFieldTypes,direction:"stacked"}))),A({id:"Horizontal-Alignment-2"},"Horizontal Alignment"),(0,a.createElement)(r.default,{title:"Form Element - Record Detail - Edit Mode - Horizontal"},(0,a.createElement)(o.default,null,(0,a.createElement)(h.default,{snapshot:b.ObjectFieldTypesHorizontal,direction:"horizontal"}))))};t.getContents=function(){return(0,n.createTableOfContents)(R())}},32:function(e,t,l){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.CompoundFormElement=t.CompoundFormRow=void 0;var a=o(l(0)),n=o(l(2)),i=l(13);function o(e){return e&&e.__esModule?e:{default:e}}(t.CompoundFormRow=function(e){var t=e.children;return a.default.createElement("div",{className:"slds-form-element__row"},t)}).propTypes={children:n.default.node.isRequired},(t.CompoundFormElement=function(e){var t=e.isStacked,l=e.isHorizontal,n=e.isEditing,o=e.isRequired,d=e.isAddress,r=e.hasTooltip,s=e.hasError,m=e.errorId,u=e.inlineMessage,c=e.labelContent,f=e.children;return a.default.createElement(i.Fieldset,{hasCompoundFields:!0,isAddress:d,isStacked:t,isHorizontal:l,isEditing:n,isRequired:o,hasTooltip:r,hasError:s,errorId:m,inlineMessage:u,label:c},f)}).propTypes={children:n.default.node.isRequired,isStacked:n.default.bool,isHorizontal:n.default.bool,isEditing:n.default.bool,isRequired:n.default.bool,isAddress:n.default.bool,hasTooltip:n.default.bool,hasError:n.default.bool,errorId:n.default.string,inlineMessage:n.default.string,labelContent:n.default.string}},41:function(e,t,l){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.DeprecatedObjectFieldTypes=t.ObjectFieldTypesSingleColumn=t.ObjectFieldTypesHorizontal=t.ObjectFieldTypes=void 0;var a=E(l(0)),n=E(l(3)),i=l(13),o=l(32),d=l(16),r=l(22),s=l(17),m=l(244),u=l(43),c=E(l(20)),f=E(l(21)),p=l(8);function E(e){return e&&e.__esModule?e:{default:e}}t.ObjectFieldTypes={rows:[{fields:[{type:"text",label:"Assigned To",value:"Jack Rogers",avatar:"/assets/images/avatar1.jpg",isRequired:!0,link:!0,component:a.default.createElement(i.FormElement,{inputId:"stacked-form-element-id-01",labelContent:"Assigned To",isRequired:!0,isEditing:!0,isStacked:!0},a.default.createElement(d.Input,{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:a.default.createElement(c.default,{id:"stacked-combobox-id-01",label:"Team Name","aria-controls":"stacked-listbox-id-01",autocomplete:!0,isEditing:!0,isStacked:!0,inputIconPosition:"right",rightInputIcon:a.default.createElement(n.default,{className:"slds-input__icon slds-input__icon_right",symbol:"clear",title:"Clear the text input",assistiveText:"Clear the text input"}),results:a.default.createElement(f.default,{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:a.default.createElement(p.UtilityIcon,{symbol:"steps",size:"x-small",useCurrentColor:!0,assistiveText:"False",title:"False"}),component:a.default.createElement(i.FormElement,{labelContent:"Security Assessment Required?",inputId:"stacked-checkbox-id-01",isEditing:!0,isStacked:!0},a.default.createElement(m.CheckboxStandalone,{id:"stacked-checkbox-id-01"}))},{type:"picklist",label:"Status",component:a.default.createElement(c.default,{id:"stacked-combobox-id-02",label:"Status","aria-controls":"stacked-listbox-id-02",readonly:!0,isEditing:!0,isStacked:!0,inputIconPosition:"right",rightInputIcon:a.default.createElement(p.UtilityIcon,{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:a.default.createElement(f.default,{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:a.default.createElement(i.Fieldset,{label:"App Personalization Settings",isEditing:!0,isStacked:!0},a.default.createElement(s.Checkbox,{label:"Disable end user personalization",name:"default",checked:!0}),a.default.createElement(s.Checkbox,{label:"Don't automatically create temporary tabs",name:"default"}))},{type:"",label:"",value:""}]},{fields:[{type:"text",label:"SLA Serial Number",value:"5367",hasTooltip:!0,component:a.default.createElement(i.FormElement,{labelContent:"SLA Serial Number",inputId:"stacked-form-element-id-02",hasTooltip:!0,isEditing:!0,isStacked:!0},a.default.createElement(d.Input,{id:"stacked-form-element-id-02",defaultValue:"5367"}))},{type:"date",label:"SLA Expiration Date",value:"1/1/2018",component:a.default.createElement(i.FormElement,{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},a.default.createElement(d.Input,{id:"stacked-form-element-id-03",defaultValue:"1/1/2018"}),a.default.createElement(n.default,{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:a.default.createElement(o.CompoundFormElement,{labelContent:"Location",isEditing:!0,isStacked:!0},a.default.createElement(o.CompoundFormRow,null,a.default.createElement("div",{className:"slds-size_1-of-2"},a.default.createElement(i.FormElement,{labelContent:"Longitude",inputId:"stacked-location-longitude-01"},a.default.createElement(d.Input,{id:"stacked-location-longitude-01",defaultValue:"10.283"}))),a.default.createElement("div",{className:"slds-size_1-of-2"},a.default.createElement(i.FormElement,{labelContent:"Latitude",inputId:"stacked-location-latitude-01"},a.default.createElement(d.Input,{id:"stacked-location-latitude-01",defaultValue:"54.293"})))))},{type:"multiselect",label:"Selected Languages",value:"Arabic, Chinese, English, German",component:a.default.createElement(u.MultiSelect,{isEditing:!0,isStacked:!0,dataSet:u.DefaultSnapShot,isResponsive:!0})}]},{fields:[{type:"address",label:"Billing Address",value:["525 S. Lexington Ave","Burlington, NC 27215","USA"],link:!0,isRequired:!0,hasTooltip:!0,component:a.default.createElement(o.CompoundFormElement,{labelContent:"Billing Address",isAddress:!0,isEditing:!0,isRequired:!0,hasTooltip:!0,isStacked:!0},a.default.createElement(o.CompoundFormRow,null,a.default.createElement("div",{className:"slds-size_1-of-1"},a.default.createElement(i.FormElement,{labelContent:"Billing Street",inputId:"stacked-form-element-id-04"},a.default.createElement(r.Textarea,{id:"stacked-form-element-id-04",defaultValue:"525 S. Lexington Ave",required:!0})))),a.default.createElement(o.CompoundFormRow,null,a.default.createElement("div",{className:"slds-size_4-of-6"},a.default.createElement(i.FormElement,{labelContent:"Billing City",inputId:"stacked-form-element-id-05"},a.default.createElement(d.Input,{id:"stacked-form-element-id-05",defaultValue:"Burlington",required:!0}))),a.default.createElement("div",{className:"slds-size_2-of-6"},a.default.createElement(i.FormElement,{labelContent:"Billing State/Province",inputId:"stacked-form-element-id-06"},a.default.createElement(d.Input,{id:"stacked-form-element-id-06",defaultValue:"NC",required:!0})))),a.default.createElement(o.CompoundFormRow,null,a.default.createElement("div",{className:"slds-size_4-of-6"},a.default.createElement(i.FormElement,{labelContent:"Billing Zip/Postal Code",inputId:"stacked-form-element-id-07"},a.default.createElement(d.Input,{id:"stacked-form-element-id-07",defaultValue:"27215",required:!0}))),a.default.createElement("div",{className:"slds-size_2-of-6"},a.default.createElement(i.FormElement,{labelContent:"Billing Country",inputId:"stacked-form-element-id-08"},a.default.createElement(d.Input,{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:a.default.createElement(o.CompoundFormElement,{labelContent:"Shipping Address",isAddress:!0,isEditing:!0,isStacked:!0},a.default.createElement(o.CompoundFormRow,null,a.default.createElement("div",{className:"slds-size_1-of-1"},a.default.createElement(i.FormElement,{labelContent:"Shipping Street",inputId:"stacked-form-element-id-09"},a.default.createElement(r.Textarea,{id:"stacked-form-element-id-09",defaultValue:"312 Constitution Place"})))),a.default.createElement(o.CompoundFormRow,null,a.default.createElement("div",{className:"slds-size_4-of-6"},a.default.createElement(i.FormElement,{labelContent:"Shipping City",inputId:"stacked-form-element-id-10"},a.default.createElement(d.Input,{id:"stacked-form-element-id-10",defaultValue:"Austin"}))),a.default.createElement("div",{className:"slds-size_2-of-6"},a.default.createElement(i.FormElement,{labelContent:"Shipping State/Province",inputId:"stacked-form-element-id-11"},a.default.createElement(d.Input,{id:"stacked-form-element-id-11",defaultValue:"TX"})))),a.default.createElement(o.CompoundFormRow,null,a.default.createElement("div",{className:"slds-size_4-of-6"},a.default.createElement(i.FormElement,{labelContent:"Shipping Zip/Postal Code",inputId:"stacked-form-element-id-12"},a.default.createElement(d.Input,{id:"stacked-form-element-id-12",defaultValue:"78767"}))),a.default.createElement("div",{className:"slds-size_2-of-6"},a.default.createElement(i.FormElement,{labelContent:"Shipping Country",inputId:"stacked-form-element-id-13"},a.default.createElement(d.Input,{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:a.default.createElement(i.FormElement,{labelContent:"Description",inputId:"stacked-form-element-id-14",isStacked:!0,isEditing:!0,column:1},a.default.createElement(r.Textarea,{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."}))}]}]},t.ObjectFieldTypesHorizontal={rows:[{fields:[{type:"text",label:"Assigned To",value:"Jack Rogers",avatar:"/assets/images/avatar1.jpg",isRequired:!0,link:!0,component:a.default.createElement(i.FormElement,{isHorizontal:!0,inputId:"horizontal-form-element-id-01",labelContent:"Assigned To",isRequired:!0,isEditing:!0},a.default.createElement(d.Input,{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:a.default.createElement(c.default,{isHorizontal:!0,id:"horizontal-combobox-id-01",label:"Team Name","aria-controls":"horizontal-listbox-id-