var Component=(()=>{var h=Object.create;var i=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var F=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var g=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),L=(o,e)=>{for(var r in e)i(o,r,{get:e[r],enumerable:!0})},s=(o,e,r,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of f(e))!y.call(o,t)&&t!==r&&i(o,t,{get:()=>e[t],enumerable:!(a=p(e,t))||a.enumerable});return o};var b=(o,e,r)=>(r=o!=null?h(F(o)):{},s(e||!o||!o.__esModule?i(r,"default",{value:o,enumerable:!0}):r,o)),x=o=>s(i({},"__esModule",{value:!0}),o);var c=g((j,m)=>{m.exports=_jsx_runtime});var N={};L(N,{default:()=>u,frontmatter:()=>v});var n=b(c()),v={id:"form-layout",title:"FormLayout",description:"Arrange fields in a form with consistant spacing and positioning."};function d(o){let e={code:"code",h2:"h2",h3:"h3",p:"p",pre:"pre",...o.components},{BestPractises:r,ComponentLinks:a,Info:t}=e;return r||l("BestPractises",!0),a||l("ComponentLinks",!0),t||l("Info",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:["The ",(0,n.jsx)(e.code,{children:"FormLayout"})," stacks fields vertically by default, but also supports horizontal forms."]}),` `,(0,n.jsx)(a,{github:{package:"saas-ui-forms"},npm:{package:"@saas-ui/forms"}}),` `,(0,n.jsx)(e.h2,{children:"Import"}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-ts",children:`import { FormLayout } from '@saas-ui/react' `})}),` `,(0,n.jsx)(e.h2,{children:"Best practises"}),` `,(0,n.jsx)(r,{does:["Use horizontal layouts for values that are commonly used together."],donts:["Use more then 4 fields in row."]}),` `,(0,n.jsx)(e.h2,{children:"Usage"}),` `,(0,n.jsx)(e.h3,{children:"Default"}),` `,(0,n.jsx)(e.p,{children:"The default layout stacks fields vertically."}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:`import { Form, FormLayout, Field } from '@saas-ui/react' export default function MyForm() { return ( ) } `})}),` `,(0,n.jsx)(e.h3,{children:"Custom spacing"}),` `,(0,n.jsxs)(e.p,{children:["The spacing defaults to ",(0,n.jsx)(e.code,{children:"4"}),", you can either change this per component instance or in the ",(0,n.jsx)(e.code,{children:"FormLayout"})," theme config."]}),` `,(0,n.jsx)(t,{children:(0,n.jsx)(e.p,{children:`Keep spacing consistant across your application by overriding the default value in your custom theme config.`})}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:`import { Form, FormLayout, Field } from '@saas-ui/react' export default function MyForm() { return ( ) } `})}),` `,(0,n.jsx)(e.h3,{children:"Horizontal"}),` `,(0,n.jsxs)(e.p,{children:["The ",(0,n.jsx)(e.code,{children:"FormLayout"})," acts as a ",(0,n.jsx)(e.code,{children:"SimpleGrid"}),`, which makes it easy to configure the amount of field columns you require. Fields are distributed evenly by default, use `,(0,n.jsx)(e.code,{children:"templateColumns"})," to customize the field widths."]}),` `,(0,n.jsxs)(e.p,{children:["Alternatively you can also set ",(0,n.jsx)(e.code,{children:"minChildWidth"}),", any fields that don't fit will wrap to the next line."]}),` `,(0,n.jsx)(t,{children:(0,n.jsx)(e.p,{children:`It is recommended not to over use horizontal forms, as they are hard to scan by people. Only use them for related fields like names or address information.`})}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:`import { Form, FormLayout, Field } from '@saas-ui/react' export default function MyForm() { return ( ) } `})}),` `,(0,n.jsx)(e.h3,{children:"Responsive"}),` `,(0,n.jsxs)(e.p,{children:["The ",(0,n.jsx)(e.code,{children:"columns"})," and ",(0,n.jsx)(e.code,{children:"templateColumns"}),` properties accept responsive values, this allows you to keep the forms readable on any screen size.`]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:`import { Form, FormLayout, Field } from '@saas-ui/react' export default function MyForm() { return ( ) } `})})]})}function u(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,{...o,children:(0,n.jsx)(d,{...o})}):d(o)}function l(o,e){throw new Error("Expected "+(e?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}return x(N);})(); ;return Component;

FormLayout

Props