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={},l={class:`row mb-3`},u={class:`col-sm-10 offset-sm-2`};function d(r,c){let d=o(`DocsComponents`),f=o(`CCardHeader`),p=o(`CFormInput`),m=o(`CCol`),h=o(`CRow`),g=o(`DocsExample`),_=o(`CCardBody`),v=o(`CCard`),y=o(`CFormLabel`),b=o(`CFormSelect`),x=o(`CFormCheck`),S=o(`CButton`),C=o(`CForm`),w=o(`CInputGroupText`),T=o(`CInputGroup`);return s(),n(h,null,{default:i(()=>[a(m,{xs:12},{default:i(()=>[a(d,{href:`forms/layout.html`}),a(v,{class:`mb-4`},{default:i(()=>[a(f,null,{default:i(()=>[...c[0]||=[t(`strong`,null,`Layout`,-1),e(),t(`small`,null,`Form grid`,-1)]]),_:1}),a(_,null,{default:i(()=>[c[1]||=t(`p`,{class:`text-body-secondary small`},` More complex forms can be built using our grid classes. Use these for form layouts that require multiple columns, varied widths, and additional alignment options. `,-1),a(g,{href:`forms/layout.html#form-grid`},{default:i(()=>[a(h,null,{default:i(()=>[a(m,{xs:``},{default:i(()=>[a(p,{placeholder:`First name`,"aria-label":`First name`})]),_:1}),a(m,{xs:``},{default:i(()=>[a(p,{placeholder:`Last name`,"aria-label":`Last name`})]),_:1})]),_:1})]),_:1})]),_:1})]),_:1})]),_:1}),a(m,{xs:12},{default:i(()=>[a(v,{class:`mb-4`},{default:i(()=>[a(f,null,{default:i(()=>[...c[2]||=[t(`strong`,null,`Layout`,-1),e(),t(`small`,null,`Gutters`,-1)]]),_:1}),a(_,null,{default:i(()=>[c[12]||=t(`p`,{class:`text-body-secondary small`},[e(` By adding `),t(`a`,{href:`https://coreui.io/docs/layout/gutters/`},`gutter modifier classes`),e(` , you can have control over the gutter width in as well the inline as block direction. `)],-1),a(g,{href:`forms/layout.html#gutters`},{default:i(()=>[a(h,{class:`g-3`},{default:i(()=>[a(m,{xs:``},{default:i(()=>[a(p,{placeholder:`First name`,"aria-label":`First name`})]),_:1}),a(m,{xs:``},{default:i(()=>[a(p,{placeholder:`Last name`,"aria-label":`Last name`})]),_:1})]),_:1})]),_:1}),c[13]||=t(`p`,{class:`text-body-secondary small`},` More complex layouts can also be created with the grid system. `,-1),a(g,{href:`forms/layout.html#gutters`},{default:i(()=>[a(C,{class:`row g-3`},{default:i(()=>[a(m,{md:6},{default:i(()=>[a(y,{for:`inputEmail4`},{default:i(()=>[...c[3]||=[e(`Email`,-1)]]),_:1}),a(p,{id:`inputEmail4`,type:`email`})]),_:1}),a(m,{md:6},{default:i(()=>[a(y,{for:`inputPassword4`},{default:i(()=>[...c[4]||=[e(`Password`,-1)]]),_:1}),a(p,{id:`inputPassword4`,type:`password`})]),_:1}),a(m,{xs:12},{default:i(()=>[a(y,{for:`inputAddress`},{default:i(()=>[...c[5]||=[e(`Address`,-1)]]),_:1}),a(p,{id:`inputAddress`,placeholder:`1234 Main St`})]),_:1}),a(m,{xs:12},{default:i(()=>[a(y,{for:`inputAddress2`},{default:i(()=>[...c[6]||=[e(`Address 2`,-1)]]),_:1}),a(p,{id:`inputAddress2`,placeholder:`Apartment, studio, or floor`})]),_:1}),a(m,{md:6},{default:i(()=>[a(y,{for:`inputCity`},{default:i(()=>[...c[7]||=[e(`City`,-1)]]),_:1}),a(p,{id:`inputCity`})]),_:1}),a(m,{md:4},{default:i(()=>[a(y,{for:`inputState`},{default:i(()=>[...c[8]||=[e(`State`,-1)]]),_:1}),a(b,{id:`inputState`},{default:i(()=>[...c[9]||=[t(`option`,null,`Choose...`,-1),t(`option`,null,`...`,-1)]]),_:1})]),_:1}),a(m,{md:2},{default:i(()=>[a(y,{for:`inputZip`},{default:i(()=>[...c[10]||=[e(`Zip`,-1)]]),_:1}),a(p,{id:`inputZip`})]),_:1}),a(m,{xs:12},{default:i(()=>[a(x,{id:`gridCheck`,type:`checkbox`,label:`Check me out`})]),_:1}),a(m,{xs:12},{default:i(()=>[a(S,{type:`submit`,color:`primary`},{default:i(()=>[...c[11]||=[e(`Sign in`,-1)]]),_:1})]),_:1})]),_:1})]),_:1})]),_:1})]),_:1})]),_:1}),a(m,{xs:12},{default:i(()=>[a(v,{class:`mb-4`},{default:i(()=>[a(f,null,{default:i(()=>[...c[14]||=[t(`strong`,null,`Layout`,-1),e(),t(`small`,null,`Horizontal form`,-1)]]),_:1}),a(_,null,{default:i(()=>[c[19]||=t(`p`,{class:`text-body-secondary small`},[e(` Create horizontal forms with the grid by adding the `),t(`code`,null,`.row`),e(` class to form groups and using the `),t(`code`,null,`.col-*-*`),e(` classes to specify the width of your labels and controls. Be sure to add `),t(`code`,null,`.col-form-label`),e(` to your `),t(`code`,null,`<CFormLabel>`),e(`s as well so they're vertically centered with their associated form controls. `)],-1),c[20]||=t(`p`,{class:`text-body-secondary small`},[e(` At times, you maybe need to use margin or padding utilities to create that perfect alignment you need. For example, we've removed the `),t(`code`,null,`padding-top`),e(` on our stacked radio inputs label to better align the text baseline. `)],-1),a(g,{href:`forms/layout.html#horizontal-form`},{default:i(()=>[a(C,null,{default:i(()=>[a(h,{class:`mb-3`},{default:i(()=>[a(y,{for:`inputEmail3`,class:`col-sm-2 col-form-label`},{default:i(()=>[...c[15]||=[e(` Email `,-1)]]),_:1}),a(m,{sm:10},{default:i(()=>[a(p,{id:`inputEmail3`,type:`email`})]),_:1})]),_:1}),a(h,{class:`mb-3`},{default:i(()=>[a(y,{for:`inputPassword3`,class:`col-sm-2 col-form-label`},{default:i(()=>[...c[16]||=[e(` Password `,-1)]]),_:1}),a(m,{sm:10},{default:i(()=>[a(p,{id:`inputPassword3`,type:`password`})]),_:1})]),_:1}),t(`fieldset`,l,[c[17]||=t(`legend`,{class:`col-form-label col-sm-2 pt-0`},`Radios`,-1),a(m,{sm:10},{default:i(()=>[a(x,{id:`gridRadios1`,type:`radio`,name:`gridRadios`,value:`option1`,label:`First radio`,checked:``}),a(x,{id:`gridRadios2`,type:`radio`,name:`gridRadios`,value:`option2`,label:`Second radio`}),a(x,{id:`gridRadios3`,type:`radio`,name:`gridRadios`,value:`option3`,label:`Third disabled radio`,disabled:``})]),_:1})]),a(h,{class:`mb-3`},{default:i(()=>[t(`div`,u,[a(x,{id:`gridCheck1`,type:`checkbox`,label:`Example checkbox`})])]),_:1}),a(S,{type:`submit`,color:`primary`},{default:i(()=>[...c[18]||=[e(`Sign in`,-1)]]),_:1})]),_:1})]),_:1})]),_:1})]),_:1})]),_:1}),a(m,{xs:12},{default:i(()=>[a(v,{class:`mb-4`},{default:i(()=>[a(f,null,{default:i(()=>[...c[21]||=[t(`strong`,null,`Layout`,-1),e(),t(`small`,null,`Horizontal form label sizing`,-1)]]),_:1}),a(_,null,{default:i(()=>[c[25]||=t(`p`,{class:`text-body-secondary small`},[e(` Be sure to use `),t(`code`,null,`.col-form-label-sm`),e(` or `),t(`code`,null,`.col-form-label-lg`),e(` to your `),t(`code`,null,`<CFormLabel>`),e(`s or `),t(`code`,null,`<legend>`),e(`s to correctly follow the size of `),t(`code`,null,`.form-control-lg`),e(` and `),t(`code`,null,`.form-control-sm`),e(`. `)],-1),a(g,{href:`forms/layout.html#horizontal-form-label-sizing`},{default:i(()=>[a(h,{class:`mb-3`},{default:i(()=>[a(y,{for:`colFormLabelSm`,class:`col-sm-2 col-form-label col-form-label-sm`},{default:i(()=>[...c[22]||=[e(` Email `,-1)]]),_:1}),a(m,{sm:10},{default:i(()=>[a(p,{id:`colFormLabelSm`,type:`email`,class:`form-control form-control-sm`,placeholder:`col-form-label-sm`})]),_:1})]),_:1}),a(h,{class:`mb-3`},{default:i(()=>[a(y,{for:`colFormLabel`,class:`col-sm-2 col-form-label`},{default:i(()=>[...c[23]||=[e(` Email `,-1)]]),_:1}),a(m,{sm:10},{default:i(()=>[a(p,{id:`colFormLabel`,type:`email`,placeholder:`col-form-label`})]),_:1})]),_:1}),a(h,null,{default:i(()=>[a(y,{for:`colFormLabelLg`,class:`col-sm-2 col-form-label col-form-label-lg`},{default:i(()=>[...c[24]||=[e(` Email `,-1)]]),_:1}),a(m,{sm:10},{default:i(()=>[a(p,{id:`colFormLabelLg`,type:`email`,class:`form-control form-control-lg`,placeholder:`col-form-label-lg`})]),_:1})]),_:1})]),_:1})]),_:1})]),_:1})]),_:1}),a(m,{xs:12},{default:i(()=>[a(v,{class:`mb-4`},{default:i(()=>[a(f,null,{default:i(()=>[...c[26]||=[t(`strong`,null,`Layout`,-1),e(),t(`small`,null,`Column sizing`,-1)]]),_:1}),a(_,null,{default:i(()=>[c[27]||=t(`p`,{class:`text-body-secondary small`},[e(` As shown in the previous examples, our grid system allows you to place any number of `),t(`code`,null,`<CCol>`),e(`s within a `),t(`code`,null,`<CRow>`),e(`. They'll split the available width equally between them. You may also pick a subset of your columns to take up more or less space, while the remaining `),t(`code`,null,`<CCol>`),e(`s equally split the rest, with specific column classes like `),t(`code`,null,`<CCol sm="7">`),e(`. `)],-1),a(g,{href:`forms/layout.html#column-sizing`},{default:i(()=>[a(h,{class:`g-3`},{default:i(()=>[a(m,{sm:7},{default:i(()=>[a(p,{placeholder:`City`,"aria-label":`City`})]),_:1}),a(m,{sm:``},{default:i(()=>[a(p,{placeholder:`State`,"aria-label":`State`})]),_:1}),a(m,{sm:``},{default:i(()=>[a(p,{placeholder:`Zip`,"aria-label":`Zip`})]),_:1})]),_:1})]),_:1})]),_:1})]),_:1})]),_:1}),a(m,{xs:12},{default:i(()=>[a(v,{class:`mb-4`},{default:i(()=>[a(f,null,{default:i(()=>[...c[28]||=[t(`strong`,null,`Layout`,-1),e(),t(`small`,null,`Auto-sizing`,-1)]]),_:1}),a(_,null,{default:i(()=>[c[41]||=t(`p`,{class:`text-body-secondary small`},[e(` The example below uses a flexbox utility to vertically center the contents and changes `),t(`code`,null,`<CCol>`),e(` to `),t(`code`,null,`<CCol xs="auto">`),e(` so that your columns only take up as much space as needed. Put another way, the column sizes itself based on the contents. `)],-1),a(g,{href:`forms/layout.html#auto-sizing`},{default:i(()=>[a(C,{class:`row gy-2 gx-3 align-items-center`},{default:i(()=>[a(m,{xs:`auto`},{default:i(()=>[a(y,{class:`visually-hidden`,for:`autoSizingInput`},{default:i(()=>[...c[29]||=[e(` Name `,-1)]]),_:1}),a(p,{id:`autoSizingInput`,placeholder:`Jane Doe`})]),_:1}),a(m,{xs:`auto`},{default:i(()=>[a(y,{class:`visually-hidden`,for:`autoSizingInputGroup`},{default:i(()=>[...c[30]||=[e(` Username `,-1)]]),_:1}),a(T,null,{default:i(()=>[a(w,null,{default:i(()=>[...c[31]||=[e(`@`,-1)]]),_:1}),a(p,{id:`autoSizingInputGroup`,placeholder:`Username`})]),_:1})]),_:1}),a(m,{xs:`auto`},{default:i(()=>[a(y,{class:`visually-hidden`,for:`autoSizingSelect`},{default:i(()=>[...c[32]||=[e(` Preference `,-1)]]),_:1}),a(b,{id:`autoSizingSelect`},{default:i(()=>[...c[33]||=[t(`option`,null,`Choose...`,-1),t(`option`,{value:`1`},`One`,-1),t(`option`,{value:`2`},`Two`,-1),t(`option`,{value:`3`},`Three`,-1)]]),_:1})]),_:1}),a(m,{xs:`auto`},{default:i(()=>[a(x,{id:`autoSizingCheck`,type:`checkbox`,label:`Remember me`})]),_:1}),a(m,{xs:`auto`},{default:i(()=>[a(S,{type:`submit`,color:`primary`},{default:i(()=>[...c[34]||=[e(`Submit`,-1)]]),_:1})]),_:1})]),_:1})]),_:1}),c[42]||=t(`p`,{class:`text-body-secondary small`},` You can then remix that once again with size-specific column classes. `,-1),a(g,{href:`forms/layout.html#auto-sizing`},{default:i(()=>[a(C,{class:`row gx-3 gy-2 align-items-center`},{default:i(()=>[a(m,{sm:3},{default:i(()=>[a(y,{class:`visually-hidden`,for:`specificSizeInputName`},{default:i(()=>[...c[35]||=[e(` Name `,-1)]]),_:1}),a(p,{id:`specificSizeInputName`,placeholder:`Jane Doe`})]),_:1}),a(m,{sm:3},{default:i(()=>[a(y,{class:`visually-hidden`,for:`specificSizeInputGroupUsername`},{default:i(()=>[...c[36]||=[e(` Username `,-1)]]),_:1}),a(T,null,{default:i(()=>[a(w,null,{default:i(()=>[...c[37]||=[e(`@`,-1)]]),_:1}),a(p,{id:`specificSizeInputGroupUsername`,placeholder:`Username`})]),_:1})]),_:1}),a(m,{sm:3},{default:i(()=>[a(y,{class:`visually-hidden`,for:`specificSizeSelect`},{default:i(()=>[...c[38]||=[e(` Preference `,-1)]]),_:1}),a(b,{id:`specificSizeSelect`},{default:i(()=>[...c[39]||=[t(`option`,null,`Choose...`,-1),t(`option`,{value:`1`},`One`,-1),t(`option`,{value:`2`},`Two`,-1),t(`option`,{value:`3`},`Three`,-1)]]),_:1})]),_:1}),a(m,{xs:`auto`},{default:i(()=>[a(x,{id:`autoSizingCheck2`,type:`checkbox`,label:`Remember me`})]),_:1}),a(m,{xs:`auto`},{default:i(()=>[a(S,{type:`submit`,color:`primary`},{default:i(()=>[...c[40]||=[e(`Submit`,-1)]]),_:1})]),_:1})]),_:1})]),_:1})]),_:1})]),_:1})]),_:1}),a(m,{xs:12},{default:i(()=>[a(v,{class:`mb-4`},{default:i(()=>[a(f,null,{default:i(()=>[...c[43]||=[t(`strong`,null,`Layout`,-1),e(),t(`small`,null,`Inline forms`,-1)]]),_:1}),a(_,null,{default:i(()=>[c[49]||=t(`p`,{class:`text-body-secondary small`},[e(` Use the `),t(`code`,null,`<CCol xs="auto">`),e(` class to create horizontal layouts. By adding `),t(`a`,{href:`https://coreui.io/docs/layout/gutters/`},`gutter modifier classes`),e(`, we will have gutters in horizontal and vertical directions. The `),t(`code`,null,`.align-items-center`),e(` aligns the form elements to the middle, making the `),t(`code`,null,`<CFormCheck>`),e(` align properly. `)],-1),a(g,{href:`forms/layout.html#inline-forms`},{default:i(()=>[a(C,{class:`row row-cols-lg-auto g-3 align-items-center`},{default:i(()=>[a(m,{xs:12},{default:i(()=>[a(y,{class:`visually-hidden`,for:`inlineFormInputGroupUsername`},{default:i(()=>[...c[44]||=[e(` Username `,-1)]]),_:1}),a(T,null,{default:i(()=>[a(w,null,{default:i(()=>[...c[45]||=[e(`@`,-1)]]),_:1}),a(p,{id:`inlineFormInputGroupUsername`,placeholder:`Username`})]),_:1})]),_:1}),a(m,{xs:12},{default:i(()=>[a(y,{class:`visually-hidden`,for:`inlineFormSelectPref`},{default:i(()=>[...c[46]||=[e(` Preference `,-1)]]),_:1}),a(b,{id:`inlineFormSelectPref`},{default:i(()=>[...c[47]||=[t(`option`,null,`Choose...`,-1),t(`option`,{value:`1`},`One`,-1),t(`option`,{value:`2`},`Two`,-1),t(`option`,{value:`3`},`Three`,-1)]]),_:1})]),_:1}),a(m,{xs:12},{default:i(()=>[a(x,{id:`inlineFormCheck`,type:`checkbox`,label:`Remember me`})]),_:1}),a(m,{xs:12},{default:i(()=>[a(S,{type:`submit`,color:`primary`},{default:i(()=>[...c[48]||=[e(`Submit`,-1)]]),_:1})]),_:1})]),_:1})]),_:1})]),_:1})]),_:1})]),_:1})]),_:1})}var f=r(c,[[`render`,d]]);export{f as default};