Design System

Forms

Spacing preview

All props set. Use this to evaluate label, description, input, and message spacing together.

Label (Optional)Link text

Supporting description text.

Validation message text.

Label (Optional)

Validation message text.

Label

Validation message text.

1
<Stack space="large">
2
    <TextField
3
        id="sp-full"
4
        label="Label"
5
        secondaryLabel="Optional"
6
        description="Supporting description text."
7
        message="Validation message text."
8
        value="Value"
9
        reserveMessageSpace={true}>
10
        <TextLink
11
            slot="tertiaryLabel"
12
            href="#">
13
            Link text
14
        </TextLink>
15
    </TextField>
16
    <TextField
17
        id="sp-no-desc"
18
        label="Label"
19
        secondaryLabel="Optional"
20
        message="Validation message text."
21
        value="Value"
22
        reserveMessageSpace={true}
23
    />
24
    <TextField
25
        id="sp-minimal"
26
        label="Label"
27
        message="Validation message text."
28
        value="Value"
29
        reserveMessageSpace={true}
30
    />
31
</Stack>

FieldLabel

Label element with optional secondaryLabel, description, and tertiaryLabel slot. secondaryLabel renders inline at secondary tone to signal it is supplementary. description renders below the label at neutral tone, small size. The tertiaryLabel slot renders a TextLink right-aligned on the label row.

Label

Label (Optional)

Label (Required)

Supporting description text.

Label

Supporting description text.

Label (Optional)Link text

1
<Stack space="large">
2
    <FieldLabel label="Label" />
3
    <FieldLabel
4
        label="Label"
5
        secondaryLabel="Optional"
6
    />
7
    <FieldLabel
8
        label="Label"
9
        secondaryLabel="Required"
10
        description="Supporting description text."
11
    />
12
    <FieldLabel
13
        label="Label"
14
        description="Supporting description text."
15
        disabled
16
    />
17
    <FieldLabel
18
        label="Label"
19
        secondaryLabel="Optional">
20
        <TextLink
21
            slot="tertiaryLabel"
22
            href="#">
23
            Link text
24
        </TextLink>
25
    </FieldLabel>
26
</Stack>

FieldMessage

Renders below a field. When no message is present the element renders a non-breaking space to hold its line height. Neutral tone renders at neutral foreground. Validation tones (critical, positive, caution, info) render at their respective colours.

Neutral message (default tone, secondary text colour)

Critical: please correct this field

Positive: looks good

Caution: double-check this value

Info: this field is optional

↑ No message prop. Non-breaking space holds the line height

1
<Stack space="small">
2
    <FieldMessage message="Neutral message (default tone, secondary text colour)" />
3
    <FieldMessage
4
        tone="critical"
5
        message="Critical: please correct this field"
6
    />
7
    <FieldMessage
8
        tone="positive"
9
        message="Positive: looks good"
10
    />
11
    <FieldMessage
12
        tone="caution"
13
        message="Caution: double-check this value"
14
    />
15
    <FieldMessage
16
        tone="info"
17
        message="Info: this field is optional"
18
    />
19
    <Box>
20
        <FieldMessage />
21
        <Text
22
            element="p"
23
            tone="secondary"
24
            size="x-small">
25
            ↑ No message prop. Non-breaking space holds the line height
26
        </Text>
27
    </Box>
28
</Stack>

Labeled fields

Pass label, secondaryLabel, and description directly to TextField, TextArea, or NumberField. FieldLabel and FieldMessage are composed automatically.

Label

Label (Optional)

Label (Required)

Supporting description text.

Label (Optional)

Supporting description text.

Label (Optional)

1
<Stack space="large">
2
    <TextField
3
        id="lf-a"
4
        label="Label"
5
        placeholder="Placeholder"
6
    />
7
    <TextField
8
        id="lf-b"
9
        label="Label"
10
        secondaryLabel="Optional"
11
        placeholder="Placeholder"
12
    />
13
    <TextField
14
        id="lf-c"
15
        label="Label"
16
        secondaryLabel="Required"
17
        description="Supporting description text."
18
        placeholder="Placeholder"
19
    />
20
    <TextArea
21
        id="lf-d"
22
        label="Label"
23
        secondaryLabel="Optional"
24
        description="Supporting description text."
25
        rows={3}
26
    />
27
    <NumberField
28
        id="lf-e"
29
        label="Label"
30
        secondaryLabel="Optional"
31
        min={0}
32
        max={100}
33
    />
34
</Stack>

Validation tones

The tone prop controls both the border colour and the message text colour. The message element is auto-linked to the input via aria-describedby.

Neutral

Default message, secondary tone text

Critical

Please enter a valid email address

Positive

Username is available

Caution

Password is weak, add special characters

Info

URL will be validated on save

1
<Stack space="large">
2
    <TextField
3
        id="field-neutral"
4
        label="Neutral"
5
        message="Default message, secondary tone text"
6
    />
7
    <TextField
8
        id="field-critical"
9
        tone="critical"
10
        label="Critical"
11
        value="bad@"
12
        message="Please enter a valid email address"
13
    />
14
    <TextField
15
        id="field-positive"
16
        tone="positive"
17
        label="Positive"
18
        value="lloyd"
19
        message="Username is available"
20
    />
21
    <TextField
22
        id="field-caution"
23
        tone="caution"
24
        label="Caution"
25
        value="Password123"
26
        message="Password is weak, add special characters"
27
    />
28
    <TextField
29
        id="field-info"
30
        tone="info"
31
        label="Info"
32
        value="https://lloydatkinson.net"
33
        message="URL will be validated on save"
34
    />
35
</Stack>

reserveMessageSpace

When true, the message area always occupies its line height even when no message is present. Both fields stay the same height so layout is stable when messages appear and disappear. Defaults to false.

Default: both fields same height

No message

Has message

This field has an error

reserveMessageSpace=false: no-message field is shorter

No message

Has message

This field has an error

1
<Stack space="large">
2
    <Stack space="x-small">
3
        <Text
4
            element="p"
5
            tone="secondary"
6
            size="x-small">
7
            Default: both fields same height
8
        </Text>
9
        <Inline
10
            space="medium"
11
            alignY="top">
12
            <Box
13
                background="neutralLight"
14
                padding="x-small"
15
                borderRadius="md">
16
                <TextField
17
                    id="rms-a"
18
                    label="No message"
19
                    placeholder="No message shown"
20
                />
21
            </Box>
22
            <Box
23
                background="neutralLight"
24
                padding="x-small"
25
                borderRadius="md">
26
                <TextField
27
                    id="rms-b"
28
                    tone="critical"
29
                    label="Has message"
30
                    value="invalid"
31
                    message="This field has an error"
32
                />
33
            </Box>
34
        </Inline>
35
    </Stack>
36
    <Stack space="x-small">
37
        <Text
38
            element="p"
39
            tone="secondary"
40
            size="x-small">
41
            reserveMessageSpace=false: no-message field is shorter
42
        </Text>
43
        <Inline
44
            space="medium"
45
            alignY="top">
46
            <Box
47
                background="neutralLight"
48
                padding="x-small"
49
                borderRadius="md">
50
                <TextField
51
                    id="rms-c"
52
                    label="No message"
53
                    reserveMessageSpace={false}
54
                    placeholder="No message shown"
55
                />
56
            </Box>
57
            <Box
58
                background="neutralLight"
59
                padding="x-small"
60
                borderRadius="md">
61
                <TextField
62
                    id="rms-d"
63
                    tone="critical"
64
                    label="Has message"
65
                    reserveMessageSpace={false}
66
                    value="invalid"
67
                    message="This field has an error"
68
                />
69
            </Box>
70
        </Inline>
71
    </Stack>
72
</Stack>

Disabled

Label tone shifts to secondary and field background becomes neutralSoft. The disabled attribute is forwarded to the underlying input.

Label

Label (Optional)

Supporting description text.

Label

1
<Stack space="large">
2
    <TextField
3
        id="dis-a"
4
        label="Label"
5
        value="Value"
6
        disabled
7
    />
8
    <TextField
9
        id="dis-b"
10
        label="Label"
11
        secondaryLabel="Optional"
12
        description="Supporting description text."
13
        value="Value"
14
        disabled
15
    />
16
    <TextArea
17
        id="dis-c"
18
        label="Label"
19
        rows={3}
20
        value="Value"
21
        disabled
22
    />
23
    <NumberField
24
        id="dis-d"
25
        label="Label"
26
        value={5}
27
        disabled
28
    />
29
</Stack>

Full form example

All features combined.

Get in touch

First name (Required)

Last name (Required)

Email (Required)

I'll reply to this address.

Message (Required)

What would you like to talk about?

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>