1"use strict";(self.webpackChunk_zendeskgarden_website=self.webpackChunk_zendeskgarden_website||[]).push([[6374],{41258:function(e,t,n){n.d(t,{X:function(){return d}});var a=n(67294),l=n(45697),r=n.n(l),o=n(24990),s=n(68584),i=n(8872),c=n(69085);const d=a.forwardRef(((e,t)=>{let{indeterminate:n,children:l,...r}=e;const d=(0,c.Z)(),m=(0,o.Z)(),h=e=>{e&&(e.indeterminate=n)};let p={ref:e=>{[h,t].forEach((t=>{t&&("function"==typeof t?t(e):t.current=e)}))},...r,...d};return m&&(p=m.getInputProps(p)),a.createElement(s.r.Provider,{value:"checkbox"},a.createElement(i.Q,p),l)}));d.displayName="Checkbox",d.propTypes={isCompact:r().bool,indeterminate:r().bool}},67972:function(e,t,n){n.d(t,{p:function(){return w}});var a=n(67294),l=n(45697),r=n.n(l),o=n(12788),s=n(93835),i=n(86361),c=n(71165);const d="forms.fieldset_legend",m=(0,o.default)(c.a).attrs({as:"legend","data-garden-id":d,"data-garden-version":"8.76.9"}).withConfig({displayName:"StyledLegend",componentId:"sc-6s0zwq-0"})(["padding:0;",";"],(e=>(0,s.Z)(d,e)));m.defaultProps={theme:i.Z};var h=n(69085);const p=(0,a.forwardRef)(((e,t)=>{const n=(0,h.Z)();return a.createElement(m,Object.assign({},e,n,{ref:t}))}));p.displayName="Fieldset.Legend";const g=p;var u=n(44726);const f="forms.fieldset",b=(0,o.default)(u.o).attrs({as:"fieldset","data-garden-id":f,"data-garden-version":"8.76.9"}).withConfig({displayName:"StyledFieldset",componentId:"sc-1vr4mxv-0"})(["","{margin-top:","px;}",";"],u.o,(e=>e.theme.space.base*(e.isCompact?1:2)),(e=>(0,s.Z)(f,e)));b.defaultProps={theme:i.Z};const E=(0,a.forwardRef)(((e,t)=>{const n=(0,a.useMemo)((()=>({isCompact:e.isCompact})),[e.isCompact]);return a.createElement(h.P.Provider,{value:n},a.createElement(b,Object.assign({},e,{ref:t})))}));E.displayName="Fieldset",E.propTypes={isCompact:r().bool};const w=E;w.Legend=g},95252:function(e,t,n){n.d(t,{k:function(){return b}});var a=n(67294),l=n(24990),r=n(68584),o=n(53076),s=n(12788),i=n(93835),c=n(86361),d=n(45896);const m="forms.radio_hint",h=(0,s.default)(o.q).attrs({"data-garden-id":m,"data-garden-version":"8.76.9"}).withConfig({displayName:"StyledRadioHint",componentId:"sc-eo8twg-0"})(["padding-",":",";",";"],(e=>e.theme.rtl?"right":"left"),(e=>(0,d.mA)(`${e.theme.space.base} * 6px`)),(e=>(0,i.Z)(m,e)));h.defaultProps={theme:c.Z};const p="forms.checkbox_hint",g=(0,s.default)(h).attrs({"data-garden-id":p,"data-garden-version":"8.76.9"}).withConfig({displayName:"StyledCheckHint",componentId:"sc-1kl8e8c-0"})(["",";"],(e=>(0,i.Z)(p,e)));g.defaultProps={theme:c.Z};const u="forms.toggle_hint",f=(0,s.default)(o.q).attrs({"data-garden-id":u,"data-garden-version":"8.76.9"}).withConfig({displayName:"StyledToggleHint",componentId:"sc-nziggu-0"})(["padding-",":",";",";"],(e=>e.theme.rtl?"right":"left"),(e=>(0,d.mA)(`${e.theme.space.base} * 12px`)),(e=>(0,i.Z)(u,e)));f.defaultProps={theme:c.Z};const b=a.forwardRef(((e,t)=>{const{hasHint:n,setHasHint:s,getHintProps:i}=(0,l.Z)()||{},c=(0,r.Z)();let d;(0,a.useEffect)((()=>(!n&&s&&s(!0),()=>{n&&s&&s(!1)})),[n,s]),d="checkbox"===c?g:"radio"===c?h:"toggle"===c?f:o.q;let m=e;return i&&(m=i(m)),a.createElement(d,Object.assign({ref:t},m))}));b.displayName="Hint"},59284:function(e,t,n){n.d(t,{v:function(){return v}});var a=n(67294),l=n(45697),r=n.n(l),o=n(42667),s=n(16508),i=n(24990),c=n(68584),d=n(21818),m=n(64601),h=n(12788),p=n(93835),g=n(86361),u=n(45896);const f="forms.radio_message",b=(0,h.default)(d.g).attrs({"data-garden-id":f,"data-garden-version":"8.76.9"}).withConfig({displayName:"StyledRadioMessage",componentId:"sc-1pmi0q8-0"})(["padding-",":",";",";"],(e=>e.theme.rtl?"right":"left"),(e=>(0,u.mA)(`${e.theme.space.base} * 6px`)),(e=>(0,p.Z)(f,e)));b.defaultProps={theme:g.Z};const E="forms.checkbox_message",w=(0,h.default)(b).attrs({"data-garden-id":E,"data-garden-version":"8.76.9"}).withConfig({displayName:"StyledCheckMessage",componentId:"sc-s4p6kd-0"})(["",";"],(e=>(0,p.Z)(E,e)));w.defaultProps={theme:g.Z};const C="forms.toggle_message",x=(0,h.default)(d.g).attrs({"data-garden-id":C,"data-garden-version":"8.76.9"}).withConfig({displayName:"StyledToggleMessage",componentId:"sc-13vuvl1-0"})(["padding-",":",";& ","{",":",";}",";"],(e=>e.theme.rtl?"right":"left"),(e=>(0,u.mA)(`${e.theme.space.base} * 12px`)),m.h,(e=>e.theme.rtl?"right":"left"),(e=>(0,u.mA)(`${e.theme.space.base} * 10px - ${e.theme.iconSizes.md}`)),(e=>(0,p.Z)(C,e)));x.defaultProps={theme:g.Z};const v=a.forwardRef(((e,t)=>{let{validation:n,validationLabel:l,children:r,...s}=e;const{hasMessage:h,setHasMessage:p,getMessageProps:g}=(0,i.Z)()||{},u=(0,c.Z)();let f;(0,a.useEffect)((()=>(!h&&p&&p(!0),()=>{h&&p&&p(!1)})),[h,p]),f="checkbox"===u?w:"radio"===u?b:"toggle"===u?x:d.g;let E={validation:n,validationLabel:l,...s};g&&(E=g(E));const C=(0,o.X)(v,E,"validationLabel",n,void 0!==n);return a.createElement(f,Object.assign({ref:t},E),n&&a.createElement(m.h,{validation:n,"aria-label":C}),r)}));v.displayName="Message",v.propTypes={validation:r().oneOf(s.at),validationLabel:r().str
1ing}},11194:function(e,t,n){n.r(t),n.d(t,{Head:function(){return R},default:function(){return P}});var a=n(11151),l=n(67294),r=n(65900),o=n(67972),s=n(41600),i=n(41258),c=n(65968),d=n(48812),m=n(59921);var h=()=>{const[e,t]=(0,l.useState)(!0),[n,a]=(0,l.useState)(!1),[r,h]=(0,l.useState)(!1);return l.createElement(d.X,{justifyContent:"center"},l.createElement(m.J,{size:"auto"},l.createElement(o.p,null,l.createElement(o.p.Legend,null,"Plant preference"),l.createElement(s.g,null,l.createElement(i.X,{checked:e,onChange:()=>t(!e)},l.createElement(c._,null,"Pest resistant"))),l.createElement(s.g,null,l.createElement(i.X,{checked:n,onChange:()=>a(!n)},l.createElement(c._,null,"Needs direct light"))),l.createElement(s.g,null,l.createElement(i.X,{checked:r,onChange:()=>h(!r)},l.createElement(c._,null,"Drought-tolerant"))))))},p="/**\n * Copyright Zendesk, Inc.\n *\n * Use of this source code is governed under the Apache License, Version 2.0\n * found at http://www.apache.org/licenses/LICENSE-2.0.\n */\n\nimport React, { useState } from 'react';\nimport { Field, Label, Checkbox, Fieldset } from '@zendeskgarden/react-forms';\nimport { Row, Col } from '@zendeskgarden/react-grid';\n\nconst Example = () => {\n const [pest, setPest] = useState(true);\n const [light, setLight] = useState(false);\n const [drought, setDrought] = useState(false);\n\n return (\n <Row justifyContent=\"center\">\n <Col size=\"auto\">\n <Fieldset>\n <Fieldset.Legend>Plant preference</Fieldset.Legend>\n <Field>\n <Checkbox checked={pest} onChange={() => setPest(!pest)}>\n <Label>Pest resistant</Label>\n </Checkbox>\n </Field>\n <Field>\n <Checkbox checked={light} onChange={() => setLight(!light)}>\n <Label>Needs direct light</Label>\n </Checkbox>\n </Field>\n <Field>\n <Checkbox checked={drought} onChange={() => setDrought(!drought)}>\n <Label>Drought-tolerant</Label>\n </Checkbox>\n </Field>\n </Fieldset>\n </Col>\n </Row>\n );\n};\n\nexport default Example;\n";var g=()=>l.createElement(d.X,{justifyContent:"center"},l.createElement(m.J,{size:"auto"},l.createElement(s.g,null,l.createElement(i.X,{defaultChecked:!0,disabled:!0},l.createElement(c._,null,"Needs indirect light"))),l.createElement(s.g,null,l.createElement(i.X,{disabled:!0},l.createElement(c._,null,"Prefers moist soil"))))),u="/**\n * Copyright Zendesk, Inc.\n *\n * Use of this source code is governed under the Apache License, Version 2.0\n * found at http://www.apache.org/licenses/LICENSE-2.0.\n */\n\nimport React from 'react';\nimport { Field, Label, Checkbox } from '@zendeskgarden/react-forms';\nimport { Row, Col } from '@zendeskgarden/react-grid';\n\nconst Example = () => (\n <Row justifyContent=\"center\">\n <Col size=\"auto\">\n <Field>\n <Checkbox defaultChecked disabled>\n <Label>Needs indirect light</Label>\n </Checkbox>\n </Field>\n <Field>\n <Checkbox disabled>\n <Label>Prefers moist soil</Label>\n </Checkbox>\n </Field>\n </Col>\n </Row>\n);\n\nexport default Example;\n";var f=()=>l.createElement(d.X,{justifyContent:"center"},l.createElement(m.J,{size:"auto"},l.createElement(s.g,null,l.createElement(i.X,{defaultChecked:!0},l.createElement(c._,{hidden:!0},"Accessibly hidden label one"))),l.createElement(s.g,null,l.createElement(i.X,null,l.createElement(c._,{hidden:!0},"Accessibly hidden label two"))))),b="/**\n * Copyright Zendesk, Inc.\n *\n * Use of this source code is governed under the Apache License, Version 2.0\n * found at http://www.apache.org/licenses/LICENSE-2.0.\n */\n\nimport React from 'react';\nimport { Field, Label, Checkbox } from '@zendeskgarden/react-forms';\nimport { Row, Col } from '@zendeskgarden/react-grid';\n\nconst Example = () => (\n <Row justifyContent=\"center\">\n <Col size=\"auto\">\n <Field>\n <Checkbox defaultChecked>\n <Label hidden>Accessibly hidden label one</Label>\n </Checkbox>\n </Field>\n <Field>\n <Checkbox>\n <Label hidden>Accessibly hidden label two</Label>\n </Checkbox>\n </Field>\n </Col>\n </Row>\n);\n\nexport default Example;\n",E=n(12788),w=n(95252);const C=(0,E.default)(s.g).withConfig({displayName:"Hint__StyledField",componentId:"sc-tlijqf-0"})(["margin-top:",";"],(e=>e.theme.space.xs));var x=()=>l.createElement(d.X,{justifyContent:"center"},l.createElement(m.J,{size:"auto"},l.createElement(s.g,null,l.createElement(i.X,{defaultChecked:!0}
1,l.createElement(c._,null,"Pest resistant"),l.createElement(w.k,null,"Has natural resistance to bugs and animals"))),l.createElement(C,null,l.createElement(i.X,null,l.createElement(c._,null,"Needs direct light"),l.createElement(w.k,null,"Thrives in warm temperatures with lots of sun"))))),v="/**\n * Copyright Zendesk, Inc.\n *\n * Use of this source code is governed under the Apache License, Version 2.0\n * found at http://www.apache.org/licenses/LICENSE-2.0.\n */\n\nimport React from 'react';\nimport styled from 'styled-components';\nimport { Field, Label, Hint, Checkbox } from '@zendeskgarden/react-forms';\nimport { Row, Col } from '@zendeskgarden/react-grid';\n\nconst StyledField = styled(Field)`\n margin-top: ${p => p.theme.space.xs};\n`;\n\nconst Example = () => (\n <Row justifyContent=\"center\">\n <Col size=\"auto\">\n <Field>\n <Checkbox defaultChecked>\n <Label>Pest resistant</Label>\n <Hint>Has natural resistance to bugs and animals</Hint>\n </Checkbox>\n </Field>\n <StyledField>\n <Checkbox>\n <Label>Needs direct light</Label>\n <Hint>Thrives in warm temperatures with lots of sun</Hint>\n </Checkbox>\n </StyledField>\n </Col>\n </Row>\n);\n\nexport default Example;\n";const y={pest:!0,light:!1},k=(e,t)=>{switch(t.type){case"all":return{pest:!0,light:!0};case"none":return{pest:!1,light:!1};case"pest":return{...e,pest:!e.pest};case"light":return{...e,light:!e.light};default:return e}},L=(0,E.default)(s.g).withConfig({displayName:"Indeterminate__StyledGroup",componentId:"sc-xhmg4r-0"})(["margin-",":","px;"],(e=>e.theme.rtl?"right":"left"),(e=>6*e.theme.space.base));var z=()=>{const[e,t]=(0,l.useReducer)(k,y),{pest:n,light:a}=e;return l.createElement(d.X,{justifyContent:"center"},l.createElement(m.J,{size:"auto"},l.createElement(s.g,null,l.createElement(i.X,{onChange:()=>{(a||n)&&t({type:"all"}),a&&n||t({type:"all"}),a&&n&&t({type:"none"})},checked:!!a&&n,indeterminate:!(!a&&!n)&&(!a||!n)},l.createElement(c._,null,"Outdoor readiness"))),l.createElement(L,null,l.createElement(s.g,null,l.createElement(i.X,{checked:n,onChange:()=>t({type:"pest"})},l.createElement(c._,{isRegular:!0},"Pest resistant"))),l.createElement(s.g,null,l.createElement(i.X,{checked:a,onChange:()=>t({type:"light"})},l.createElement(c._,{isRegular:!0},"Needs direct light"))))))},S="/**\n * Copyright Zendesk, Inc.\n *\n * Use of this source code is governed under the Apache License, Version 2.0\n * found at http://www.apache.org/licenses/LICENSE-2.0.\n */\n\nimport React, { useReducer } from 'react';\nimport styled from 'styled-components';\nimport { Field, Label, Checkbox } from '@zendeskgarden/react-forms';\nimport { Row, Col } from '@zendeskgarden/react-grid';\n\ninterface ISelectLight {\n type: 'light';\n}\n\ninterface ISelectPest {\n type: 'pest';\n}\n\ninterface ISelectAll {\n type: 'all';\n}\n\ninterface ISelectNone {\n type: 'none';\n}\n\nconst initialState = { pest: true, light: false };\n\ntype ActionTypes = ISelectLight | ISelectPest | ISelectAll | ISelectNone;\n\ntype ReducerType = (state: typeof initialState, action: ActionTypes) => typeof initialState;\n\nconst reducer: ReducerType = (state, action) => {\n switch (action.type) {\n case 'all':\n return { pest: true, light: true };\n case 'none':\n return { pest: false, light: false };\n case 'pest':\n return { ...state, pest: !state.pest };\n case 'light':\n return { ...state, light: !state.light };\n default:\n return state;\n }\n};\n\nconst StyledGroup = styled(Field)`\n margin-${props => (props.theme.rtl ? 'right' : 'left')}: ${props => props.theme.space.base * 6}px;\n`;\n\nconst Example = () => {\n const [state, dispatch] = useReducer(reducer, initialState);\n const { pest, light } = state;\n\n const onParentChange = () => {\n if (light || pest) {\n dispatch({ type: 'all' });\n }\n\n if (!light || !pest) {\n dispatch({ type: 'all' });\n }\n\n if (light && pest) {\n dispatch({ type: 'none' });\n }\n };\n\n return (\n <Row justifyContent=\"center\">\n <Col size=\"auto\">\n <Field>\n <Checkbox\n onChange={onParentChange}\n checked={!!light && pest}\n indeterminate={!light && !pest ? false : !light || !pest}\n >\n <Label>Outdoor readiness</Label>\n </Checkbox>\n </Field>\n <StyledGroup>\n <Field>\n <Checkbox checked={pest} onChange={() => dispatch({ type: 'pest' })}>\n <Label isRegular>Pest resistant</Label>\n </Checkbox>\n </Field>\n <Field>\n <Checkbox checked={light} onChange={() => dispatch({ type: 'light' })}>\n <Label isRegular>Needs direct light</Label>\n </Checkbox>\n </Field>\n </StyledGroup>\n </Col>\n </Row>\n );\n};\n\nexport default Example;\n";var N=()=>l.createElement(d.X,{justifyContent:"center"},l.createElement(m.J,{size:"auto"},l.createElement(s.g,null,l.createElement(i.X,{defaultChecked:!0},l.createElement(c._,{isRegular:!0},"Pest resistant"))),l.createElement(s.g,null,l.createElement(i.X,null,l.createElement(c._,{isRegular:!0},"Needs direct light"))))),_="/**\n * Copyright Zendesk, Inc.\n *\n * Use of this source code is governed under the Apache License, Version 2.0\n * found at http://www.apache.org/licenses/LICENSE-2.0.\n */\n\nimport React from 'react';\nimport { Field, Label, Checkbox } from '@zendeskgarden/react-forms';\nimport { Row, Col } from '@zendeskgarden/react-grid';\n\nconst Example = () => (\n <Row justifyContent=\"center\">\n <Col size=\"auto\">\n <Field>\n <Checkbox defaultChecked>
1\n <Label isRegular>Pest resistant</Label>\n </Checkbox>\n </Field>\n <Field>\n <Checkbox>\n <Label isRegular>Needs direct light</Label>\n </Checkbox>\n </Field>\n </Col>\n </Row>\n);\n\nexport default Example;\n",F=n(59284);const I=(0,E.default)(s.g).withConfig({displayName:"Validation__StyledField",componentId:"sc-1nfzbo7-0"})(["margin-top:",";"],(e=>e.theme.space.xs));var A=()=>l.createElement(d.X,{justifyContent:"center"},l.createElement(m.J,{size:"auto"},l.createElement(s.g,null,l.createElement(i.X,{defaultChecked:!0},l.createElement(c._,null,"Pest resistant")),l.createElement(F.v,{validation:"success"},"Safe for outdoor beds")),l.createElement(I,null,l.createElement(i.X,null,l.createElement(c._,null,"Needs direct light")),l.createElement(F.v,{validation:"warning"},"Requires 4 hours of sun per day")),l.createElement(I,null,l.createElement(i.X,null,l.createElement(c._,null,"Drought-tolerant")),l.createElement(F.v,{validation:"error"},"Not appropriate for greenhouse")))),M='/**\n * Copyright Zendesk, Inc.\n *\n * Use of this source code is governed under the Apache License, Version 2.0\n * found at http://www.apache.org/licenses/LICENSE-2.0.\n */\n\nimport React from \'react\';\nimport styled from \'styled-components\';\nimport { Field, Label, Message, Checkbox } from \'@zendeskgarden/react-forms\';\nimport { Row, Col } from \'@zendeskgarden/react-grid\';\n\nconst StyledField = styled(Field)`\n margin-top: ${p => p.theme.space.xs};\n`;\n\nconst Example = () => (\n <Row justifyContent="center">\n <Col size="auto">\n <Field>\n <Checkbox defaultChecked>\n <Label>Pest resistant</Label>\n </Checkbox>\n <Message validation="success">Safe for outdoor beds</Message>\n </Field>\n <StyledField>\n <Checkbox>\n <Label>Needs direct light</Label>\n </Checkbox>\n <Message validation="warning">Requires 4 hours of sun per day</Message>\n </StyledField>\n <StyledField>\n <Checkbox>\n <Label>Drought-tolerant</Label>\n </Checkbox>\n <Message validation="error">Not appropriate for greenhouse</Message>\n </StyledField>\n </Col>\n </Row>\n);\n\nexport default Example;\n';function R(e){return l.createElement(r.HJ,e)}function H(e){const t=Object.assign({ul:"ul",li:"li",a:"a",h2:"h2",span:"span",h3:"h3",p:"p",pre:"pre",code:"code"},(0,a.a)(),e.components),{Usage:n,Use:r,Misuse:o,CodeExample:s,BestPractice:i,Do:c,Dont:d,Configuration:m,Component:E,PropSheet:w}=t;return i||T("BestPractice",!0),s||T("CodeExample",!0),E||T("Component",!0),m||T("Configuration",!0),c||T("Do",!0),d||T("Dont",!0),o||T("Misuse",!0),w||T("PropSheet",!0),n||T("Usage",!0),r||T("Use",!0),l.createElement(l.Fragment,null,l.createElement(n,null,l.createElement(r,null,l.createElement(t.ul,null,"\n",l.createElement(t.li,null,"To let users compare options from a list and select all, any, or none of those items"),"\n",l.createElement(t.li,null,"To turn a single option on or off"),"\n")),l.createElement(o,null,l.createElement(t.ul,null,"\n",l.createElement(t.li,null,"To give the user a mutually exclusive choice, use the ",l.createElement(t.a,{href:"/components/radio"},"Radio")," component instead"),"\n",l.createElement(t.li,null,"To let users activate an option that takes effect immediately, use a ",l.createElement(t.a,{href:"/components/toggle"},"Toggle")," instead"),"\n"))),"\n",l.createElement(t.h2,{id:"how-to-use-it",style:{position:"relative"}},l.createElement(t.a,{href:"#how-to-use-it","aria-label":"how to use it permalink",className:"anchor before"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16">\n <path fill="currentColor" d="M4.441 7.38l.095.083.939.939-.708.707-.939-.939-2 2-.132.142a2.829 2.829 0 003.99 3.99l.142-.132 2-2-.939-.939.707-.708.94.94a1 1 0 01.083 1.32l-.083.094-2 2A3.828 3.828 0 01.972 9.621l.15-.158 2-2A1 1 0 014.34 7.31l.101.07zm7.413-3.234a.5.5 0 01.057.638l-.057.07-7 7a.5.5 0 01-.765-.
1638l.057-.07 7-7a.5.5 0 01.708 0zm3.023-3.025a3.829 3.829 0 01.15 5.257l-.15.158-2 2a1 1 0 01-1.32.083l-.094-.083-.94-.94.708-.707.939.94 2-2 .132-.142a2.829 2.829 0 00-3.99-3.99l-.142.131-2 2 .939.939-.707.708-.94-.94a1 1 0 01-.082-1.32l.083-.094 2-2a3.828 3.828 0 015.414 0z"/>\n</svg>'}})),"How to use it"),"\n",l.createElement(t.h3,{id:"default",style:{position:"relative"}},l.createElement(t.a,{href:"#default","aria-label":"default permalink",className:"anchor before"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16">\n <path fill="currentColor" d="M4.441 7.38l.095.083.939.939-.708.707-.939-.939-2 2-.132.142a2.829 2.829 0 003.99 3.99l.142-.132 2-2-.939-.939.707-.708.94.94a1 1 0 01.083 1.32l-.083.094-2 2A3.828 3.828 0 01.972 9.621l.15-.158 2-2A1 1 0 014.34 7.31l.101.07zm7.413-3.234a.5.5 0 01.057.638l-.057.07-7 7a.5.5 0 01-.765-.638l.057-.07 7-7a.5.5 0 01.708 0zm3.023-3.025a3.829 3.829 0 01.15 5.257l-.15.158-2 2a1 1 0 01-1.32.083l-.094-.083-.94-.94.708-.707.939.94 2-2 .132-.142a2.829 2.829 0 00-3.99-3.99l-.142.131-2 2 .939.939-.707.708-.94-.94a1 1 0 01-.082-1.32l.083-.094 2-2a3.828 3.828 0 015.414 0z"/>\n</svg>'}})),"Default"),"\n",l.createElement(t.p,null,"A Checkboxâs label is part of its touch target."),"\n","\n",l.createElement(s,{code:p},l.createElement(h)),"\n",l.createElement(t.h3,{id:"disabled",style:{position:"relative"}},l.createElement(t.a,{href:"#disabled","aria-label":"disabled permalink",className:"anchor before"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16">\n <path fill="currentColor" d="M4.441 7.38l.095.083.939.939-.708.707-.939-.939-2 2-.132.142a2.829 2.829 0 003.99 3.99l.142-.132 2-2-.939-.939.707-.708.94.94a1 1 0 01.083 1.32l-.083.094-2 2A3.828 3.828 0 01.972 9.621l.15-.158 2-2A1 1 0 014.34 7.31l.101.07zm7.413-3.234a.5.5 0 01.057.638l-.057.07-7 7a.5.5 0 01-.765-.638l.057-.07 7-7a.5.5 0 01.708 0zm3.023-3.025a3.829 3.829 0 01.15 5.257l-.15.158-2 2a1 1 0 01-1.32.083l-.094-.083-.94-.94.708-.707.939.94 2-2 .132-.142a2.829 2.829 0 00-3.99-3.99l-.142.131-2 2 .939.939-.707.708-.94-.94a1 1 0 01-.082-1.32l.083-.094 2-2a3.828 3.828 0 015.414 0z"/>\n</svg>'}})),"Disabled"),"\n",l.createElement(t.p,null,"A disabled Checkbox prevents user interaction. It doesnât appear in the tab order, canât receive focus, and may not\nbe read aloud by a screenreader."),"\n","\n",l.createElement(s,{code:u},l.createElement(g)),"\n",l.createElement(t.h3,{id:"hidden-label",style:{position:"relative"}},l.createElement(t.a,{href:"#hidden-label","aria-label":"hidden label permalink",className:"anchor before"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16">\n <path fill="currentColor" d="M4.441 7.38l.095.083.939.939-.708.707-.939-.939-2 2-.132.142a2.829 2.829 0 003.99 3.99l.142-.132 2-2-.939-.939.707-.708.94.94a1 1 0 01.083 1.32l-.083.094-2 2A3.828 3.828 0 01.972 9.621l.15-.158 2-2A1 1 0 014.34 7.31l.101.07zm7.413-3.234a.5.5 0 01.057.638l-.057.07-7 7a.5.5 0 01-.765-.638l.057-.07 7-7a.5.5 0 01.708 0zm3.023-3.025a3.829 3.829 0 01.15 5.257l-.15.158-2 2a1 1 0 01-1.32.083l-.094-.083-.94-.94.708-.707.939.94 2-2 .132-.142a2.829 2.829 0 00-3.99-3.99l-.142.131-2 2 .939.939-.707.708-.94-.94a1 1 0 01-.082-1.32l.083-.094 2-2a3.828 3.828 0 015.414 0z"/>\n</svg>'}})),"Hidden label"),"\n",l.createElement(t.p,null,"Checkbox labels can be hidden."),"\n","\n",l.createElement(s,{code:b},l.createElement(f)),"\n",l.createElement(t.h3,{id:"hint-text",style:{position:"relative"}},l.createElement(t.a,{href:"#hint-text","aria-label":"hint text permalink",className:"anchor before"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16">\n <path fill="currentColor" d="M4.441 7.38l.095.083.939.939-.708.707-.939-.939-2 2-.132.142a2.829 2.829 0 003.99 3.99l.142-.132 2-2-.939-.939.707-.708.94.94a1 1 0 01.083 1.32l-.083.094-2 2A3.828 3.828 0 01.972 9.621l.15-.158 2-2A1 1 0 014.34 7.31l.101.07zm7.413-3.234a.5.5 0 01.057.638l-.057.07-7 7a.5.5 0 01-.765-.
1638l.057-.07 7-7a.5.5 0 01.708 0zm3.023-3.025a3.829 3.829 0 01.15 5.257l-.15.158-2 2a1 1 0 01-1.32.083l-.094-.083-.94-.94.708-.707.939.94 2-2 .132-.142a2.829 2.829 0 00-3.99-3.99l-.142.131-2 2 .939.939-.707.708-.94-.94a1 1 0 01-.082-1.32l.083-.094 2-2a3.828 3.828 0 015.414 0z"/>\n</svg>'}})),"Hint text"),"\n",l.createElement(t.p,null,"Use Hint to add more context to the label."),"\n","\n",l.createElement(s,{code:v},l.createElement(x)),"\n",l.createElement(t.h3,{id:"indeterminate",style:{position:"relative"}},l.createElement(t.a,{href:"#indeterminate","aria-label":"indeterminate permalink",className:"anchor before"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16">\n <path fill="currentColor" d="M4.441 7.38l.095.083.939.939-.708.707-.939-.939-2 2-.132.142a2.829 2.829 0 003.99 3.99l.142-.132 2-2-.939-.939.707-.708.94.94a1 1 0 01.083 1.32l-.083.094-2 2A3.828 3.828 0 01.972 9.621l.15-.158 2-2A1 1 0 014.34 7.31l.101.07zm7.413-3.234a.5.5 0 01.057.638l-.057.07-7 7a.5.5 0 01-.765-.638l.057-.07 7-7a.5.5 0 01.708 0zm3.023-3.025a3.829 3.829 0 01.15 5.257l-.15.158-2 2a1 1 0 01-1.32.083l-.094-.083-.94-.94.708-.707.939.94 2-2 .132-.142a2.829 2.829 0 00-3.99-3.99l-.142.131-2 2 .939.939-.707.708-.94-.94a1 1 0 01-.082-1.32l.083-.094 2-2a3.828 3.828 0 015.414 0z"/>\n</svg>'}})),"Indeterminate"),"\n",l.createElement(t.p,null,"If the children of a Checkbox have different states (some on, some off) the parent Checkbox will\nshow an indeterminate state."),"\n","\n",l.createElement(s,{code:S},l.createElement(z)),"\n",l.createElement(t.h3,{id:"regular-weight-label",style:{position:"relative"}},l.createElement(t.a,{href:"#regular-weight-label","aria-label":"regular weight label permalink",className:"anchor before"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16">\n <path fill="currentColor" d="M4.441 7.38l.095.083.939.939-.708.707-.939-.939-2 2-.132.142a2.829 2.829 0 003.99 3.99l.142-.132 2-2-.939-.939.707-.708.94.94a1 1 0 01.083 1.32l-.083.094-2 2A3.828 3.828 0 01.972 9.621l.15-.158 2-2A1 1 0 014.34 7.31l.101.07zm7.413-3.234a.5.5 0 01.057.638l-.057.07-7 7a.5.5 0 01-.765-.638l.057-.07 7-7a.5.5 0 01.708 0zm3.023-3.025a3.829 3.829 0 01.15 5.257l-.15.158-2 2a1 1 0 01-1.32.083l-.094-.083-.94-.94.708-.707.939.94 2-2 .132-.142a2.829 2.829 0 00-3.99-3.99l-.142.131-2 2 .939.939-.707.708-.94-.94a1 1 0 01-.082-1.32l.083-.094 2-2a3.828 3.828 0 015.414 0z"/>\n</svg>'}})),"Regular weight label"),"\n",l.createElement(t.p,null,"Checkbox labels are bold by default, but they can be regular weight too."),"\n","\n",l.createElement(s,{code:_},l.createElement(N)),"\n",l.createElement(t.h3,{id:"validation",style:{position:"relative"}},l.createElement(t.a,{href:"#validation","aria-label":"validation permalink",className:"anchor before"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16">\n <path fill="currentColor" d="M4.441 7.38l.095.083.939.939-.708.707-.939-.939-2 2-.132.142a2.829 2.829 0 003.99 3.99l.142-.132 2-2-.939-.939.707-.708.94.94a1 1 0 01.083 1.32l-.083.094-2 2A3.828 3.828 0 01.972 9.621l.15-.158 2-2A1 1 0 014.34 7.31l.101.07zm7.413-3.234a.5.5 0 01.057.638l-.057.07-7 7a.5.5 0 01-.765-.638l.057-.07 7-7a.5.5 0 01.708 0zm3.023-3.025a3.829 3.829 0 01.15 5.257l-.15.158-2 2a1 1 0 01-1.32.083l-.094-.083-.94-.94.708-.707.939.94 2-2 .132-.142a2.829 2.829 0 00-3.99-3.99l-.142.131-2 2 .939.939-.707.708-.94-.94a1 1 0 01-.082-1.32l.083-.094 2-2a3.828 3.828 0 015.414 0z"/>\n</svg>'}})),"Validation"),"\n",l.createElement(t.p,null,"Show success, warning, and danger validation messages with the Message component."),"\n","\n",l.createElement(s,{code:M},l.createElement(A)),"\n",l.createElement(t.h2,{id:"how-to-use-it-well",style:{position:"relative"}},l.createElement(t.a,{href:"#how-to-use-it-well","aria-label":"how to use it well permalink",className:"anchor before"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16">
1\n <path fill="currentColor" d="M4.441 7.38l.095.083.939.939-.708.707-.939-.939-2 2-.132.142a2.829 2.829 0 003.99 3.99l.142-.132 2-2-.939-.939.707-.708.94.94a1 1 0 01.083 1.32l-.083.094-2 2A3.828 3.828 0 01.972 9.621l.15-.158 2-2A1 1 0 014.34 7.31l.101.07zm7.413-3.234a.5.5 0 01.057.638l-.057.07-7 7a.5.5 0 01-.765-.638l.057-.07 7-7a.5.5 0 01.708 0zm3.023-3.025a3.829 3.829 0 01.15 5.257l-.15.158-2 2a1 1 0 01-1.32.083l-.094-.083-.94-.94.708-.707.939.94 2-2 .132-.142a2.829 2.829 0 00-3.99-3.99l-.142.131-2 2 .939.939-.707.708-.94-.94a1 1 0 01-.082-1.32l.083-.094 2-2a3.828 3.828 0 015.414 0z"/>\n</svg>'}})),"How to use it well"),"\n",l.createElement(t.h3,{id:"use-to-select-any-number-of-options",style:{position:"relative"}},l.createElement(t.a,{href:"#use-to-select-any-number-of-options","aria-label":"use to select any number of options permalink",className:"anchor before"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16">\n <path fill="currentColor" d="M4.441 7.38l.095.083.939.939-.708.707-.939-.939-2 2-.132.142a2.829 2.829 0 003.99 3.99l.142-.132 2-2-.939-.939.707-.708.94.94a1 1 0 01.083 1.32l-.083.094-2 2A3.828 3.828 0 01.972 9.621l.15-.158 2-2A1 1 0 014.34 7.31l.101.07zm7.413-3.234a.5.5 0 01.057.638l-.057.07-7 7a.5.5 0 01-.765-.638l.057-.07 7-7a.5.5 0 01.708 0zm3.023-3.025a3.829 3.829 0 01.15 5.257l-.15.158-2 2a1 1 0 01-1.32.083l-.094-.083-.94-.94.708-.707.939.94 2-2 .132-.142a2.829 2.829 0 00-3.99-3.99l-.142.131-2 2 .939.939-.707.708-.94-.94a1 1 0 01-.082-1.32l.083-.094 2-2a3.828 3.828 0 015.414 0z"/>\n</svg>'}})),"Use to select any number of options"),"\n",l.createElement(i,null,l.createElement(c,{imageSource:e.data.checkboxSelectionDo.childFile.childImageSharp.gatsbyImageData},l.createElement(t.p,null,"Use to turn a standalone setting on and off, as a favorable alternative to a\n",l.createElement(t.a,{href:"/components/toggle"},"Toggle"),".")),l.createElement(d,{imageSource:e.data.checkboxStandaloneOptionDont.childFile.childImageSharp.gatsbyImageData},l.createElement(t.p,null,"Donât use to select exactly one option from a set of two or more. Use\n",l.createElement(t.a,{href:"/components/radio"},"Radios")," instead."))),"\n",l.createElement(t.h2,{id:"configuration",style:{position:"relative"}},l.createElement(t.a,{href:"#configuration","aria-label":"configuration permalink",className:"anchor before"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16">\n <path fill="currentColor" d="M4.441 7.38l.095.083.939.939-.708.707-.939-.939-2 2-.132.142a2.829 2.829 0 003.99 3.99l.142-.132 2-2-.939-.939.707-.708.94.94a1 1 0 01.083 1.32l-.083.094-2 2A3.828 3.828 0 01.972 9.621l.15-.158 2-2A1 1 0 014.34 7.31l.101.07zm7.413-3.234a.5.5 0 01.057.638l-.057.07-7 7a.5.5 0 01-.765-.638l.057-.07 7-7a.5.5 0 01.708 0zm3.023-3.025a3.829 3.829 0 01.15 5.257l-.15.158-2 2a1 1 0 01-1.32.083l-.094-.083-.94-.94.708-.707.939.94 2-2 .132-.142a2.829 2.829 0 00-3.99-3.99l-.142.131-2 2 .939.939-.707.708-.94-.94a1 1 0 01-.082-1.32l.083-.094 2-2a3.828 3.828 0 015.414 0z"/>\n</svg>'}})),"Configuration"),"\n",l.createElement(m,{reactPackage:e.data.mdx.package,components:e.data.mdx.components}),"\n",l.createElement(t.h2,{id:"api",style:{position:"relative"}},l.createElement(t.a,{href:"#api","aria-label":"api permalink",className:"anchor before"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16">\n <path fill="currentColor" d="M4.441 7.38l.095.083.939.939-.708.707-.939-.939-2 2-.132.142a2.829 2.829 0 003.99 3.99l.142-.132 2-2-.939-.939.707-.708.94.94a1 1 0 01.083 1.32l-.083.094-2 2A3.828 3.828 0 01.972 9.621l.15-.158 2-2A1 1 0 014.34 7.31l.101.07zm7.413-3.234a.5.5 0 01.057.638l-.057.07-7 7a.5.5 0 01-.765-.638l.057-.07 7-7a.5.5 0 01.708 0zm3.023-3.025a3.829 3.829 0 01.15 5.257l-.15.158-2 2a1 1 0 01-1.32.083l-.094-.083-.94-.94.708-.707.939.94 2-2 .132-.142a2.829 2.829 0 00-3.99-3.99l-.142.131-2 2 .939.939-.707.708-.94-.94a1 1 0 01-.082-1.32l.083-.094 2-2a3.828 3.828 0 015.414 0z"/>\n</svg>'}})),"API"),"\n",l.createElement(t.p,null,"The Checkbox component follows this structure:"),"\n",l.createElement(t.pre,null,l.createElement(t.code,{className:"language-jsx"},"<Field>\n <Checkbox>\n <Label />\n <Hint />\n </Checkbox>\n <Message />\n</Field>\n")),"\n",l.createElement(t.h3,{id:"checkbox",style:{position:"relative"}}
1,l.createElement(t.a,{href:"#checkbox","aria-label":"checkbox permalink",className:"anchor before"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16">\n <path fill="currentColor" d="M4.441 7.38l.095.083.939.939-.708.707-.939-.939-2 2-.132.142a2.829 2.829 0 003.99 3.99l.142-.132 2-2-.939-.939.707-.708.94.94a1 1 0 01.083 1.32l-.083.094-2 2A3.828 3.828 0 01.972 9.621l.15-.158 2-2A1 1 0 014.34 7.31l.101.07zm7.413-3.234a.5.5 0 01.057.638l-.057.07-7 7a.5.5 0 01-.765-.638l.057-.07 7-7a.5.5 0 01.708 0zm3.023-3.025a3.829 3.829 0 01.15 5.257l-.15.158-2 2a1 1 0 01-1.32.083l-.094-.083-.94-.94.708-.707.939.94 2-2 .132-.142a2.829 2.829 0 00-3.99-3.99l-.142.131-2 2 .939.939-.707.708-.94-.94a1 1 0 01-.082-1.32l.083-.094 2-2a3.828 3.828 0 015.414 0z"/>\n</svg>'}})),"Checkbox"),"\n",l.createElement(E,{components:e.data.mdx.components,componentName:"checkbox"}),"\n",l.createElement(t.p,null,"Nest a Checkbox within a ",l.createElement(t.a,{href:"#field"},"Field")," component."),"\n",l.createElement(w,{components:e.data.mdx.components,componentName:"checkbox"}),"\n",l.createElement(t.h3,{id:"field",style:{position:"relative"}},l.createElement(t.a,{href:"#field","aria-label":"field permalink",className:"anchor before"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16">\n <path fill="currentColor" d="M4.441 7.38l.095.083.939.939-.708.707-.939-.939-2 2-.132.142a2.829 2.829 0 003.99 3.99l.142-.132 2-2-.939-.939.707-.708.94.94a1 1 0 01.083 1.32l-.083.094-2 2A3.828 3.828 0 01.972 9.621l.15-.158 2-2A1 1 0 014.34 7.31l.101.07zm7.413-3.234a.5.5 0 01.057.638l-.057.07-7 7a.5.5 0 01-.765-.638l.057-.07 7-7a.5.5 0 01.708 0zm3.023-3.025a3.829 3.829 0 01.15 5.257l-.15.158-2 2a1 1 0 01-1.32.083l-.094-.083-.94-.94.708-.707.939.94 2-2 .132-.142a2.829 2.829 0 00-3.99-3.99l-.142.131-2 2 .939.939-.707.708-.94-.94a1 1 0 01-.082-1.32l.083-.094 2-2a3.828 3.828 0 015.414 0z"/>\n</svg>'}})),"Field"),"\n",l.createElement(E,{components:e.data.mdx.components,componentName:"field"}),"\n",l.createElement(t.p,null,"A Field provides accessibility attributes to its child ",l.createElement(t.a,{href:"#checkbox"},"Checkbox")," field by associating it\nwith the corresponding ",l.createElement(t.a,{href:"#label"},"Label")," and ",l.createElement(t.a,{href:"#hint"},"Hint"),"."),"\n",l.createElement(w,{components:e.data.mdx.components,componentName:"field"}),"\n",l.createElement(t.h3,{id:"hint",style:{position:"relative"}},l.createElement(t.a,{href:"#hint","aria-label":"hint permalink",className:"anchor before"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16">\n <path fill="currentColor" d="M4.441 7.38l.095.083.939.939-.708.707-.939-.939-2 2-.132.142a2.829 2.829 0 003.99 3.99l.142-.132 2-2-.939-.939.707-.708.94.94a1 1 0 01.083 1.32l-.083.094-2 2A3.828 3.828 0 01.972 9.621l.15-.158 2-2A1 1 0 014.34 7.31l.101.07zm7.413-3.234a.5.5 0 01.057.638l-.057.07-7 7a.5.5 0 01-.765-.638l.057-.07 7-7a.5.5 0 01.708 0zm3.023-3.025a3.829 3.829 0 01.15 5.257l-.15.158-2 2a1 1 0 01-1.32.083l-.094-.083-.94-.94.708-.707.939.94 2-2 .132-.142a2.829 2.829 0 00-3.99-3.99l-.142.131-2 2 .939.939-.707.708-.94-.94a1 1 0 01-.082-1.32l.083-.094 2-2a3.828 3.828 0 015.414 0z"/>\n</svg>'}})),"Hint"),"\n",l.createElement(E,{components:e.data.mdx.components,componentName:"hint"}),"\n",l.createElement(t.p,null,"Nest the Hint within the ",l.createElement(t.a,{href:"#checkbox"},"Checkbox")," component."),"\n",l.createElement(w,{components:e.data.mdx.components,componentName:"hint"}),"\n",l.createElement(t.h3,{id:"label",style:{position:"relative"}},l.createElement(t.a,{href:"#label","aria-label":"label permalink",className:"anchor before"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16">
1\n <path fill="currentColor" d="M4.441 7.38l.095.083.939.939-.708.707-.939-.939-2 2-.132.142a2.829 2.829 0 003.99 3.99l.142-.132 2-2-.939-.939.707-.708.94.94a1 1 0 01.083 1.32l-.083.094-2 2A3.828 3.828 0 01.972 9.621l.15-.158 2-2A1 1 0 014.34 7.31l.101.07zm7.413-3.234a.5.5 0 01.057.638l-.057.07-7 7a.5.5 0 01-.765-.638l.057-.07 7-7a.5.5 0 01.708 0zm3.023-3.025a3.829 3.829 0 01.15 5.257l-.15.158-2 2a1 1 0 01-1.32.083l-.094-.083-.94-.94.708-.707.939.94 2-2 .132-.142a2.829 2.829 0 00-3.99-3.99l-.142.131-2 2 .939.939-.707.708-.94-.94a1 1 0 01-.082-1.32l.083-.094 2-2a3.828 3.828 0 015.414 0z"/>\n</svg>'}})),"Label"),"\n",l.createElement(E,{components:e.data.mdx.components,componentName:"label"}),"\n",l.createElement(t.p,null,"Nest the Label within the ",l.createElement(t.a,{href:"#checkbox"},"Checkbox")," component."),"\n",l.createElement(w,{components:e.data.mdx.components,componentName:"label"}),"\n",l.createElement(t.h3,{id:"message",style:{position:"relative"}},l.createElement(t.a,{href:"#message","aria-label":"message permalink",className:"anchor before"},l.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16">\n <path fill="currentColor" d="M4.441 7.38l.095.083.939.939-.708.707-.939-.939-2 2-.132.142a2.829 2.829 0 003.99 3.99l.142-.132 2-2-.939-.939.707-.708.94.94a1 1 0 01.083 1.32l-.083.094-2 2A3.828 3.828 0 01.972 9.621l.15-.158 2-2A1 1 0 014.34 7.31l.101.07zm7.413-3.234a.5.5 0 01.057.638l-.057.07-7 7a.5.5 0 01-.765-.638l.057-.07 7-7a.5.5 0 01.708 0zm3.023-3.025a3.829 3.829 0 01.15 5.257l-.15.158-2 2a1 1 0 01-1.32.083l-.094-.083-.94-.94.708-.707.939.94 2-2 .132-.142a2.829 2.829 0 00-3.99-3.99l-.142.131-2 2 .939.939-.707.708-.94-.94a1 1 0 01-.082-1.32l.083-.094 2-2a3.828 3.828 0 015.414 0z"/>\n</svg>'}})),"Message"),"\n",l.createElement(E,{components:e.data.mdx.components,componentName:"message"}),"\n",l.createElement(t.p,null,"The Message component applies appropriate icon and styles based on the validation provided. Nest\nit within a ",l.createElement(t.a,{href:"#field"},"Field")," component."),"\n",l.createElement(w,{components:e.data.mdx.components,componentName:"message"}))}var P=function(e={}){const{wrapper:t}=Object.assign({},(0,a.a)(),e.components);return t?l.createElement(t,e,l.createElement(H,e)):H(e)};function T(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}}}]); 2//# sourceMappingURL=component---src-pages-components-checkbox-mdx-994058bc65c83b6317ae.js.map
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.