Layouts
A list of easy-to-copy layouts which have been battle tested.
Examples
Form layout
Responsive & RTL-friendly form layout.
import { Box, Button, Flex, Heading, SelectList, TextField } from 'gestalt';
export default function LayoutsExample() {
return (
<Box padding={4}>
<Flex
direction="column"
gap={{
row: 0,
column: 6,
}}
maxWidth={800}
width="100%"
wrap
>
<Heading size="400" accessibilityLevel={2}>
Form Title
</Heading>
<TextField
label="TextField 1"
id="textfield1"
onChange={() => {}}
placeholder="Placeholder"
/>
<Flex gap={3} wrap>
<Flex.Item flex="grow" minWidth={250}>
<TextField