0
# Form Components
1

2
UIkit's form components provide comprehensive styling and functionality for form controls, buttons, and input validation interfaces.
3

4
## Capabilities
5

6
### Form Controls
7

8
Base styling for form input elements and controls.
9

10
```css { .api }
11
/* Input Fields */
12
.uk-input {
13
  /* Text input styling */
14
  max-width: 100%;
15
  width: 100%;
16
  border: 0 none;
17
  padding: 0 10px;
18
  background: #fff;
19
  color: #666;
20
  border: 1px solid #e5e5e5;
21
  border-radius: 4px;
22
  font-size: 14px;
23
  line-height: 40px;
24
  height: 40px;
25
}
26

27
.uk-input:focus {
28
  /* Focused input styling */
29
  outline: 0;
30
  background-color: #fff;
31
  color: #666;
32
  border-color: #1e87f0;
33
}
34

35
/* Select Dropdown */
36
.uk-select {
37
  /* Select field styling */
38
  max-width: 100%;
39
  width: 100%;
40
  border: 0 none;
41
  padding: 0 10px;
42
  background: #fff;
43
  color: #666;
44
  border: 1px solid #e5e5e5;
45
  border-radius: 4px;
46
  font-size: 14px;
47
  line-height: 38px;
48
  height: 40px;
49
}
50

51
/* Textarea */
52
.uk-textarea {
53
  /* Textarea styling */
54
  max-width: 100%;
55
  width: 100%;
56
  border: 0 none;
57
  padding: 4px 6px;
58
  background: #fff;
59
  color: #666;
60
  border: 1px solid #e5e5e5;
61
  border-radius: 4px;
62
  font-size: 14px;
63
  resize: vertical;
64
}
65

66
/* Radio and Checkbox */
67
.uk-radio,
68
.uk-checkbox {
69
  /* Radio and checkbox base styling */
70
  display: inline-block;
71
  height: 16px;
72
  width: 16px;
73
  overflow: hidden;
74
  margin-top: -4px;
75
  vertical-align: middle;
76
  -webkit-appearance: none;
77
  -moz-appearance: none;
78
  outline: 0;
79
  cursor: pointer;
80
}
81

82
.uk-radio {
83
  /* Radio button styling */
84
  border-radius: 50%;
85
  background: #fff;
86
  border: 1px solid #cccccc;
87
}
88

89
.uk-checkbox {
90
  /* Checkbox styling */
91
  border-radius: 3px;
92
  background: #fff;
93
  border: 1px solid #cccccc;
94
}
95

96
/* Form Size Variants */
97
.uk-form-small .uk-input,
98
.uk-form-small .uk-select { /* Small form controls */
99
  height: 30px;
100
  padding: 0 6px;
101
  font-size: 12px;
102
}
103

104
.uk-form-large .uk-input,
105
.uk-form-large .uk-select { /* Large form controls */
106
  height: 55px;
107
  padding: 0 12px;
108
  font-size: 16px;
109
}
110

111
/* Form Width Variants */
112
.uk-form-width-xsmall { /* Extra small width */ max-width: 50px; }
113
.uk-form-width-small { /* Small width */ max-width: 130px; }
114
.uk-form-width-medium { /* Medium width */ max-width: 200px; }
115
.uk-form-width-large { /* Large width */ max-width: 500px; }
116

117
/* Form States */
118
.uk-form-danger { /* Danger/error state */ border-color: #f0506e; }
119
.uk-form-success { /* Success state */ border-color: #32d296; }
120

121
/* Form Layout */
122
.uk-form-horizontal { /* Horizontal form layout */ }
123
.uk-form-stacked { /* Stacked form layout */ }
124
```
125

126
**Usage Examples:**
127

128
```html
129
<!-- Basic Form -->
130
<form class="uk-form-stacked">
131
    <div class="uk-margin">
132
        <label class="uk-form-label" for="form-stacked-text">Text</label>
133
        <div class="uk-form-controls">
134
            <input class="uk-input" id="form-stacked-text" type="text" placeholder="Some text...">
135
        </div>
136
    </div>
137
    
138
    <div class="uk-margin">
139
        <label class="uk-form-label" for="form-stacked-select">Select</label>
140
        <div class="uk-form-controls">
141
            <select class="uk-select" id="form-stacked-select">
142
                <option>Option 01</option>
143
                <option>Option 02</option>
144
            </select>
145
        </div>
146
    </div>
147
    
148
    <div class="uk-margin">
149
        <label class="uk-form-label" for="form-stacked-textarea">Textarea</label>
150
        <div class="uk-form-controls">
151
            <textarea class="uk-textarea" id="form-stacked-textarea" rows="5" placeholder="Textarea..."></textarea>
152
        </div>
153
    </div>
154
</form>
155

156
<!-- Form with Validation States -->
157
<div class="uk-margin">
158
    <input class="uk-input uk-form-success" type="text" placeholder="Success state">
159
</div>
160
<div class="uk-margin">
161
    <input class="uk-input uk-form-danger" type="text" placeholder="Danger state">
162
</div>
163

164
<!-- Form Sizes -->
165
<div class="uk-margin">
166
    <input class="uk-input uk-form-small" type="text" placeholder="Small">
167
</div>
168
<div class="uk-margin">
169
    <input class="uk-input" type="text" placeholder="Default">
170
</div>
171
<div class="uk-margin">
172
    <input class="uk-input uk-form-large" type="text" placeholder="Large">
173
</div>
174
```
175

176
### Buttons
177

178
Button component with multiple variants and states.
179

180
```css { .api }
181
/* Button Base */
182
.uk-button {
183
  /* Base button styling */
184
  margin: 0;
185
  border: none;
186
  overflow: visible;
187
  font: inherit;
188
  color: inherit;
189
  text-transform: none;
190
  -webkit-appearance: none;
191
  border-radius: 0;
192
  display: inline-block;
193
  box-sizing: border-box;
194
  padding: 0 30px;
195
  vertical-align: middle;
196
  font-size: 14px;
197
  line-height: 38px;
198
  text-decoration: none;
199
  text-align: center;
200
  border: 1px solid transparent;
201
  border-radius: 4px;
202
  background: transparent;
203
  cursor: pointer;
204
  transition: 0.1s ease-in-out;
205
}
206

207
/* Button Variants */
208
.uk-button-default {
209
  /* Default button */
210
  background-color: #fff;
211
  color: #666;
212
  border-color: #e5e5e5;
213
}
214

215
.uk-button-primary {
216
  /* Primary button */
217
  background-color: #1e87f0;
218
  color: #fff;
219
  border-color: #1e87f0;
220
}
221

222
.uk-button-secondary {
223
  /* Secondary button */
224
  background-color: #222;
225
  color: #fff;
226
  border-color: #222;
227
}
228

229
.uk-button-danger {
230
  /* Danger button */
231
  background-color: #f0506e;
232
  color: #fff;
233
  border-color: #f0506e;
234
}
235

236
.uk-button-text {
237
  /* Text-only button */
238
  padding: 0;
239
  line-height: 1.5;
240
  background: none;
241
  color: #333;
242
}
243

244
.uk-button-link {
245
  /* Link-styled button */
246
  padding: 0;
247
  line-height: 1.5;
248
  background: none;
249
  color: #1e87f0;
250
}
251

252
/* Button Sizes */
253
.uk-button-small {
254
  /* Small button */
255
  padding: 0 15px;
256
  line-height: 28px;
257
  font-size: 11px;
258
}
259

260
.uk-button-large {
261
  /* Large button */
262
  padding: 0 40px;
263
  line-height: 53px;
264
  font-size: 16px;
265
}
266

267
/* Button States */
268
.uk-button:hover { /* Hover state */ }
269
.uk-button:focus { /* Focus state */ }
270
.uk-button:active { /* Active state */ }
271
.uk-button:disabled { /* Disabled state */ }
272
```
273

274
**Usage Examples:**
275

276
```html
277
<!-- Button Variants -->
278
<button class="uk-button uk-button-default">Default</button>
279
<button class="uk-button uk-button-primary">Primary</button>
280
<button class="uk-button uk-button-secondary">Secondary</button>
281
<button class="uk-button uk-button-danger">Danger</button>
282
<button class="uk-button uk-button-text">Text</button>
283
<button class="uk-button uk-button-link">Link</button>
284

285
<!-- Button Sizes -->
286
<button class="uk-button uk-button-default uk-button-small">Small</button>
287
<button class="uk-button uk-button-default">Default</button>
288
<button class="uk-button uk-button-default uk-button-large">Large</button>
289

290
<!-- Button States -->
291
<button class="uk-button uk-button-default" disabled>Disabled</button>
292

293
<!-- Button Group -->
294
<div class="uk-button-group">
295
    <button class="uk-button uk-button-default">Button</button>
296
    <button class="uk-button uk-button-default">Button</button>
297
    <button class="uk-button uk-button-default">Button</button>
298
</div>
299
```
300

301
### Form Range
302

303
Custom range input styling.
304

305
```css { .api }
306
/* Range Input */
307
.uk-range {
308
  /* Range input base styling */
309
  -webkit-appearance: none;
310
  background: transparent;
311
  padding: 0;
312
}
313

314
.uk-range::-webkit-slider-track {
315
  /* Webkit track styling */
316
  height: 3px;
317
  background: #f8f8f8;
318
  border: none;
319
  border-radius: 500px;
320
}
321

322
.uk-range::-webkit-slider-thumb {
323
  /* Webkit thumb styling */
324
  -webkit-appearance: none;
325
  margin-top: -7px;
326
  height: 17px;
327
  width: 17px;
328
  border-radius: 500px;
329
  background: #fff;
330
  border: 1px solid #cccccc;
331
}
332

333
.uk-range::-moz-range-track {
334
  /* Firefox track styling */
335
  height: 3px;
336
  background: #f8f8f8;
337
  border: none;
338
  border-radius: 500px;
339
}
340

341
.uk-range::-moz-range-thumb {
342
  /* Firefox thumb styling */
343
  border: none;
344
  height: 17px;
345
  width: 17px;
346
  border-radius: 500px;
347
  background: #fff;
348
  border: 1px solid #cccccc;
349
}
350
```
351

352
**Usage Examples:**
353

354
```html
355
<!-- Range Input -->
356
<input class="uk-range" type="range" value="2" min="0" max="10" step="0.1">
357

358
<!-- Range with Labels -->
359
<div class="uk-margin">
360
    <label class="uk-form-label">Volume</label>
361
    <input class="uk-range" type="range" value="50" min="0" max="100">
362
</div>
363
```
364

365
### Form Validation
366

367
Form validation styling and feedback classes.
368

369
```css { .api }
370
/* Validation States */
371
.uk-form-danger {
372
  /* Form control error state */
373
  color: #f0506e;
374
  border-color: #f0506e !important;
375
}
376

377
.uk-form-success {
378
  /* Form control success state */
379
  color: #32d296;
380
  border-color: #32d296 !important;
381
}
382

383
/* Validation Icons */
384
.uk-form-icon {
385
  /* Form icon container */
386
  position: absolute;
387
  top: 0;
388
  width: 40px;
389
  height: 40px;
390
  pointer-events: none;
391
}
392

393
.uk-form-icon:not(.uk-form-icon-flip) {
394
  /* Left positioned icon */
395
  left: 0;
396
}
397

398
.uk-form-icon-flip {
399
  /* Right positioned icon */
400
  right: 0;
401
}
402

403
.uk-form-icon > * {
404
  /* Icon positioning */
405
  position: absolute;
406
  top: 50%;
407
  left: 50%;
408
  transform: translate(-50%, -50%);
409
  max-width: 18px;
410
  max-height: 18px;
411
  color: #999;
412
}
413
```
414

415
**Usage Examples:**
416

417
```html
418
<!-- Form with Icons -->
419
<div class="uk-margin">
420
    <div class="uk-inline">
421
        <span class="uk-form-icon" uk-icon="icon: user"></span>
422
        <input class="uk-input" type="text" placeholder="Username">
423
    </div>
424
</div>
425

426
<div class="uk-margin">
427
    <div class="uk-inline">
428
        <span class="uk-form-icon uk-form-icon-flip" uk-icon="icon: lock"></span>
429
        <input class="uk-input" type="password" placeholder="Password">
430
    </div>
431
</div>
432

433
<!-- Validation with Custom Messages -->
434
<div class="uk-margin">
435
    <input class="uk-input uk-form-danger" type="text" placeholder="Error state">
436
    <div class="uk-text-danger uk-text-small">Please enter a valid value</div>
437
</div>
438

439
<div class="uk-margin">
440
    <input class="uk-input uk-form-success" type="text" placeholder="Success state">
441
    <div class="uk-text-success uk-text-small">Value is valid</div>
442
</div>
443
```
444

445
### Form Custom
446

447
Custom form control styling for enhanced form elements.
448

449
```css { .api }
450
/* Custom Select */
451
.uk-select:not([multiple]):not([size]) {
452
  /* Custom select dropdown arrow */
453
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg...");
454
  background-repeat: no-repeat;
455
  background-position: 100% 50%;
456
  padding-right: 20px;
457
}
458

459
/* File Input */
460
.uk-form-custom {
461
  /* Custom file input container */
462
  position: relative;
463
  display: inline-block;
464
  max-width: 100%;
465
  vertical-align: middle;
466
}
467

468
.uk-form-custom input[type="file"] {
469
  /* Hidden file input */
470
  position: absolute;
471
  top: 0;
472
  z-index: 1;
473
  width: 100%;
474
  height: 100%;
475
  left: 0;
476
  -webkit-appearance: none;
477
  opacity: 0;
478
  cursor: pointer;
479
}
480

481
.uk-form-custom .uk-form-custom-text {
482
  /* Custom file input text */
483
  overflow: hidden;
484
  text-overflow: ellipsis;
485
  white-space: nowrap;
486
}
487
```
488

489
**JavaScript API:**
490

491
```javascript { .api }
492
/**
493
 * Form Custom component for enhanced form controls
494
 */
495
UIkit.formCustom(element: HTMLElement | string, options?: {
496
  /** Target input selector */
497
  target?: string;
498
}): FormCustomComponent;
499

500
interface FormCustomComponent {
501
  /** Form custom element */
502
  $el: HTMLElement;
503
}
504
```
505

506
**Usage Examples:**
507

508
```html
509
<!-- Custom File Input -->
510
<div uk-form-custom>
511
    <input type="file">
512
    <button class="uk-button uk-button-default" type="button" tabindex="-1">Select</button>
513
</div>
514

515
<!-- Custom File Input with Filename Display -->
516
<div uk-form-custom="target: true">
517
    <input type="file">
518
    <input class="uk-input uk-form-width-medium" type="text" placeholder="Select file" disabled>
519
</div>
520

521
<!-- Custom File Input Button -->
522
<div uk-form-custom>
523
    <input type="file" multiple>
524
    <button class="uk-button uk-button-primary" type="button" tabindex="-1">
525
        <span uk-icon="cloud-upload"></span> Upload Files
526
    </button>
527
</div>
528
```
529

530
### Form Layout
531

532
Layout utilities for organizing form elements.
533

534
```css { .api }
535
/* Form Layout Classes */
536
.uk-form-horizontal {
537
  /* Horizontal form layout */
538
  display: flex;
539
  flex-wrap: wrap;
540
  margin-left: -15px;
541
}
542

543
.uk-form-horizontal > * {
544
  /* Horizontal form items */
545
  padding-left: 15px;
546
}
547

548
.uk-form-controls-text {
549
  /* Form control text alignment */
550
  display: inline-block;
551
  margin-top: 7px;
552
}
553

554
/* Form Labels */
555
.uk-form-label {
556
  /* Form label styling */
557
  color: #333;
558
  font-size: 14px;
559
}
560

561
/* Form Legend */
562
.uk-fieldset {
563
  /* Fieldset styling */
564
  border: 0;
565
  margin: 0;
566
  padding: 0;
567
}
568

569
.uk-legend {
570
  /* Legend styling */
571
  font-size: 20px;
572
  line-height: 1.4;
573
  color: #333;
574
  margin-bottom: 20px;
575
}
576
```
577

578
**Usage Examples:**
579

580
```html
581
<!-- Horizontal Form -->
582
<form class="uk-form-horizontal uk-margin-large">
583
    <div class="uk-margin">
584
        <label class="uk-form-label" for="form-horizontal-text">Text</label>
585
        <div class="uk-form-controls">
586
            <input class="uk-input" id="form-horizontal-text" type="text" placeholder="Some text...">
587
        </div>
588
    </div>
589
    
590
    <div class="uk-margin">
591
        <div class="uk-form-label">Radio</div>
592
        <div class="uk-form-controls">
593
            <label><input class="uk-radio" type="radio" name="radio1" checked> Option 01</label><br>
594
            <label><input class="uk-radio" type="radio" name="radio1"> Option 02</label>
595
        </div>
596
    </div>
597
</form>
598

599
<!-- Fieldset with Legend -->
600
<fieldset class="uk-fieldset">
601
    <legend class="uk-legend">Legend</legend>
602
    <div class="uk-margin">
603
        <input class="uk-input" type="text" placeholder="Input">
604
    </div>
605
    <div class="uk-margin">
606
        <select class="uk-select">
607
            <option>Option 01</option>
608
            <option>Option 02</option>
609
        </select>
610
    </div>
611
</fieldset>
612
```