text: var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/ui/components/checkbox-button/docs.mdx.js"]=function(e){function t(t){for(var n,o,l=t[0],s=t[1],r=t[2],b=0,h=[];b<l.length;b++)o=l[b],i[o]&&h.push(i[o][0]),i[o]=0;for(n in s)Object.prototype.hasOwnProperty.call(s,n)&&(e[n]=s[n]);for(d&&d(t);h.length;)h.shift()();return a.push.apply(a,r||[]),c()}function c(){for(var e,t=0;t<a.length;t++){for(var c=a[t],n=!0,l=1;l<c.length;l++){var s=c[l];0!==i[s]&&(n=!1)}n&&(a.splice(t--,1),e=o(o.s=c[0]))}return e}var n={},i={18:0},a=[];function o(t){if(n[t])return n[t].exports;var c=n[t]={i:t,l:!1,exports:{}};return e[t].call(c.exports,c,c.exports,o),c.l=!0,c.exports}o.m=e,o.c=n,o.d=function(e,t,c){o.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:c})},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 c=Object.create(null);if(o.r(c),Object.defineProperty(c,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)o.d(c,n,function(t){return e[t]}.bind(null,n));return c},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 l=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs||[],s=l.push.bind(l);l.push=t,l=l.slice();for(var r=0;r<l.length;r++)t(l[r]);var d=s;return a.push([249,0]),c()}({0:function(e,t){e.exports=React},18:function(e,t){e.exports=JSBeautify},19:function(e,t){e.exports=ReactDOM},249:function(e,t,c){"use strict";c.r(t);var n=c(0),i=c.n(n),a=c(3),o=c(58),l=i.a.createElement(o.b,null),s=[{id:"checkbox-button-checked",label:"Checked",element:i.a.createElement(o.b,{isChecked:!0})},{id:"checkbox-button-disabled",label:"Disabled",element:i.a.createElement(o.b,{isDisabled:!0})},{id:"checkbox-button-checked-disabled",label:"Checked and Disabled",element:i.a.createElement(o.b,{isChecked:!0,isDisabled:!0})},{id:"checkbox-add-button-checked",label:"Deprecated - Checked",element:i.a.createElement(o.a,{checked:!0})},{id:"checkbox-add-button-disabled",label:"Deprecated - Disabled",element:i.a.createElement(o.a,{disabled:!0})},{id:"checkbox-add-button-checked-and-disabled",label:"Deprecated - Checked and Disabled",element:i.a.createElement(o.a,{checked:!0,disabled:!0})}],r=[{id:"checkbox-button-icon-symbol",label:"Different Icon",element:i.a.createElement(o.b,{iconUnchecked:"recycle_bin_empty",iconChecked:"recycle_bin_full"})},{id:"checkbox-button-checked-icon-symbol",label:"Different Icon - Checked",element:i.a.createElement(o.b,{iconUnchecked:"recycle_bin_empty",iconChecked:"recycle_bin_full",isChecked:!0})},{id:"checkbox-button-disabled-icon-symbol",label:"Different Icon - Disabled",element:i.a.createElement(o.b,{iconUnchecked:"recycle_bin_empty",isDisabled:!0})},{id:"checkbox-button-checked-disabled-icon-symbol",label:"Different Icon - Checked and Disabled",element:i.a.createElement(o.b,{iconChecked:"recycle_bin_full",isChecked:!0,isDisabled:!0})}],d=c(1),b=c(2);c.d(t,"getElement",(function(){return j})),c.d(t,"getContents",(function(){return S}));var h=a.c.a,u=a.c.code,f=a.c.h2,k=a.c.h3,m=a.c.li,p=a.c.p,y=a.c.table,x=a.c.tbody,_=a.c.td,D=a.c.th,v=a.c.thead,g=a.c.tr,O=a.c.ul,j=function(){return Object(n.createElement)(a.b,{},Object(n.createElement)("div",{className:"doc lead"},"A styled checkable input that communicates if an option is being added to a group"),Object(n.createElement)(d.a,{exampleOnly:!0},l),f({id:"About-Checkbox-Button"},"About Checkbox Button"),p({},"The checkbox button is similar to a checkbox in that it presents a user with a","binary choice for an item. However, the only action a user can take is to","add (or remove) an entity. When a user clicks the checkbox button, the entity is","stored, similar to an ‘add to cart’ experience, until the user saves changes."),p({},"The checkbox button is useful for increasing clarity. Since the button only adds","or removes entities, the user knows the action they will prompt upon click.","The checkbox button also provides a clear visual affordance and a large target to take this action."),p({},"Use the add button if the component you’re building:"),O({},m({},"Exists without other multi-select elements (i.e. checkboxes)"),m({},"Allows users to select multiple entities"),m({},"Semantically fits the add/remove model")),f({id:"Structure-and-Implementation"},"Structure and Implementation"),p({},"The checkbox ",u({},"<input>")," is visually hidden with ",u({},".slds-assistive-text")," and a faux checkbox is created using the ",h({href:"/components/icons"},"icon blueprint")," which allows the display of an icon instead of the standard checkbox."),p({},"Click and tap events are captured by a ",u({},"<label>")," that encases the entire blueprint. The ",u({},"for")," attribute of your ",u({},"<label>")," must match the ",u({},"id")," attribute of your ",u({},"<input>"),"."),p({},"The states of the checkbox button are styled with the following classes:"),y({},v({},g({},D({},"Class"),D({},"State"),D({},"Description"))),x({},g({},_({},u({},".slds-checkbox-button_is-checked")),_({},"checked"),_({},"The checked state when the checkbox button has been selected")),g({},_({},u({},".slds-checkbox-button_is-disabled")),_({},"disabled"),_({},"The disabled state when the checkbox button has been disabled")),g({},_({},u({},".slds-checkbox-button_is-focused")),_({},"focused"),_({},"The focused state when the checkbox button has focus; important for accessibility")))),p({},"When implementing this blueprint, monitor the state of the checkbox ",u({},"<input>")," and apply the appropriate state class listed in the above chart based on the current state of the checkbox ",u({},"<input>"),"."),p({},"It is possible to change the icon used within the checkbox button, see ",h({href:"#different-icon"},"Different Icons")," for more details."),f({id:"Base"},"Base"),Object(n.createElement)(d.a,null,l),f({id:"States"},"States"),k({id:"Checked"},"Checked"),Object(n.createElement)(d.a,null,Object(b.e)(s,"checkbox-button-checked")),k({id:"Disabled"},"Disabled"),Object(n.createElement)(d.a,null,Object(b.e)(s,"checkbox-button-disabled")),k({id:"Checked-and-Disabled"},"Checked and Disabled"),Object(n.createElement)(d.a,null,Object(b.e)(s,"checkbox-button-checked-disabled")),f({id:"Examples"},"Examples"),k({id:"Different-Icon"},"Different Icon"),p({},"You may change the utility icon used by the checkbox button depending on the action you are communicating. Reference the ",h({href:"/icons/#utility"},"utility icon listing")," for all available options."),p({},"This example is using the ",u({},"recycle_bin_empty")," utility icon as its base state and the ",u({},"recycle_bin_full")," utility icon as its checked state."),Object(n.createElement)(d.a,null,Object(b.e)(r,"checkbox-button-icon-symbol")),Object(n.createElement)(d.a,null,Object(b.e)(r,"checkbox-button-checked-icon-symbol")))},S=function(){return Object(a.a)(j())}}});