1
<Stack space="large">
2
    <TextField
3
        id="tf-a"
4
        label="Label"
5
        placeholder="Placeholder"
6
    />
7
    <TextField
8
        id="tf-b"
9
        label="Label"
10
        value="Value"
11
    />
12
</Stack>

1
<Box
2
    background="surface"
3
    padding="large"
4
    borderRadius="md"
5
    boxShadow="borderNeutralLight">
6
    <Stack space="large">
7
        <Heading level="3">Get in touch</Heading>
8
        <Tiles
9
            columns={{ mobile: 1, tablet: 2 }}
10
            space="large">
11
            <TextField
12
                id="form-firstname"
13
                label="First name"
14
                secondaryLabel="Required"
15
                placeholder="Lloyd"
16
            />
17
            <TextField
18
                id="form-lastname"
19
                label="Last name"
20
                secondaryLabel="Required"
21
                placeholder="Atkinson"
22
            />
23
        </Tiles>
24
        <TextField
25
            id="form-email"
26
            type="email"
27
            label="Email"
28
            secondaryLabel="Required"
29
            description="I'll reply to this address."
30
            placeholder="you@example.com"
31
        />
32
        <TextArea
33
            id="form-message"
34
            label="Message"
35
            secondaryLabel="Required"
36
            description="What would you like to talk about?"
37
            rows={5}
38
            placeholder="Tell me what's on your mind..."
39
        />
40
        <Inline space="small">
41
            <Button tone="brand">Send message</Button>
42
            <Button
43
                variant="soft"
44
                tone="neutral">
45
                Cancel
46
            </Button>
47
        </Inline>
48
    </Stack>
49
</Box>