FormLayout
Arrange fields in a form with consistant spacing and positioning.
The FormLayout
stacks fields vertically by default, but also supports horizontal forms.
Source
@saas-ui/forms
- 2.8.9 (latest)
Import
import { FormLayout } from '@saas-ui/react'
Best practises
Do
- Use horizontal layouts for values that are commonly used together.
Don't
- Use more then 4 fields in row.
Usage
Default
The default layout stacks fields vertically.
import { Form, FormLayout, Field } from '@saas-ui/react'export default function MyForm() {return (<Form><FormLayout><Field name="name" label="Name" /><Field name="description" label="Description" /></FormLayout></Form>)}
Custom spacing
The spacing defaults to 4
, you can either change this per component instance or in the FormLayout
theme config.
Keep spacing consistant across your application by overriding the default value in your custom theme config.
import { Form, FormLayout, Field } from '@saas-ui/react'export default function MyForm() {return (<Form><FormLayout spacing={8}><Field name="name" label="Name" /><Field name="description" label="Description" /></FormLayout></Form>)}
Horizontal
The FormLayout
acts as a SimpleGrid
, which makes it easy to configure the amount of field columns you require.
Fields are distributed evenly by default, use templateColumns
to customize the field widths.
Alternatively you can also set minChildWidth
, any fields that don't fit will wrap to the next line.
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.
import { Form, FormLayout, Field } from '@saas-ui/react'export default function MyForm() {return (<Form><FormLayout><FormLayout><Fieldname="gender"options={[{ value: 'Male' },{ value: 'Female' },{ value: 'Other' },]}type="select"label="Gender"width="100px"/></FormLayout><FormLayout columns={2}><Field name="firstName" label="Name" /><Field name="lastName" label="Last name" /></FormLayout><FormLayout templateColumns="auto 25%"><Field name="address" label="Address" /><Field name="housenumber" label="Number" /></FormLayout></FormLayout></Form>)}
Responsive
The columns
and templateColumns
properties accept responsive values,
this allows you to keep the forms readable on any screen size.
import { Form, FormLayout, Field } from '@saas-ui/react'export default function MyForm() {return (<Form><FormLayout columns={[1, null, 2]}><Field name="firstName" label="Name" /><Field name="lastName" label="Last name" /></FormLayout></Form>)}
Was this helpful?