Layouts

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
              label="TextField 2"
              id="textfield2"
              onChange={() => {}}
              placeholder="Placeholder"
            />
          </Flex.Item>
          <Flex.Item flex="grow" minWidth={250}>
            <TextField
              label="TextField 3"
              id="textfield3"
              onChange={() => {}}
              placeholder="Placeholder"
            />
          </Flex.Item>
        </Flex>

        <SelectList
          label="SelectList"
          id="selectlist"
          placeholder="Placeholder"
          onChange={() => {}}
        >
          {[
            { value: 'belgium', label: 'Belgium' },
            { value: 'france', label: 'France' },
            { value: 'usa', label: 'USA' },
          ].map(({ label, value }) => (
            <SelectList.Option key={label} label={label} value={value} />
          ))}
        </SelectList>

        <Flex
          gap={{
            row: 2,
            column: 0,
          }}
          justifyContent="end"
          wrap
        >
          <Button text="Cancel" size="lg" />
          <Button text="Submit" color="red" size="lg" type="submit" />
        </Flex>
      </Flex>
    </Box>
  );
}

To enter the code editing mode, press Enter. To exit the edit mode, press Escape

You are editing the code. To exit the edit mode, press Escape