import{Bt as e,It as t,Lt as n,Mt as r,Qt as i,Vt as a,Xt as o,qt as s}from"./index-qNrWYJXL.js";var c={};function l(r,c){let l=o(`DocsComponents`),u=o(`CCardHeader`),d=o(`CFormCheck`),f=o(`DocsExample`),p=o(`CCardBody`),m=o(`CCard`),h=o(`CCol`),g=o(`CFormSwitch`),_=o(`CRow`);return s(),n(_,null,{default:i(()=>[a(h,{xs:12},{default:i(()=>[a(l,{href:`forms/checks-radios.html`}),a(m,{class:`mb-4`},{default:i(()=>[a(u,null,{default:i(()=>[...c[0]||=[t(`strong`,null,`Vue Checkbox`,-1)]]),_:1}),a(p,null,{default:i(()=>[a(f,{href:`forms/checks-radios.html`},{default:i(()=>[a(d,{id:`flexCheckDefault`,label:`Default checkbox`}),a(d,{id:`flexCheckChecked`,label:`Checked checkbox`,checked:``})]),_:1})]),_:1})]),_:1})]),_:1}),a(h,{xs:12},{default:i(()=>[a(m,{class:`mb-4`},{default:i(()=>[a(u,null,{default:i(()=>[...c[1]||=[t(`strong`,null,`Vue Checkbox`,-1),e(),t(`small`,null,`Disabled`,-1)]]),_:1}),a(p,null,{default:i(()=>[c[2]||=t(`p`,{class:`text-body-secondary small`},[e(` Add the `),t(`code`,null,`disabled`),e(` attribute and the associated `),t(`code`,null,`<label>`),e(`s are automatically styled to match with a lighter color to help indicate the input's state. `)],-1),a(f,{href:`forms/checks-radios.html#disabled`},{default:i(()=>[a(d,{label:`Disabled checkbox`,disabled:``}),a(d,{label:`Disabled checked checkbox`,checked:``,disabled:``})]),_:1})]),_:1})]),_:1})]),_:1}),a(h,{xs:12},{default:i(()=>[a(m,{class:`mb-4`},{default:i(()=>[a(u,null,{default:i(()=>[...c[3]||=[t(`strong`,null,`Vue Radio`,-1)]]),_:1}),a(p,null,{default:i(()=>[c[4]||=t(`p`,{class:`text-body-secondary small`},[e(` Add the `),t(`code`,null,`disabled`),e(` attribute and the associated `),t(`code`,null,`<label>`),e(`s are automatically styled to match with a lighter color to help indicate the input's state. `)],-1),a(f,{href:`forms/checks-radios.html#radios`},{default:i(()=>[a(d,{id:`flexRadioDefault1`,type:`radio`,name:`flexRadioDefault`,label:`Default radio`}),a(d,{id:`flexRadioDefault2`,type:`radio`,name:`flexRadioDefault`,label:`Checked radio`,checked:``})]),_:1})]),_:1})]),_:1})]),_:1}),a(h,{xs:12},{default:i(()=>[a(m,{class:`mb-4`},{default:i(()=>[a(u,null,{default:i(()=>[...c[5]||=[t(`strong`,null,`Vue Radio`,-1),e(),t(`small`,null,`Disabled`,-1)]]),_:1}),a(p,null,{default:i(()=>[a(f,{href:`forms/checks-radios.html#disabled-1`},{default:i(()=>[a(d,{id:`flexRadioDisabled`,type:`radio`,name:`flexRadioDisabled`,label:`Disabled radio`,disabled:``}),a(d,{id:`flexRadioCheckedDisabled`,type:`radio`,name:`flexRadioDisabled`,label:`Disabled checked radio`,checked:``,disabled:``})]),_:1})]),_:1})]),_:1})]),_:1}),a(h,{xs:12},{default:i(()=>[a(m,{class:`mb-4`},{default:i(()=>[a(u,null,{default:i(()=>[...c[6]||=[t(`strong`,null,`Vue Switches`,-1)]]),_:1}),a(p,null,{default:i(()=>[c[7]||=t(`p`,{class:`text-body-secondary small`},[e(` A switch has the markup of a custom checkbox but uses the `),t(`code`,null,`switch`),e(` boolean properly to render a toggle switch. Switches also support the `),t(`code`,null,`disabled`),e(` attribute. `)],-1),a(f,{href:`forms/checks-radios.html#switches`},{default:i(()=>[a(g,{id:`formSwitchCheckDefault`,label:`Default switch checkbox input`}),a(g,{id:`formSwitchCheckChecked`,label:`Checked switch checkbox input`,checked:``}),a(g,{id:`formSwitchCheckDisabled`,label:`Disabled switch checkbox input`,disabled:``}),a(g,{id:`formSwitchCheckCheckedDisabled`,label:`Disabled checked switch checkbox input`,checked:``,disabled:``})]),_:1})]),_:1})]),_:1})]),_:1}),a(h,{xs:12},{default:i(()=>[a(m,{class:`mb-4`},{default:i(()=>[a(u,null,{default:i(()=>[...c[8]||=[t(`strong`,null,`Vue Switches`,-1),e(),t(`small`,null,`Sizes`,-1)]]),_:1}),a(p,null,{default:i(()=>[a(f,{href:`forms/checks-radios.html#sizes`},{default:i(()=>[a(g,{id:`formSwitchCheckDefault`,label:`Default switch checkbox input`}),a(g,{id:`formSwitchCheckDefaultLg`,size:`lg`,label:`Large switch checkbox input`}),a(g,{id:`formSwitchCheckDefaultXL`,size:`xl`,label:`Extra large switch checkbox input`})]),_:1})]),_:1})]),_:1})]),_:1}),a(h,{xs:12},{default:i(()=>[a(m,{class:`mb-4`},{default:i(()=>[a(u,null,{default:i(()=>[...c[9]||=[t(`strong`,null,`Vue Checks and Radios`,-1),t(`small`,null,`Default layout (stacked)`,-1)]]),_:1}),a(p,null,{default:i(()=>[c[10]||=t(`p`,{class:`text-body-secondary small`},` By default, any number of checkboxes and radios that are immediate sibling will be vertically stacked and appropriately spaced. `,-1),a(f,{href:`forms/checks-radios.html#default-stacked`},{default:i(()=>[a(d,{id:`defaultCheck1`,label:`Default checkbox`}),a(d,{id:`defaultCheck2`,label:`Disabled checkbox`,disabled:``})]),_:1}),a(f,{href:`forms/checks-radios.html#default-stacked`},{default:i(()=>[a(d,{id:`exampleRadios1`,type:`radio`,name:`exampleRadios`,value:`option1`,label:`Default radio`,checked:``}),a(d,{id:`exampleRadios2`,type:`radio`,name:`exampleRadios`,value:`option2`,label:`Second default radio`}),a(d,{id:`exampleRadios3`,type:`radio`,name:`exampleRadios`,value:`option3`,label:`Disabled radio`,disabled:``})]),_:1})]),_:1})]),_:1})]),_:1}),a(h,{xs:12},{default:i(()=>[a(m,{class:`mb-4`},{default:i(()=>[a(u,null,{default:i(()=>[...c[11]||=[t(`strong`,null,`Vue Checks and Radios`,-1),e(),t(`small`,null,`Inline`,-1)]]),_:1}),a(p,null,{default:i(()=>[c[12]||=t(`p`,{class:`text-body-secondary small`},[e(` Group checkboxes or radios on the same horizontal row by adding `),t(`code`,null,`inline`),e(` boolean property to any `),t(`code`,null,`<CFormCheck>`),e(`. `)],-1),a(f,{href:`forms/checks-radios.html#inline`},{default:i(()=>[a(d,{id:`inlineCheckbox1`,inline:``,value:`option1`,label:`1`}),a(d,{id:`inlineCheckbox2`,inline:``,value:`option2`,label:`2`}),a(d,{id:`inlineCheckbox3`,inline:``,value:`option3`,label:`3 (disabled)`,disabled:``})]),_:1}),a(f,{href:`forms/checks-radios.html#inline`},{default:i(()=>[a(d,{id:`inlineCheckbox1`,inline:``,type:`radio`,name:`inlineRadioOptions`,value:`option1`,label:`1`}),a(d,{id:`inlineCheckbox2`,inline:``,type:`radio`,name:`inlineRadioOptions`,value:`option2`,label:`2`}),a(d,{id:`inlineCheckbox3`,inline:``,type:`radio`,name:`inlineRadioOptions`,value:`option3`,label:`3 (disabled)`,disabled:``})]),_:1})]),_:1})]),_:1})]),_:1}),a(h,{xs:12},{default:i(()=>[a(m,{class:`mb-4`},{default:i(()=>[a(u,null,{default:i(()=>[...c[13]||=[t(`strong`,null,`Vue Checks and Radios`,-1),e(),t(`small`,null,`Without labels`,-1)]]),_:1}),a(p,null,{default:i(()=>[c[14]||=t(`p`,{class:`text-body-secondary small`},[e(` Remember to still provide some form of accessible name for assistive technologies (for instance, using `),t(`code`,null,`aria-label`),e(`). `)],-1),a(f,{href:`forms/checks-radios.html#without-labels`},{default:i(()=>[t(`div`,null,[a(d,{id:`checkboxNoLabel`,value:``,"aria-label":`...`})]),t(`div`,null,[a(d,{id:`radioNoLabel`,type:`radio`,name:`radioNoLabel`,value:``,"aria-label":`...`})])]),_:1})]),_:1})]),_:1})]),_:1}),a(h,{xs:12},{default:i(()=>[a(m,{class:`mb-4`},{default:i(()=>[a(u,null,{default:i(()=>[...c[15]||=[t(`strong`,null,`Toggle buttons`,-1)]]),_:1}),a(p,null,{default:i(()=>[c[16]||=t(`p`,{class:`text-body-secondary small`},[e(` Create button-like checkboxes and radio buttons by using `),t(`code`,null,`button`),e(` boolean property on the `),t(`code`,null,`<CFormCheck>`),e(` component. These toggle buttons can further be grouped in a button group if needed. `)],-1),a(f,{href:`forms/checks-radios.html#toggle-buttons`},{default:i(()=>[a(d,{id:`btn-check`,button:{color:`primary`},autocomplete:`off`,label:`Single toggle`})]),_:1}),a(f,{href:`forms/checks-radios.html#toggle-buttons`},{default:i(()=>[a(d,{id:`btn-check-2`,button:{color:`primary`},autocomplete:`off`,label:`Checked`,checked:``})]),_:1}),a(f,{href:`forms/checks-radios.html#toggle-buttons`},{default:i(()=>[a(d,{id:`btn-check-3`,button:{color:`primary`},autocomplete:`off`,label:`Disabled`,disabled:``})]),_:1}),c[17]||=t(`h3`,null,`Radio toggle buttons`,-1),a(f,{href:`forms/checks-radios.html#toggle-buttons`},{default:i(()=>[a(d,{id:`option1`,button:{color:`secondary`},type:`radio`,name:`options`,autocomplete:`off`,label:`Checked`,checked:``}),a(d,{id:`option2`,button:{color:`secondary`},type:`radio`,name:`options`,autocomplete:`off`,label:`Radio`}),a(d,{id:`option3`,button:{color:`secondary`},type:`radio`,name:`options`,autocomplete:`off`,label:`Radio`,disabled:``}),a(d,{id:`option4`,button:{color:`secondary`},type:`radio`,name:`options`,autocomplete:`off`,label:`Radio`})]),_:1}),c[18]||=t(`h3`,null,`Outlined styles`,-1),c[19]||=t(`p`,{class:`text-body-secondary small`},` Different variants of button, such at the various outlined styles, are supported. `,-1),a(f,{href:`forms/checks-radios.html#toggle-buttons`},{default:i(()=>[t(`div`,null,[a(d,{id:`btn-check-outlined`,button:{color:`primary`,variant:`outline`},autocomplete:`off`,label:`Single toggle`})]),t(`div`,null,[a(d,{id:`btn-check-2-outlined`,button:{color:`secondary`,variant:`outline`},autocomplete:`off`,label:`Checked`,checked:``})]),t(`div`,null,[a(d,{id:`success-outlined`,button:{color:`success`,variant:`outline`},type:`radio`,name:`options-outlined`,autocomplete:`off`,label:`Radio`,checked:``}),a(d,{id:`danger-outlined`,button:{color:`danger`,variant:`outline`},type:`radio`,name:`options-outlined`,autocomplete:`off`,label:`Radio`})])]),_:1})]),_:1})]),_:1})]),_:1})]),_:1})}var u=r(c,[[`render`,l]]);export{u as default};