1
<Canvas ctx={ctx}>
2
  <Form onSubmit={() => console.log('onSubmit')}>
3
    <FieldGroup>
4
      <TextField
5
        required
6
        name="name"
7
        id="name"
8
        label="Name"
9
        value="Mark Smith"
10
        placeholder="Enter full name"
11
        hint="Provide a full name"
12
        onChange={(newValue) => console.log(newValue)}
13
      />
14
      <TextField
15
        required
16
        name="email"
17
        id="email"
18
        label="Email"
19
        type="email"
20
        value=""
21
        placeholder="your@email.com"
22
        error="Please enter an email!"
23
        hint="Enter email address"
24
        onChange={(newValue) => console.log(newValue)}
25
      />
26
      <TextField
27
        required
28
        name="apiToken"
29
        id="apiToken"
30
        label="API Token"
31
        value="XXXYYY123"
32
        hint="Enter a valid API token"
33
        textInputProps={{ monospaced: true }}
34
        onChange={(newValue) => console.log(newValue)}
35
      />
36
      <TextareaField
37
        required
38
        name="longText"
39
        id="longText"
40
        label="Long text"
41
        value="Lorem ipsum dolor sit amet, consectetur adipiscing elit.."
42
        hint="Enter some text"
43
        onChange={(newValue) => console.log(newValue)}
44
      />
45
      <SelectField
46
        name="option"
47
        id="option"
48
        label="Option"
49
        hint="Select one of the options"
50
        value={{ label: 'Option 1', value: 'option1' }}
51
        selectInputProps={{
52
          options: [
53
            { label: 'Option 1', value: 'option1' },
54
            { label: 'Option 2', value: 'option2' },
55
            { label: 'Option 3', value: 'option3' },
56
          ],
57
        }}
58
        onChange={(newValue) => console.log(newValue)}
59
      />
60
      <SelectField
61
        name="multipleOption"
62
        id="multipleOption"
63
        label="Multiple options"
64
        hint="Select one of the options"
65
        value={[
66
          { label: 'Option 1', value: 'option1' },
67
          { label: 'Option 2', value: 'option2' },
68
        ]}
69
        selectInputProps={{
70
          isMulti: true,
71
          options: [
72
            { label: 'Option 1', value: 'option1' },
73
            { label: 'Option 2', value: 'option2' },
74
            { label: 'Option 3', value: 'option3' },
75
          ],
76
        }}
77
        onChange={(newValue) => console.log(newValue)}
78
      />
79
      <SwitchField
80
        name="debugMode"
81
        id="debugMode"
82
        label="Debug mode active?"
83
        hint="Logs messages to console"
84
        value={true}
85
        onChange={(newValue) => console.log(newValue)}
86
      />
87
    </FieldGroup>
88
    <FieldGroup>
89
      <Button fullWidth buttonType="primary">
90
        Submit
91
      </Button>
92
    </FieldGroup>
93
  </Form>
94
</Canvas>