0
# UI Collections
1

2
Grouped components like forms, menus, messages, and tables that work together as cohesive units to create complex interface sections.
3

4
## Capabilities
5

6
### Form
7

8
Comprehensive form layouts with integrated validation styling and field organization.
9

10
```css { .api }
11
.ui.form                      /* Form container */
12

13
/* Form types */
14
.ui.inverted.form             /* Inverted color form */
15
.ui.loading.form              /* Loading state form with dimmer */
16
.ui.success.form              /* Success state form */
17
.ui.error.form                /* Error state form with error list */
18
.ui.warning.form              /* Warning state form */
19

20
/* Form fields */
21
.ui.form .field               /* Individual field container */
22
.ui.form .fields              /* Multiple field group */
23
.ui.form .inline.field        /* Inline field layout */
24
.ui.form .grouped.fields      /* Grouped fields with border */
25
.ui.form .equal.width.fields  /* Equal width field group */
26

27
/* Field states */
28
.ui.form .required.field      /* Required field marker */
29
.ui.form .disabled.field      /* Disabled field */
30
.ui.form .error.field         /* Error state field */
31
.ui.form .success.field       /* Success state field */
32

33
/* Form elements */
34
.ui.form input                /* Form input styling */
35
.ui.form textarea             /* Form textarea styling */
36
.ui.form select               /* Form select styling */
37
.ui.form .ui.checkbox         /* Form checkbox styling */
38
.ui.form .ui.dropdown         /* Form dropdown styling */
39

40
/* Form validation */
41
.ui.form .error.message       /* Error message container */
42
.ui.form .success.message     /* Success message container */
43
.ui.form .warning.message     /* Warning message container */
44
```
45

46
**Usage Examples:**
47

48
```html
49
<!-- Basic form -->
50
<form class="ui form">
51
  <div class="field">
52
    <label>Name</label>
53
    <input type="text" name="name" placeholder="Enter your name">
54
  </div>
55
  <div class="field">
56
    <label>Email</label>
57
    <input type="email" name="email" placeholder="Enter your email">
58
  </div>
59
  <div class="ui submit button">Submit</div>
60
</form>
61

62
<!-- Form with grouped fields -->
63
<form class="ui form">
64
  <div class="two fields">
65
    <div class="field">
66
      <label>First Name</label>
67
      <input type="text" placeholder="First Name">
68
    </div>
69
    <div class="field">
70
      <label>Last Name</label>
71
      <input type="text" placeholder="Last Name">
72
    </div>
73
  </div>
74
  <div class="field">
75
    <label>Address</label>
76
    <input type="text" placeholder="Street Address">
77
  </div>
78
</form>
79

80
<!-- Form with validation states -->
81
<form class="ui form error">
82
  <div class="required field error">
83
    <label>Username</label>
84
    <input type="text" placeholder="Username">
85
  </div>
86
  <div class="ui error message">
87
    <div class="header">Form Error</div>
88
    <p>Please enter a valid username.</p>
89
  </div>
90
  <div class="ui submit button">Submit</div>
91
</form>
92
```
93

94
### Menu
95

96
Navigation menus with flexible layouts and interactive states.
97

98
```css { .api }
99
.ui.menu                      /* Basic menu */
100

101
/* Menu types */
102
.ui.vertical.menu             /* Vertical menu layout */
103
.ui.horizontal.menu           /* Horizontal menu layout (default) */
104
.ui.tabular.menu              /* Tabbed menu appearance */
105
.ui.text.menu                 /* Text-only menu */
106
.ui.icon.menu                 /* Icon-only menu */
107
.ui.labeled.icon.menu         /* Menu with labeled icons */
108

109
/* Menu variations */
110
.ui.inverted.menu             /* Dark/inverted menu */
111
.ui.borderless.menu           /* Menu without borders */
112
.ui.compact.menu              /* Compact spacing menu */
113
.ui.fluid.menu                /* Full-width menu */
114
.ui.fixed.menu                /* Fixed position menu */
115
.ui.top.fixed.menu            /* Fixed to top */
116
.ui.bottom.fixed.menu         /* Fixed to bottom */
117

118
/* Menu items */
119
.ui.menu .item                /* Menu item */
120
.ui.menu .dropdown.item       /* Dropdown menu item */
121
.ui.menu .right.menu          /* Right-aligned menu section */
122
.ui.menu .header.item         /* Menu header item */
123

124
/* Menu item states */
125
.ui.menu .active.item         /* Active/selected menu item */
126
.ui.menu .disabled.item       /* Disabled menu item */
127

128
/* Dropdown menu */
129
.ui.menu .dropdown            /* Dropdown container */
130
.ui.menu .dropdown .menu      /* Dropdown submenu */
131
```
132

133
**Usage Examples:**
134

135
```html
136
<!-- Basic horizontal menu -->
137
<div class="ui menu">
138
  <div class="active item">Home</div>
139
  <div class="item">About</div>
140
  <div class="item">Services</div>
141
  <div class="item">Contact</div>
142
</div>
143

144
<!-- Vertical menu -->
145
<div class="ui vertical menu">
146
  <div class="item">
147
    <i class="home icon"></i>
148
    Home
149
  </div>
150
  <div class="item">
151
    <i class="user icon"></i>
152
    Profile
153
  </div>
154
  <div class="item">
155
    <i class="settings icon"></i>
156
    Settings
157
  </div>
158
</div>
159

160
<!-- Menu with dropdown -->
161
<div class="ui menu">
162
  <div class="item">Home</div>
163
  <div class="ui dropdown item">
164
    Products
165
    <i class="dropdown icon"></i>
166
    <div class="menu">
167
      <div class="item">Software</div>
168
      <div class="item">Hardware</div>
169
      <div class="item">Services</div>
170
    </div>
171
  </div>
172
  <div class="right menu">
173
    <div class="item">Login</div>
174
  </div>
175
</div>
176

177
<!-- Tabular menu -->
178
<div class="ui tabular menu">
179
  <div class="active item">Tab 1</div>
180
  <div class="item">Tab 2</div>
181
  <div class="item">Tab 3</div>
182
</div>
183
```
184

185
### Message
186

187
User messages and alerts for communicating status, feedback, and information.
188

189
```css { .api }
190
.ui.message                   /* Basic message */
191

192
/* Message types */
193
.ui.info.message              /* Informational message */
194
.ui.success.message           /* Success message */
195
.ui.warning.message           /* Warning message */
196
.ui.error.message             /* Error message */
197
.ui.negative.message          /* Negative message (same as error) */
198
.ui.positive.message          /* Positive message (same as success) */
199

200
/* Message variations */
201
.ui.icon.message              /* Message with icon */
202
.ui.compact.message           /* Compact message */
203
.ui.attached.message          /* Attached to other elements */
204
.ui.top.attached.message      /* Attached to top */
205
.ui.bottom.attached.message   /* Attached to bottom */
206
.ui.floating.message          /* Floating message */
207
.ui.hidden.message            /* Hidden message */
208
.ui.visible.message           /* Visible message */
209

210
/* Message content */
211
.ui.message .header           /* Message header */
212
.ui.message .content          /* Message content */
213
.ui.message .list             /* Message list */
214
.ui.message .close.icon       /* Dismissible message close icon */
215
```
216

217
**Usage Examples:**
218

219
```html
220
<!-- Basic messages -->
221
<div class="ui message">
222
  <div class="header">Default Message</div>
223
  <p>This is a basic message with default styling.</p>
224
</div>
225

226
<div class="ui info message">
227
  <div class="header">Information</div>
228
  <p>This is an informational message.</p>
229
</div>
230

231
<div class="ui success message">
232
  <div class="header">Success!</div>
233
  <p>Your action was completed successfully.</p>
234
</div>
235

236
<div class="ui warning message">
237
  <div class="header">Warning</div>
238
  <p>Please check your input before proceeding.</p>
239
</div>
240

241
<!-- Dismissible message -->
242
<div class="ui message">
243
  <i class="close icon"></i>
244
  <div class="header">Dismissible Message</div>
245
  <p>Click the X to dismiss this message.</p>
246
</div>
247

248
<!-- Icon message -->
249
<div class="ui icon message">
250
  <i class="inbox icon"></i>
251
  <div class="content">
252
    <div class="header">No Messages</div>
253
    <p>You have no new messages in your inbox.</p>
254
  </div>
255
</div>
256

257
<!-- Message with list -->
258
<div class="ui error message">
259
  <div class="header">Form Errors</div>
260
  <ul class="list">
261
    <li>Please enter a valid email address</li>
262
    <li>Password must be at least 8 characters</li>
263
    <li>Username is required</li>
264
  </ul>
265
</div>
266
```
267

268
### Table
269

270
Data tables for displaying structured information with sorting and styling options.
271

272
```css { .api }
273
.ui.table                     /* Basic table */
274

275
/* Table types */
276
.ui.celled.table              /* Table with cell borders */
277
.ui.padded.table              /* Table with extra padding */
278
.ui.compact.table             /* Compact table spacing */
279
.ui.basic.table               /* Minimal table styling */
280
.ui.very.basic.table          /* Very minimal table styling */
281

282
/* Table variations */
283
.ui.striped.table             /* Alternating row colors */
284
.ui.selectable.table          /* Selectable rows */
285
.ui.inverted.table            /* Dark/inverted table */
286
.ui.collapsing.table          /* Table collapses to content width */
287
.ui.fixed.table               /* Fixed table layout */
288
.ui.sortable.table            /* Sortable table headers */
289
.ui.stackable.table           /* Mobile-responsive stacking */
290
.ui.unstackable.table         /* Prevent mobile stacking */
291

292
/* Table elements */
293
.ui.table thead               /* Table header section */
294
.ui.table tbody               /* Table body section */
295
.ui.table tfoot               /* Table footer section */
296
.ui.table tr                  /* Table row */
297
.ui.table th                  /* Table header cell */
298
.ui.table td                  /* Table data cell */
299

300
/* Cell states */
301
.ui.table tr.active           /* Active/selected row */
302
.ui.table tr.disabled         /* Disabled row */
303
.ui.table td.active           /* Active cell */
304
.ui.table td.disabled         /* Disabled cell */
305
.ui.table td.positive         /* Positive state cell */
306
.ui.table td.negative         /* Negative state cell */
307
.ui.table td.warning          /* Warning state cell */
308
.ui.table td.error            /* Error state cell */
309

310
/* Cell alignment */
311
.ui.table td.left.aligned     /* Left-aligned cell */
312
.ui.table td.center.aligned   /* Center-aligned cell */
313
.ui.table td.right.aligned    /* Right-aligned cell */
314

315
/* Column width */
316
.ui.table td.single.line      /* Single line cell content */
317
.ui.table td.collapsing       /* Collapse cell to content width */
318
```
319

320
**Usage Examples:**
321

322
```html
323
<!-- Basic table -->
324
<table class="ui table">
325
  <thead>
326
    <tr>
327
      <th>Name</th>
328
      <th>Email</th>
329
      <th>Status</th>
330
    </tr>
331
  </thead>
332
  <tbody>
333
    <tr>
334
      <td>John Doe</td>
335
      <td>john@example.com</td>
336
      <td>Active</td>
337
    </tr>
338
    <tr>
339
      <td>Jane Smith</td>
340
      <td>jane@example.com</td>
341
      <td>Inactive</td>
342
    </tr>
343
  </tbody>
344
</table>
345

346
<!-- Striped selectable table -->
347
<table class="ui striped selectable table">
348
  <thead>
349
    <tr>
350
      <th>Product</th>
351
      <th>Price</th>
352
      <th>Quantity</th>
353
    </tr>
354
  </thead>
355
  <tbody>
356
    <tr>
357
      <td>Laptop</td>
358
      <td>$999.00</td>
359
      <td>5</td>
360
    </tr>
361
    <tr class="active">
362
      <td>Mouse</td>
363
      <td>$29.99</td>
364
      <td>25</td>
365
    </tr>
366
  </tbody>
367
</table>
368

369
<!-- Table with cell states -->
370
<table class="ui table">
371
  <thead>
372
    <tr>
373
      <th>Task</th>
374
      <th>Status</th>
375
      <th>Priority</th>
376
    </tr>
377
  </thead>
378
  <tbody>
379
    <tr class="positive">
380
      <td>Task 1</td>
381
      <td>Complete</td>
382
      <td>High</td>
383
    </tr>
384
    <tr class="negative">
385
      <td>Task 2</td>
386
      <td>Failed</td>
387
      <td>Medium</td>
388
    </tr>
389
    <tr class="warning">
390
      <td>Task 3</td>
391
      <td>Pending</td>
392
      <td>Low</td>
393
    </tr>
394
  </tbody>
395
</table>
396
```
397

398
### Breadcrumb
399

400
Navigation breadcrumbs for showing user location and navigation hierarchy.
401

402
```css { .api }
403
.ui.breadcrumb                /* Breadcrumb container */
404

405
/* Breadcrumb elements */
406
.ui.breadcrumb .section       /* Breadcrumb section/item */
407
.ui.breadcrumb .divider       /* Breadcrumb divider */
408
.ui.breadcrumb .active.section /* Active breadcrumb section */
409

410
/* Breadcrumb variations */
411
.ui.mini.breadcrumb           /* Mini size breadcrumb */
412
.ui.tiny.breadcrumb           /* Tiny size breadcrumb */
413
.ui.small.breadcrumb          /* Small size breadcrumb */
414
.ui.large.breadcrumb          /* Large size breadcrumb */
415
.ui.big.breadcrumb            /* Big size breadcrumb */
416
.ui.huge.breadcrumb           /* Huge size breadcrumb */
417
.ui.massive.breadcrumb        /* Massive size breadcrumb */
418
```
419

420
**Usage Examples:**
421

422
```html
423
<!-- Basic breadcrumb -->
424
<div class="ui breadcrumb">
425
  <a class="section">Home</a>
426
  <div class="divider"> / </div>
427
  <a class="section">Store</a>
428
  <div class="divider"> / </div>
429
  <div class="active section">T-Shirt</div>
430
</div>
431

432
<!-- Breadcrumb with icons -->
433
<div class="ui breadcrumb">
434
  <a class="section">
435
    <i class="home icon"></i>
436
    Home
437
  </a>
438
  <i class="right chevron icon divider"></i>
439
  <a class="section">Registration</a>
440
  <i class="right chevron icon divider"></i>
441
  <div class="active section">Personal Information</div>
442
</div>
443

444
<!-- Large breadcrumb -->
445
<div class="ui large breadcrumb">
446
  <a class="section">Home</a>
447
  <div class="divider"> / </div>
448
  <a class="section">Library</a>
449
  <div class="divider"> / </div>
450
  <div class="active section">Documents</div>
451
</div>
452
```
453

454
## Collection Patterns
455

456
### Responsive Behavior
457
Collections adapt to different screen sizes:
458
```css { .api }
459
.ui.stackable.table           /* Table stacks on mobile */
460
.ui.tablet.stackable.table    /* Stack on tablet and below */
461
.ui.computer.stackable.table  /* Stack on computer and below */
462
```
463

464
### Color Variations
465
Collections support the standard color palette:
466
```css { .api }
467
.ui.red.message               /* Red colored message */
468
.ui.blue.table                /* Blue colored table */
469
.ui.green.menu                /* Green colored menu */
470
```
471

472
### Size Variations
473
Collections support the standard size scale:
474
```css { .api }
475
.ui.mini.form                 /* Mini sized form */
476
.ui.small.menu                /* Small sized menu */
477
.ui.large.table               /* Large sized table */
478
```