Systemair UI Design System

UI STYLES

Introduction

All brands of the Systemair Group use this combined design system for user interfaces for apps and websites. The principles, tokens, components and patterns are shared across all brands. Each brand uses a unique flavour of the design system,while staying within the shared structure.

This styles package implements essential parts of the design system for convenient use in web-based projects. The package is built upon Tailwind CSS.

Contact webmaster@systemair.com for any questions.

Design System Documentation in Figma

Familiarise yourself with the full design system in Figma before using this styles package:

Open Design System

UI Styles Package on NPM

Most of the tokens and components of our Design System are implemented in this Tailwind-based UI Styles Package.

All new apps are required to be built based on the UI Styles Package, to ensure consistency across all apps of the Systemair group.
Existing apps should make use of the UI Styles Package as much as possible. In most apps it can be added with relatively little effort.

Styles Package

Colours

Read how to use colours and see the list of available colours in Figma.

CTAs

Buttons

Primary

Medium

Small

Tiny

Secondary

Medium

Small

Tiny

Secondary on background (negative)

Medium

Small

Tiny

Clear

Medium

Small

Tiny

Danger, Clear

Medium

Small

Tiny

Danger

Medium

Small

Tiny

1{/* Primary Buttons */}
2<button className="btn btn-primary">Label</button>
3<button className="btn btn-primary btn-small">Label</button>
4<button className="btn btn-primary btn-tiny">Label</button>
5<button className="btn btn-primary btn-icon-left">
6  <FontAwesomeIcon icon={faStar} />
7  Label
8</button>
9<button className="btn btn-primary btn-small btn-icon-left">
10  <FontAwesomeIcon icon={faStar} />
11  Label
12</button>
13<button className="btn btn-primary btn-tiny btn-icon-left">
14  <FontAwesomeIcon icon={faStar} />
15  Label
16</button>
17<button className="btn btn-primary btn-icon-right">
18  Label
19  <FontAwesomeIcon icon={faArrowRight} />
20</button>
21<button className="btn btn-primary btn-small btn-icon-right">
22  Label
23  <FontAwesomeIcon icon={faArrowRight} />
24</button>
25<button className="btn btn-primary btn-tiny btn-icon-right">
26  Label
27  <FontAwesomeIcon icon={faArrowRight} />
28</button>
29<button className="btn btn-primary btn-icon-only">
30  <FontAwesomeIcon icon={faHeart} />
31</button>
32<button className="btn btn-primary btn-small btn-icon-only">
33  <FontAwesomeIcon icon={faHeart} />
34</button>
35<button className="btn btn-primary btn-tiny btn-icon-only">
36  <FontAwesomeIcon icon={faHeart} />
37</button>
38{/* Secondary Buttons */}
39<button className="btn btn-secondary">Label</button>
40<button className="btn btn-secondary btn-small">Label</button>
41<button className="btn btn-secondary btn-tiny">Label</button>
42<button className="btn btn-secondary btn-icon-left">
43  <FontAwesomeIcon icon={faStar} />
44  Label
45</button>
46<button className="btn btn-secondary btn-small btn-icon-left">
47  <FontAwesomeIcon icon={faStar} />
48  Label
49</button>
50<button className="btn btn-secondary btn-tiny btn-icon-left">
51  <FontAwesomeIcon icon={faStar} />
52  Label
53</button>
54<button className="btn btn-secondary btn-icon-right">
55  Label
56  <FontAwesomeIcon icon={faArrowRight} />
57</button>
58<button className="btn btn-secondary btn-small btn-icon-right">
59  Label
60  <FontAwesomeIcon icon={faArrowRight} />
61</button>
62<button className="btn btn-secondary btn-tiny btn-icon-right">
63  Label
64  <FontAwesomeIcon icon={faArrowRight} />
65</button>
66<button className="btn btn-secondary btn-icon-only">
67  <FontAwesomeIcon icon={faHeart} />
68</button>
69<button className="btn btn-secondary btn-small btn-icon-only">
70  <FontAwesomeIcon icon={faHeart} />
71</button>
72<button className="btn btn-secondary btn-tiny btn-icon-only">
73  <FontAwesomeIcon icon={faHeart} />
74</button>
75{/* Secondary on background (negative) */}
76<button className="btn btn-secondary btn-on-background">Label</button>
77<button className="btn btn-secondary btn-on-background btn-small">Label</button>
78<button className="btn btn-secondary btn-on-background btn-tiny">Label</button>
79<button className="btn btn-secondary btn-on-background btn-icon-left">
80  <FontAwesomeIcon icon={faStar} />
81  Label
82</button>
83<button className="btn btn-secondary btn-on-background btn-small btn-icon-left">
84  <FontAwesomeIcon icon={faStar} />
85  Label
86</button>
87<button className="btn btn-secondary btn-on-background btn-tiny btn-icon-left">
88  <FontAwesomeIcon icon={faStar} />
89  Label
90</button>
91<button className="btn btn-secondary btn-on-background btn-icon-right">
92  Label
93  <FontAwesomeIcon icon={faArrowRight} />
94</button>
95<button className="btn btn-secondary btn-on-background btn-small btn-icon-right">
96  Label
97  <FontAwesomeIcon icon={faArrowRight} />
98</button>
99<button className="btn btn-secondary btn-on-background btn-tiny btn-icon-right">
100  Label
101  <FontAwesomeIcon icon={faArrowRight} />
102</button>
103<button className="btn btn-secondary btn-on-background btn-icon-only">
104  <FontAwesomeIcon icon={faHeart} />
105</button>
106<button className="btn btn-secondary btn-on-background btn-small btn-icon-only">
107  <FontAwesomeIcon icon={faHeart} />
108</button>
109<button className="btn btn-secondary btn-on-background btn-tiny btn-icon-only">
110  <FontAwesomeIcon icon={faHeart} />
111</button>
112{/* Clear Buttons */}
113<button className="btn btn-clear">Label</button>
114<button className="btn btn-clear btn-small">Label</button>
115<button className="btn btn-clear btn-tiny">Label</button>
116<button className="btn btn-clear btn-icon-left">
117  <FontAwesomeIcon icon={faStar} />
118  Label
119</button>
120<button className="btn btn-clear btn-small btn-icon-left">
121  <FontAwesomeIcon icon={faStar} />
122  Label
123</button>
124<button className="btn btn-clear btn-tiny btn-icon-left">
125  <FontAwesomeIcon icon={faStar} />
126  Label
127</button>
128<button className="btn btn-clear btn-icon-right">
129  Label
130  <FontAwesomeIcon icon={faArrowRight} />
131</button>
132<button className="btn btn-clear btn-small btn-icon-right">
133  Label
134  <FontAwesomeIcon icon={faArrowRight} />
135</button>
136<button className="btn btn-clear btn-tiny btn-icon-right">
137  Label
138  <FontAwesomeIcon icon={faArrowRight} />
139</button>
140<button className="btn btn-clear btn-icon-only">
141  <FontAwesomeIcon icon={faHeart} />
142</button>
143<button className="btn btn-clear btn-small btn-icon-only">
144  <FontAwesomeIcon icon={faHeart} />
145</button>
146<button className="btn btn-clear btn-tiny btn-icon-only">
147  <FontAwesomeIcon icon={faHeart} />
148</button>
149{/* Danger, Clear Buttons */}
150<button className="btn btn-danger btn-clear">Label</button>
151<button className="btn btn-danger btn-clear btn-small">Label</button>
152<button className="btn btn-danger btn-clear btn-tiny">Label</button>
153<button className="btn btn-danger btn-clear btn-icon-left">
154  <FontAwesomeIcon icon={faStar} />
155  Label
156</button>
157<button className="btn btn-danger btn-clear btn-small btn-icon-left">
158  <FontAwesomeIcon icon={faStar} />
159  Label
160</button>
161<button className="btn btn-danger btn-clear btn-tiny btn-icon-left">
162  <FontAwesomeIcon icon={faStar} />
163  Label
164</button>
165<button className="btn btn-danger btn-clear btn-icon-right">
166  Label
167  <FontAwesomeIcon icon={faArrowRight} />
168</button>
169<button className="btn btn-danger btn-clear btn-small btn-icon-right">
170  Label
171  <FontAwesomeIcon icon={faArrowRight} />
172</button>
173<button className="btn btn-danger btn-clear btn-tiny btn-icon-right">
174  Label
175  <FontAwesomeIcon icon={faArrowRight} />
176</button>
177<button className="btn btn-danger btn-clear btn-icon-only">
178  <FontAwesomeIcon icon={faHeart} />
179</button>
180<button className="btn btn-danger btn-clear btn-small btn-icon-only">
181  <FontAwesomeIcon icon={faHeart} />
182</button>
183<button className="btn btn-danger btn-clear btn-tiny btn-icon-only">
184  <FontAwesomeIcon icon={faHeart} />
185</button>
186{/* Danger Buttons */}
187<button className="btn btn-danger">Label</button>
188<button className="btn btn-danger btn-small">Label</button>
189<button className="btn btn-danger btn-tiny">Label</button>
190<button className="btn btn-danger btn-icon-left">
191  <FontAwesomeIcon icon={faStar} />
192  Label
193</button>
194<button className="btn btn-danger btn-small btn-icon-left">
195  <FontAwesomeIcon icon={faStar} />
196  Label
197</button>
198<button className="btn btn-danger btn-tiny btn-icon-left">
199  <FontAwesomeIcon icon={faStar} />
200  Label
201</button>
202<button className="btn btn-danger btn-icon-right">
203  Label
204  <FontAwesomeIcon icon={faArrowRight} />
205</button>
206<button className="btn btn-danger btn-small btn-icon-right">
207  Label
208  <FontAwesomeIcon icon={faArrowRight} />
209</button>
210<button className="btn btn-danger btn-tiny btn-icon-right">
211  Label
212  <FontAwesomeIcon icon={faArrowRight} />
213</button>
214<button className="btn btn-danger btn-icon-only">
215  <FontAwesomeIcon icon={faHeart} />
216</button>
217<button className="btn btn-danger btn-small btn-icon-only">
218  <FontAwesomeIcon icon={faHeart} />
219</button>
220<button className="btn btn-danger btn-tiny btn-icon-only">
221  <FontAwesomeIcon icon={faHeart} />
222</button>

Link Buttons

Default

Medium

Small

Tiny

Danger

Medium

Small

Tiny

1{/* Default Buttons */}
2<LinkButton text="Label" />
3<LinkButton text="Label" size={BUTTON_SIZE.SMALL} />
4<LinkButton text="Label" size={BUTTON_SIZE.TINY} />
5<LinkButton text="Label" leftIcon={faStarLight} />
6<LinkButton text="Label" size={BUTTON_SIZE.SMALL} leftIcon={faStarLight} />
7<LinkButton text="Label" size={BUTTON_SIZE.TINY} leftIcon={faStarLight} />
8<LinkButton text="Label" rightIcon={faArrowRightLight} />
9<LinkButton text="Label" size={BUTTON_SIZE.SMALL} rightIcon={faArrowRightLight} />
10<LinkButton text="Label" size={BUTTON_SIZE.TINY} rightIcon={faArrowRightLight} />
11<LinkButton text="Label" rightIcon={faHeartLight} iconOnly={true} />
12<LinkButton text="Label" size={BUTTON_SIZE.SMALL} rightIcon={faHeartLight} iconOnly={true} />
13<LinkButton text="Label" size={BUTTON_SIZE.TINY} rightIcon={faHeartLight} iconOnly={true} />
14{/* Danger Buttons */}
15<LinkButton variant="danger" text="Label" />
16<LinkButton variant="danger" text="Label" size={BUTTON_SIZE.SMALL} />
17<LinkButton variant="danger" text="Label" size={BUTTON_SIZE.TINY} />
18<LinkButton variant="danger" text="Label" leftIcon={faStarLight} />
19<LinkButton variant="danger" text="Label" size={BUTTON_SIZE.SMALL} leftIcon={faStarLight} />
20<LinkButton variant="danger" text="Label" size={BUTTON_SIZE.TINY} leftIcon={faStarLight} />
21<LinkButton variant="danger" text="Label" rightIcon={faArrowRightLight} />
22<LinkButton variant="danger" text="Label" size={BUTTON_SIZE.SMALL} rightIcon={faArrowRightLight} />
23<LinkButton variant="danger" text="Label" size={BUTTON_SIZE.TINY} rightIcon={faArrowRightLight} />
24<LinkButton variant="danger" text="Label" rightIcon={faHeartLight} iconOnly={true} />
25<LinkButton variant="danger" text="Label" size={BUTTON_SIZE.SMALL} rightIcon={faHeartLight} iconOnly={true} />
26<LinkButton variant="danger" text="Label" size={BUTTON_SIZE.TINY} rightIcon={faHeartLight} iconOnly={true} />

Collapsed Buttons

The .btn-collapse class is currently only combinable with .btn-small or .btn-tiny classes.

Primary

Small

Tiny

Secondary

Small

Tiny

Secondary on background (negative)

Small

Tiny

Clear

Small

Tiny

Danger, Clear

Small

Tiny

Danger

Small

Tiny

1{/* Primary Buttons */}
2<button className="btn btn-primary btn-small btn-collapse">Label</button>
3<button className="btn btn-primary btn-tiny btn-collapse">Label</button>
4<button className="btn btn-primary btn-small btn-icon-left btn-collapse">
5  <FontAwesomeIcon icon={faStar} />
6  Label
7</button>
8<button className="btn btn-primary btn-tiny btn-icon-left btn-collapse">
9  <FontAwesomeIcon icon={faStar} />
10  Label
11</button>
12<button className="btn btn-primary btn-small btn-icon-right btn-collapse">
13  Label
14  <FontAwesomeIcon icon={faArrowRight} />
15</button>
16<button className="btn btn-primary btn-tiny btn-icon-right btn-collapse">
17  Label
18  <FontAwesomeIcon icon={faArrowRight} />
19</button>
20<button className="btn btn-primary btn-small btn-icon-only btn-collapse">
21  <FontAwesomeIcon icon={faHeart} />
22</button>
23<button className="btn btn-primary btn-tiny btn-icon-only btn-collapse">
24  <FontAwesomeIcon icon={faHeart} />
25</button>
26{/* Secondary Buttons */}
27<button className="btn btn-secondary btn-small btn-collapse">Label</button>
28<button className="btn btn-secondary btn-tiny btn-collapse">Label</button>
29<button className="btn btn-secondary btn-small btn-icon-left btn-collapse">
30  <FontAwesomeIcon icon={faStar} />
31  Label
32</button>
33<button className="btn btn-secondary btn-tiny btn-icon-left btn-collapse">
34  <FontAwesomeIcon icon={faStar} />
35  Label
36</button>
37<button className="btn btn-secondary btn-small btn-icon-right btn-collapse">
38  Label
39  <FontAwesomeIcon icon={faArrowRight} />
40</button>
41<button className="btn btn-secondary btn-tiny btn-icon-right btn-collapse">
42  Label
43  <FontAwesomeIcon icon={faArrowRight} />
44</button>
45<button className="btn btn-secondary btn-small btn-icon-only btn-collapse">
46  <FontAwesomeIcon icon={faHeart} />
47</button>
48<button className="btn btn-secondary btn-tiny btn-icon-only btn-collapse">
49  <FontAwesomeIcon icon={faHeart} />
50</button>
51{/* Secondary on background (negative) */}
52<button className="btn btn-secondary btn-on-background btn-small btn-collapse">Label</button>
53<button className="btn btn-secondary btn-on-background btn-tiny btn-collapse">Label</button>
54<button className="btn btn-secondary btn-on-background btn-small btn-icon-left btn-collapse">
55  <FontAwesomeIcon icon={faStar} />
56  Label
57</button>
58<button className="btn btn-secondary btn-on-background btn-tiny btn-icon-left btn-collapse">
59  <FontAwesomeIcon icon={faStar} />
60  Label
61</button>
62<button className="btn btn-secondary btn-on-background btn-small btn-icon-right btn-collapse">
63  Label
64  <FontAwesomeIcon icon={faArrowRight} />
65</button>
66<button className="btn btn-secondary btn-on-background btn-tiny btn-icon-right btn-collapse">
67  Label
68  <FontAwesomeIcon icon={faArrowRight} />
69</button>
70<button className="btn btn-secondary btn-on-background btn-small btn-icon-only btn-collapse">
71  <FontAwesomeIcon icon={faHeart} />
72</button>
73<button className="btn btn-secondary btn-on-background btn-tiny btn-icon-only btn-collapse">
74  <FontAwesomeIcon icon={faHeart} />
75</button>
76{/* Clear Buttons */}
77<button className="btn btn-clear btn-small btn-collapse">Label</button>
78<button className="btn btn-clear btn-tiny btn-collapse">Label</button>
79<button className="btn btn-clear btn-small btn-icon-left btn-collapse">
80  <FontAwesomeIcon icon={faStar} />
81  Label
82</button>
83<button className="btn btn-clear btn-tiny btn-icon-left btn-collapse">
84  <FontAwesomeIcon icon={faStar} />
85  Label
86</button>
87<button className="btn btn-clear btn-small btn-icon-right btn-collapse">
88  Label
89  <FontAwesomeIcon icon={faArrowRight} />
90</button>
91<button className="btn btn-clear btn-tiny btn-icon-right btn-collapse">
92  Label
93  <FontAwesomeIcon icon={faArrowRight} />
94</button>
95<button className="btn btn-clear btn-small btn-icon-only btn-collapse">
96  <FontAwesomeIcon icon={faHeart} />
97</button>
98<button className="btn btn-clear btn-tiny btn-icon-only btn-collapse">
99  <FontAwesomeIcon icon={faHeart} />
100</button>
101{/* Danger, Clear Buttons */}
102<button className="btn btn-danger btn-clear btn-small btn-collapse">Label</button>
103<button className="btn btn-danger btn-clear btn-tiny btn-collapse">Label</button>
104<button className="btn btn-danger btn-clear btn-small btn-icon-left btn-collapse">
105  <FontAwesomeIcon icon={faStar} />
106  Label
107</button>
108<button className="btn btn-danger btn-clear btn-tiny btn-icon-left btn-collapse">
109  <FontAwesomeIcon icon={faStar} />
110  Label
111</button>
112<button className="btn btn-danger btn-clear btn-small btn-icon-right btn-collapse">
113  Label
114  <FontAwesomeIcon icon={faArrowRight} />
115</button>
116<button className="btn btn-danger btn-clear btn-tiny btn-icon-right btn-collapse">
117  Label
118  <FontAwesomeIcon icon={faArrowRight} />
119</button>
120<button className="btn btn-danger btn-clear btn-small btn-icon-only btn-collapse">
121  <FontAwesomeIcon icon={faHeart} />
122</button>
123<button className="btn btn-danger btn-clear btn-tiny btn-icon-only btn-collapse">
124  <FontAwesomeIcon icon={faHeart} />
125</button>
126{/* Danger Buttons */}
127<button className="btn btn-danger btn-small btn-collapse">Label</button>
128<button className="btn btn-danger btn-tiny btn-collapse">Label</button>
129<button className="btn btn-danger btn-small btn-icon-left btn-collapse">
130  <FontAwesomeIcon icon={faStar} />
131  Label
132</button>
133<button className="btn btn-danger btn-tiny btn-icon-left btn-collapse">
134  <FontAwesomeIcon icon={faStar} />
135  Label
136</button>
137<button className="btn btn-danger btn-small btn-icon-right btn-collapse">
138  Label
139  <FontAwesomeIcon icon={faArrowRight} />
140</button>
141<button className="btn btn-danger btn-tiny btn-icon-right btn-collapse">
142  Label
143  <FontAwesomeIcon icon={faArrowRight} />
144</button>
145<button className="btn btn-danger btn-small btn-icon-only btn-collapse">
146  <FontAwesomeIcon icon={faHeart} />
147</button>
148<button className="btn btn-danger btn-tiny btn-icon-only btn-collapse">
149  <FontAwesomeIcon icon={faHeart} />
150</button>

Form Elements

Form Examples

Sizes

Full Name

States

Labels

Vertical flow (preferred)

Grid layout

Inputs

Text Input

1<div className="space-y-200">
2  <input type="text" defaultValue="Default input" className="form-input" />
3  <input type="text" defaultValue="Error" className="form-input form-input-error" />
4  <input type="text" defaultValue="Disabled" disabled className="form-input" />
5</div>
6<div className="space-y-200">
7  <input type="text" defaultValue="Small input" className="form-input form-input-small" />
8  <input type="text" defaultValue="Error" className="form-input form-input-small form-input-error" />
9  <input type="text" defaultValue="Disabled" disabled className="form-input form-input-small" />
10</div>
11<div className="space-y-200">
12  <input type="text" defaultValue="Tiny input" className="form-input form-input-tiny" />
13  <input type="text" defaultValue="Error" className="form-input form-input-tiny form-input-error" />
14  <input type="text" defaultValue="Disabled" disabled className="form-input form-input-tiny" />
15</div>

Text Input icons

Date

1<div className="form-input-icon-left">
2  <FormFieldInput
3    _uid="Email"
4    label="Email"
5    placeholder="Email"
6    component="form-field-input"
7  />
8  <FontAwesomeIcon className="!top-350" icon={faEnvelope} />
9</div>
10<label className="text-style-label-medium" htmlFor="Date">
11  <FormFieldLabelContent label="Date" />
12  <input id="Date" type="date" className="form-input" />
13</label>
14<label className="text-style-label-medium" htmlFor="Search">
15  <FormFieldLabelContent label="Search" />
16</label>
17<SearchInput
18  value={search}
19  onChange={handleSearchChange}
20  onClear={handleSearchClear}
21/>

Textarea

1<div className="space-y-200">
2  <FormFieldTextarea
3    _uid=""
4    label=""
5    placeholder="Default textarea"
6    component="form-field-textarea"
7  />
8  <div className="was-invalidated">
9    <FormFieldTextarea _uid="" label="" placeholder="Error" component="form-field-textarea" />
10  </div>
11  <FormFieldTextarea _uid="" label="" placeholder="Disabled" component="form-field-textarea" disabled={true} />
12</div>
13<div className="space-y-200">
14  <FormFieldTextarea
15    _uid=""
16    label=""
17    size={INPUT_SIZE.SMALL}
18    placeholder="Small textarea"
19    component="form-field-textarea"
20  />
21  <div className="was-invalidated">
22    <FormFieldTextarea
23      _uid=""
24      label=""
25      size={INPUT_SIZE.SMALL}
26      placeholder="Error"
27      component="form-field-textarea"
28    />
29  </div>
30  <FormFieldTextarea
31    _uid=""
32    label=""
33    size={INPUT_SIZE.SMALL}
34    placeholder="Disabled"
35    component="form-field-textarea"
36    disabled={true}
37  />
38</div>
39<div className="space-y-200">
40  <FormFieldTextarea
41    _uid=""
42    label=""
43    size={INPUT_SIZE.TINY}
44    placeholder="Tiny textarea"
45    component="form-field-textarea"
46  />
47  <div className="was-invalidated">
48    <FormFieldTextarea
49      _uid=""
50      label=""
51      size={INPUT_SIZE.TINY}
52      placeholder="Error"
53      component="form-field-textarea"
54    />
55  </div>
56  <FormFieldTextarea
57    _uid=""
58    label=""
59    size={INPUT_SIZE.TINY}
60    placeholder="Disabled"
61    component="form-field-textarea"
62    disabled={true}
63  />
64</div>

1<div className="space-y-200">
2  <Dropdown name="dropdownDefault">
3    <option>Default</option>
4  </Dropdown>
5  <div className="was-invalidated">
6    <Dropdown name="dropdownError">
7      <option>Invalid</option>
8    </Dropdown>
9  </div>
10  <Dropdown name="dropdownDisabled" disabled>
11    <option>Disabled</option>
12  </Dropdown>
13</div>
14<div className="space-y-200">
15  <Dropdown name="dropdownSmall" size={INPUT_SIZE.SMALL}>
16    <option>Small</option>
17  </Dropdown>
18  <div className="was-invalidated">
19    <Dropdown name="dropdownSmError" size={INPUT_SIZE.SMALL}>
20      <option>Invalid</option>
21    </Dropdown>
22  </div>
23  <Dropdown name="dropdownSmDisabled" size={INPUT_SIZE.SMALL} disabled>
24    <option>Disabled</option>
25  </Dropdown>
26</div>
27<div className="space-y-200">
28  <Dropdown name="dropdownTiny" size={INPUT_SIZE.TINY}>
29    <option>Tiny</option>
30  </Dropdown>
31  <div className="was-invalidated">
32    <Dropdown name="dropdownXsError" size={INPUT_SIZE.TINY}>
33      <option>Invalid</option>
34    </Dropdown>
35  </div>
36  <Dropdown name="dropdownXsDisabled" size={INPUT_SIZE.TINY} disabled>
37    <option>Disabled</option>
38  </Dropdown>
39</div>

Number Input

1<div className="space-y-200">
2  <InputNumber name="inputNumberDefault" />
3  <div className="was-invalidated">
4    <InputNumber name="inputNumberError" />
5  </div>
6  <InputNumber name="inputNumberDisabled" disabled />
7</div>
8<div className="space-y-200">
9  <InputNumber name="inputNumberSmall" size={INPUT_SIZE.SMALL} />
10  <div className="was-invalidated">
11    <InputNumber name="inputNumberSmError" size={INPUT_SIZE.SMALL} />
12  </div>
13  <InputNumber name="inputNumberSmDisabled" size={INPUT_SIZE.SMALL} disabled />
14</div>
15<div className="space-y-200">
16  <InputNumber name="inputNumberTiny" size={INPUT_SIZE.TINY} />
17  <div className="was-invalidated">
18    <InputNumber name="inputNumberXsError" size={INPUT_SIZE.TINY} />
19  </div>
20  <InputNumber name="inputNumberXsDisabled" size={INPUT_SIZE.TINY} disabled />
21</div>

Date Input

1<div className="space-y-200">
2  <input type="date" className="form-input" />
3  <input type="date" className="form-input form-input-error" />
4  <input type="date" disabled className="form-input" />
5</div>
6<div className="space-y-200">
7  <input type="date" className="form-input form-input-small" />
8  <input type="date" className="form-input form-input-small form-input-error" />
9  <input type="date" disabled className="form-input form-input-small" />
10</div>
11<div className="space-y-200">
12  <input type="date" className="form-input form-input-tiny" />
13  <input type="date" className="form-input form-input-tiny form-input-error" />
14  <input type="date" disabled className="form-input form-input-tiny" />
15</div>

Checkbox

1<div>
2  <Checkbox name="checkboxDefault" label="Default checkbox" />
3  <Checkbox name="checkboxSelected" label="Selected" checked />
4  <Checkbox name="checkboxIndeterminate" label="Indeterminate" indeterminate />
5  <div className="was-invalidated">
6    <Checkbox name="checkboxError" label="Default error" />
7    <Checkbox name="checkboxSelectedError" label="Selected error" checked />
8  </div>
9  <Checkbox name="checkboxDisabled" label="Default disabled" disabled />
10  <Checkbox name="checkboxSelectedDisabled" label="Selected disabled" disabled checked />
11  <Checkbox
12    name="checkboxDisabledIndeterminate"
13    label="Indeterminate disabled"
14    indeterminate
15    disabled
16  />
17  <Checkbox
18    name="checkboxDisabledIndeterminate"
19    label="Selected indeterminate disabled"
20    indeterminate
21    disabled
22    checked
23  />
24</div>
25<div>
26  <Checkbox name="checkboxSmall" label="Small checkbox" size={INPUT_SIZE.SMALL} />
27  <Checkbox name="checkboxSmSelected" label="Selected" size={INPUT_SIZE.SMALL} checked />
28  <Checkbox name="checkboxSmIndeterminate" label="Indeterminate" size={INPUT_SIZE.SMALL} indeterminate />
29  <div className="was-invalidated">
30    <Checkbox name="checkboxSmError" label="Default error" size={INPUT_SIZE.SMALL} />
31    <Checkbox name="checkboxSmSelectedError" label="Selected error" size={INPUT_SIZE.SMALL} checked />
32  </div>
33  <Checkbox name="checkboxSmDisabled" label="Default disabled" size={INPUT_SIZE.SMALL} disabled />
34  <Checkbox
35    name="checkboxSmSelectedDisabled"
36    label="Selected disabled"
37    size={INPUT_SIZE.SMALL}
38    disabled
39    checked
40  />
41  <Checkbox
42    name="checkboxSmDisabledIndeterminate"
43    label="Indeterminate disabled"
44    size={INPUT_SIZE.SMALL}
45    indeterminate
46    disabled
47  />
48  <Checkbox
49    name="checkboxSmDisabledIndeterminate"
50    label="Selected indeterminate disabled"
51    size={INPUT_SIZE.SMALL}
52    indeterminate
53    disabled
54    checked
55  />
56</div>
57<div>
58  <Checkbox name="checkboxTiny" label="Tiny checkbox" size={INPUT_SIZE.TINY} />
59  <Checkbox name="checkboxXsSelected" label="Selected" size={INPUT_SIZE.TINY} checked />
60  <Checkbox name="checkboxXsIndeterminate" label="Indeterminate" size={INPUT_SIZE.TINY} indeterminate />
61  <div className="was-invalidated">
62    <Checkbox name="checkboxXsError" label="Default error" size={INPUT_SIZE.TINY} />
63    <Checkbox name="checkboxXsSelectedError" label="Selected error" size={INPUT_SIZE.TINY} checked />
64  </div>
65  <Checkbox name="checkboxXsDisabled" label="Default disabled" size={INPUT_SIZE.TINY} disabled />
66  <Checkbox
67    name="checkboxXsSelectedDisabled"
68    label="Selected disabled"
69    size={INPUT_SIZE.TINY}
70    disabled
71    checked
72  />
73  <Checkbox
74    name="checkboxXsDisabledIndeterminate"
75    label="Indeterminate disabled"
76    size={INPUT_SIZE.TINY}
77    indeterminate
78    disabled
79  />
80  <Checkbox
81    name="checkboxXsDisabledIndeterminate"
82    label="Selected indeterminate disabled"
83    size={INPUT_SIZE.TINY}
84    indeterminate
85    disabled
86    checked
87  />
88</div>

Radio

1<div>
2  <label className="form-radio">
3    <input type="radio" name="default" />
4    <span>Default radio</span>
5  </label>
6  <label className="form-radio">
7    <input type="radio" name="selected" checked />
8    <span>Selected</span>
9  </label>
10  <label className="form-radio form-radio-error">
11    <input type="radio" name="default-error" />
12    <span>Default error</span>
13  </label>
14  <label className="form-radio form-radio-error">
15    <input type="radio" name="selected-error" checked />
16    <span>Selected error</span>
17  </label>
18  <label className="form-radio">
19    <input type="radio" name="default-disabled" disabled />
20    <span>Default disabled</span>
21  </label>
22  <label className="form-radio">
23    <input type="radio" name="selected-disabled" checked disabled />
24    <span>Selected disabled</span>
25  </label>
26</div>
27<div>
28  <label className="form-radio form-radio-small">
29    <input type="radio" name="small" />
30    <span>Small radio</span>
31  </label>
32  <label className="form-radio form-radio-small">
33    <input type="radio" name="selectedSm" checked />
34    <span>Selected</span>
35  </label>
36  <label className="form-radio form-radio-error form-radio-small">
37    <input type="radio" name="defaultSm-error" />
38    <span>Default error</span>
39  </label>
40  <label className="form-radio form-radio-error form-radio-small">
41    <input type="radio" name="selectedSm-error" checked />
42    <span>Selected error</span>
43  </label>
44  <label className="form-radio form-radio-small">
45    <input type="radio" name="defaultSm-disabled" disabled />
46    <span>Default disabled</span>
47  </label>
48  <label className="form-radio form-radio-small">
49    <input type="radio" name="selectedSm-disabled" checked disabled />
50    <span>Selected disabled</span>
51  </label>
52</div>
53<div>
54  <label className="form-radio form-radio-tiny">
55    <input type="radio" name="tiny" />
56    <span>Tiny radio</span>
57  </label>
58  <label className="form-radio form-radio-tiny">
59    <input type="radio" name="selectedXs" checked />
60    <span>Selected</span>
61  </label>
62  <label className="form-radio form-radio-error form-radio-tiny">
63    <input type="radio" name="defaultXs-error" />
64    <span>Default error</span>
65  </label>
66  <label className="form-radio form-radio-error form-radio-tiny">
67    <input type="radio" name="selectedXs-error" checked />
68    <span>Selected error</span>
69  </label>
70  <label className="form-radio form-radio-tiny">
71    <input type="radio" name="defaultXs-disabled" disabled />
72    <span>Default disabled</span>
73  </label>
74  <label className="form-radio form-radio-tiny">
75    <input type="radio" name="selectedXs-disabled" checked disabled />
76    <span>Selected disabled</span>
77  </label>
78</div>

Select buttons

1<div className="space-y-200">
2  <FormFieldSelect
3    _uid="selectBtnSingleFill"
4    label="Single select, fill width"
5    name="selectBtnSingleFill"
6    ui={FORM_SELECT_TYPE.BUTTONS}
7    options={[
8      {
9        label: 'Option 1',
10        _uid: 'selectBtnSingleFillOpt1',
11        value: 'option1',
12        component: 'form-field-select-option'
13      },
14      {
15        label: 'Option 2',
16        _uid: 'selectBtnSingleFillOpt2',
17        value: 'option2',
18        component: 'form-field-select-option'
19      }
20    ]}
21    component="form-field-select"
22  />
23  <FormFieldSelect
24    _uid="selectBtnSingleAuto"
25    label="Single select, auto width (hug text)"
26    name="selectBtnSingleAuto"
27    ui={FORM_SELECT_TYPE.BUTTONS}
28    className="w-fit"
29    options={[
30      {
31        label: 'Option 1',
32        _uid: 'selectBtnSingleAutoOpt1',
33        value: 'option1',
34        component: 'form-field-select-option'
35      },
36      {
37        label: 'Option 2',
38        _uid: 'selectBtnSingleAutoOpt2',
39        value: 'option2',
40        component: 'form-field-select-option'
41      }
42    ]}
43    component="form-field-select"
44  />
45  <FormFieldSelect
46    _uid="selectBtnMultiFill"
47    label="Multi select, fill width"
48    name="selectBtnMultiFill"
49    ui={FORM_SELECT_TYPE.BUTTONS}
50    multi={true}
51    options={[
52      {
53        label: 'Option 1',
54        _uid: 'selectBtnMultiFillOpt1',
55        value: 'option1',
56        component: 'form-field-select-option'
57      },
58      {
59        label: 'Option 2',
60        _uid: 'selectBtnMultiFillOpt2',
61        value: 'option2',
62        component: 'form-field-select-option'
63      }
64    ]}
65    component="form-field-select"
66  />
67  <FormFieldSelect
68    _uid="selectBtnMultiAuto"
69    label="Multi select, auto width (hug text)"
70    name="selectBtnMultiAuto"
71    ui={FORM_SELECT_TYPE.BUTTONS}
72    multi={true}
73    className="w-fit"
74    options={[
75      {
76        label: 'Option 1',
77        _uid: 'selectBtnMultiAutoOpt1',
78        value: 'option1',
79        component: 'form-field-select-option'
80      },
81      {
82        label: 'Option 2',
83        _uid: 'selectBtnMultiAutoOpt2',
84        value: 'option2',
85        component: 'form-field-select-option'
86      }
87    ]}
88    component="form-field-select"
89  />
90</div>
91<div className="space-y-200">
92  <FormFieldSelect
93    _uid="selectSmBtnSingleFill"
94    label="Single select, fill width"
95    name="selectSmBtnSingleFill"
96    size={INPUT_SIZE.SMALL}
97    ui={FORM_SELECT_TYPE.BUTTONS}
98    options={[
99      {
100        label: 'Option 1',
101        _uid: 'selectSmBtnSingleFillOpt1',
102        value: 'option1',
103        component: 'form-field-select-option'
104      },
105      {
106        label: 'Option 2',
107        _uid: 'selectSmBtnSingleFillOpt2',
108        value: 'option2',
109        component: 'form-field-select-option'
110      }
111    ]}
112    component="form-field-select"
113  />
114  <FormFieldSelect
115    _uid="selectSmBtnSingleAuto"
116    label="Single select, auto width (hug text)"
117    name="selectSmBtnSingleAuto"
118    size={INPUT_SIZE.SMALL}
119    ui={FORM_SELECT_TYPE.BUTTONS}
120    className="w-fit"
121    options={[
122      {
123        label: 'Option 1',
124        _uid: 'selectSmBtnSingleAutoOpt1',
125        value: 'option1',
126        component: 'form-field-select-option'
127      },
128      {
129        label: 'Option 2',
130        _uid: 'selectSmBtnSingleAutoOpt2',
131        value: 'option2',
132        component: 'form-field-select-option'
133      }
134    ]}
135    component="form-field-select"
136  />
137  <FormFieldSelect
138    _uid="selectSmBtnMultiFill"
139    label="Multi select, fill width"
140    name="selectSmBtnMultiFill"
141    size={INPUT_SIZE.SMALL}
142    ui={FORM_SELECT_TYPE.BUTTONS}
143    multi={true}
144    options={[
145      {
146        label: 'Option 1',
147        _uid: 'selectSmBtnMultiFillOpt1',
148        value: 'option1',
149        component: 'form-field-select-option'
150      },
151      {
152        label: 'Option 2',
153        _uid: 'selectSmBtnMultiFillOpt2',
154        value: 'option2',
155        component: 'form-field-select-option'
156      }
157    ]}
158    component="form-field-select"
159  />
160  <FormFieldSelect
161    _uid="selectSmBtnMultiAuto"
162    label="Multi select, auto width (hug text)"
163    name="selectSmBtnMultiAuto"
164    size={INPUT_SIZE.SMALL}
165    ui={FORM_SELECT_TYPE.BUTTONS}
166    multi={true}
167    className="w-fit"
168    options={[
169      {
170        label: 'Option 1',
171        _uid: 'selectSmBtnMultiAutoOpt1',
172        value: 'option1',
173        component: 'form-field-select-option'
174      },
175      {
176        label: 'Option 2',
177        _uid: 'selectSmBtnMultiAutoOpt2',
178        value: 'option2',
179        component: 'form-field-select-option'
180      }
181    ]}
182    component="form-field-select"
183  />
184</div>
185<div className="space-y-200">
186  <FormFieldSelect
187    _uid="selectXsBtnSingleFill"
188    label="Single select, fill width"
189    name="selectXsBtnSingleFill"
190    size={INPUT_SIZE.TINY}
191    ui={FORM_SELECT_TYPE.BUTTONS}
192    options={[
193      {
194        label: 'Option 1',
195        _uid: 'selectXsBtnSingleFillOpt1',
196        value: 'option1',
197        component: 'form-field-select-option'
198      },
199      {
200        label: 'Option 2',
201        _uid: 'selectXsBtnSingleFillOpt2',
202        value: 'option2',
203        component: 'form-field-select-option'
204      }
205    ]}
206    component="form-field-select"
207  />
208  <FormFieldSelect
209    _uid="selectXsBtnSingleAuto"
210    label="Single select, auto width (hug text)"
211    name="selectXsBtnSingleAuto"
212    size={INPUT_SIZE.TINY}
213    ui={FORM_SELECT_TYPE.BUTTONS}
214    className="w-fit"
215    options={[
216      {
217        label: 'Option 1',
218        _uid: 'selectXsBtnSingleAutoOpt1',
219        value: 'option1',
220        component: 'form-field-select-option'
221      },
222      {
223        label: 'Option 2',
224        _uid: 'selectXsBtnSingleAutoOpt2',
225        value: 'option2',
226        component: 'form-field-select-option'
227      }
228    ]}
229    component="form-field-select"
230  />
231  <FormFieldSelect
232    _uid="selectXsBtnMultiFill"
233    label="Multi select, fill width"
234    name="selectXsBtnMultiFill"
235    size={INPUT_SIZE.TINY}
236    ui={FORM_SELECT_TYPE.BUTTONS}
237    multi={true}
238    options={[
239      {
240        label: 'Option 1',
241        _uid: 'selectXsBtnMultiFillOpt1',
242        value: 'option1',
243        component: 'form-field-select-option'
244      },
245      {
246        label: 'Option 2',
247        _uid: 'selectXsBtnMultiFillOpt2',
248        value: 'option2',
249        component: 'form-field-select-option'
250      }
251    ]}
252    component="form-field-select"
253  />
254  <FormFieldSelect
255    _uid="selectXsBtnMultiAuto"
256    label="Multi select, auto width (hug text)"
257    name="selectXsBtnMultiAuto"
258    size={INPUT_SIZE.TINY}
259    ui={FORM_SELECT_TYPE.BUTTONS}
260    multi={true}
261    className="w-fit"
262    options={[
263      {
264        label: 'Option 1',
265        _uid: 'selectXsBtnMultiAutoOpt1',
266        value: 'option1',
267        component: 'form-field-select-option'
268      },
269      {
270        label: 'Option 2',
271        _uid: 'selectXsBtnMultiAutoOpt2',
272        value: 'option2',
273        component: 'form-field-select-option'
274      }
275    ]}
276    component="form-field-select"
277  />
278</div>