0
# UI Components
1

2
Vaadin provides a comprehensive set of UI components for building modern web applications. All components are server-side Java objects that automatically synchronize with the client-side browser representation.
3

4
## Core Imports
5

6
```java
7
// Basic UI components
8
import com.vaadin.flow.component.button.Button;
9
import com.vaadin.flow.component.textfield.TextField;
10
import com.vaadin.flow.component.textfield.TextArea;
11
import com.vaadin.flow.component.textfield.PasswordField;
12
import com.vaadin.flow.component.textfield.NumberField;
13
import com.vaadin.flow.component.textfield.IntegerField;
14
import com.vaadin.flow.component.textfield.EmailField;
15

16
// Selection components
17
import com.vaadin.flow.component.checkbox.Checkbox;
18
import com.vaadin.flow.component.checkbox.CheckboxGroup;
19
import com.vaadin.flow.component.radiobutton.RadioButtonGroup;
20
import com.vaadin.flow.component.combobox.ComboBox;
21
import com.vaadin.flow.component.combobox.MultiSelectComboBox;
22
import com.vaadin.flow.component.select.Select;
23
import com.vaadin.flow.component.listbox.ListBox;
24
import com.vaadin.flow.component.listbox.MultiSelectListBox;
25

26
// Date and time components
27
import com.vaadin.flow.component.datepicker.DatePicker;
28
import com.vaadin.flow.component.timepicker.TimePicker;
29
import com.vaadin.flow.component.datetimepicker.DateTimePicker;
30

31
// File upload and visual feedback
32
import com.vaadin.flow.component.upload.Upload;
33
import com.vaadin.flow.component.progressbar.ProgressBar;
34

35
// Visual components
36
import com.vaadin.flow.component.avatar.Avatar;
37
import com.vaadin.flow.component.avatar.AvatarGroup;
38
import com.vaadin.flow.component.icon.Icon;
39
import com.vaadin.flow.component.icon.VaadinIcon;
40

41
// Core interfaces and types
42
import com.vaadin.flow.component.Component;
43
import com.vaadin.flow.component.HasValue;
44
import com.vaadin.flow.component.AbstractField;
45
import com.vaadin.flow.data.provider.HasDataProvider;
46
import com.vaadin.flow.shared.Registration;
47

48
// Event handling
49
import com.vaadin.flow.component.ComponentEventListener;
50
import com.vaadin.flow.component.ClickEvent;
51
import com.vaadin.flow.component.ValueChangeEvent;
52

53
// Theme variants
54
import com.vaadin.flow.component.button.ButtonVariant;
55
import com.vaadin.flow.component.avatar.AvatarVariant;
56
```
57

58
## Form Input Components
59

60
### Button
61

62
Clickable button component with various styles and event handling.
63

64
```java { .api }
65
public class Button extends Component implements ClickNotifier<Button>, HasText, HasTheme {
66
    public Button();
67
    public Button(String text);
68
    public Button(String text, ComponentEventListener<ClickEvent<Button>> clickListener);
69
    public Button(Icon icon);
70
    public Button(Icon icon, ComponentEventListener<ClickEvent<Button>> clickListener);
71

72
    public void setText(String text);
73
    public String getText();
74
    public void setIcon(Component icon);
75
    public Component getIcon();
76
    public Registration addClickListener(ComponentEventListener<ClickEvent<Button>> listener);
77
    public void click();
78
    public void setDisableOnClick(boolean disableOnClick);
79
    public void addThemeVariants(ButtonVariant... variants);
80
}
81
```
82

83
### TextField
84

85
Single-line text input field with validation and formatting options.
86

87
```java { .api }
88
public class TextField extends AbstractField<TextField, String> implements HasAutocomplete, HasPrefixAndSuffix {
89
    public TextField();
90
    public TextField(String label);
91
    public TextField(String label, String placeholder);
92
    public TextField(String label, String initialValue, String placeholder);
93
    public TextField(ValueChangeListener<ComponentValueChangeEvent<TextField, String>> listener);
94

95
    public void setPlaceholder(String placeholder);
96
    public String getPlaceholder();
97
    public void setPattern(String pattern);
98
    public String getPattern();
99
    public void setMinLength(int minLength);
100
    public int getMinLength();
101
    public void setMaxLength(int maxLength);
102
    public int getMaxLength();
103
    public void setAutoselect(boolean autoselect);
104
    public boolean isAutoselect();
105
    public void setClearButtonVisible(boolean clearButtonVisible);
106
    public void setValueChangeMode(ValueChangeMode valueChangeMode);
107
}
108
```
109

110
### TextArea
111

112
Multi-line text input area with resizing and character counting.
113

114
```java { .api }
115
public class TextArea extends AbstractField<TextArea, String> implements HasAutocomplete {
116
    public TextArea();
117
    public TextArea(String label);
118
    public TextArea(String label, String placeholder);
119
    public TextArea(ValueChangeListener<ComponentValueChangeEvent<TextArea, String>> listener);
120

121
    public void setMinHeight(String minHeight);
122
    public void setMaxHeight(String maxHeight);
123
    public void setMinLength(int minLength);
124
    public void setMaxLength(int maxLength);
125
    public void setClearButtonVisible(boolean clearButtonVisible);
126
    public void setResizable(boolean resizable);
127
}
128
```
129

130
### PasswordField
131

132
Password input field with visibility toggle and strength validation.
133

134
```java { .api }
135
public class PasswordField extends TextField {
136
    public PasswordField();
137
    public PasswordField(String label);
138
    public PasswordField(String label, String placeholder);
139
    public PasswordField(ValueChangeListener<ComponentValueChangeEvent<PasswordField, String>> listener);
140

141
    public void setRevealButtonVisible(boolean revealButtonVisible);
142
    public boolean isRevealButtonVisible();
143
}
144
```
145

146
### NumberField
147

148
Numeric input field with step controls and validation.
149

150
```java { .api }
151
public class NumberField extends AbstractField<NumberField, Double> {
152
    public NumberField();
153
    public NumberField(String label);
154
    public NumberField(ValueChangeListener<ComponentValueChangeEvent<NumberField, Double>> listener);
155

156
    public void setMin(double min);
157
    public double getMin();
158
    public void setMax(double max);
159
    public double getMax();
160
    public void setStep(double step);
161
    public double getStep();
162
    public void setHasControls(boolean hasControls);
163
    public boolean isHasControls();
164
}
165
```
166

167
### IntegerField
168

169
Integer-specific numeric input with validation.
170

171
```java { .api }
172
public class IntegerField extends AbstractField<IntegerField, Integer> {
173
    public IntegerField();
174
    public IntegerField(String label);
175
    public IntegerField(ValueChangeListener<ComponentValueChangeEvent<IntegerField, Integer>> listener);
176

177
    public void setMin(int min);
178
    public int getMin();
179
    public void setMax(int max);
180
    public int getMax();
181
    public void setStep(int step);
182
    public int getStep();
183
    public void setHasControls(boolean hasControls);
184
}
185
```
186

187
### EmailField
188

189
Email input field with built-in validation and formatting.
190

191
```java { .api }
192
public class EmailField extends TextField {
193
    public EmailField();
194
    public EmailField(String label);
195
    public EmailField(String label, String placeholder);
196
    public EmailField(ValueChangeListener<ComponentValueChangeEvent<EmailField, String>> listener);
197
}
198
```
199

200
### Checkbox
201

202
Boolean checkbox input with indeterminate state support.
203

204
```java { .api }
205
public class Checkbox extends AbstractSinglePropertyField<Checkbox, Boolean> implements ClickNotifier<Checkbox> {
206
    public Checkbox();
207
    public Checkbox(String labelText);
208
    public Checkbox(boolean initialValue);
209
    public Checkbox(String labelText, boolean initialValue);
210

211
    public void setLabel(String label);
212
    public String getLabel();
213
    public void setIndeterminate(boolean indeterminate);
214
    public boolean isIndeterminate();
215
    public void setAriaLabel(String ariaLabel);
216
    public Registration addClickListener(ComponentEventListener<ClickEvent<Checkbox>> listener);
217
}
218
```
219

220
### CheckboxGroup
221

222
Multi-select checkbox group for choosing multiple options.
223

224
```java { .api }
225
public class CheckboxGroup<T> extends AbstractField<CheckboxGroup<T>, Set<T>> implements HasDataProvider<T>, HasItemComponents<T> {
226
    public CheckboxGroup();
227
    public CheckboxGroup(String label);
228
    public CheckboxGroup(String label, Collection<T> items);
229

230
    public void setItems(Collection<T> items);
231
    public void setItems(T... items);
232
    public void setItemLabelGenerator(ItemLabelGenerator<T> itemLabelGenerator);
233
    public void setDataProvider(DataProvider<T, ?> dataProvider);
234
    public DataProvider<T, ?> getDataProvider();
235
    public void setReadOnly(boolean readOnly);
236
    public void select(T... items);
237
    public void deselect(T... items);
238
}
239
```
240

241
### RadioButtonGroup
242

243
Single-select radio button group for choosing one option from multiple.
244

245
```java { .api }
246
public class RadioButtonGroup<T> extends AbstractField<RadioButtonGroup<T>, T> implements HasDataProvider<T> {
247
    public RadioButtonGroup();
248
    public RadioButtonGroup(String label);
249
    public RadioButtonGroup(String label, Collection<T> items);
250

251
    public void setItems(Collection<T> items);
252
    public void setItems(T... items);
253
    public void setItemLabelGenerator(ItemLabelGenerator<T> itemLabelGenerator);
254
    public void setDataProvider(DataProvider<T, ?> dataProvider);
255
    public DataProvider<T, ?> getDataProvider();
256
    public void setReadOnly(boolean readOnly);
257
}
258
```
259

260
## Selection Components
261

262
### ComboBox
263

264
Dropdown selection with filtering and custom item rendering.
265

266
```java { .api }
267
public class ComboBox<T> extends AbstractField<ComboBox<T>, T> implements HasDataProvider<T>, HasFilterableDataProvider<T, String> {
268
    public ComboBox();
269
    public ComboBox(String label);
270
    public ComboBox(String label, Collection<T> items);
271

272
    public void setItems(Collection<T> items);
273
    public void setItems(T... items);
274
    public void setItemLabelGenerator(ItemLabelGenerator<T> itemLabelGenerator);
275
    public void setDataProvider(DataProvider<T, ?> dataProvider);
276
    public void setPageSize(int pageSize);
277
    public int getPageSize();
278
    public void setAllowCustomValue(boolean allowCustomValue);
279
    public boolean isAllowCustomValue();
280
    public void setAutoOpen(boolean autoOpen);
281
    public void setClearButtonVisible(boolean clearButtonVisible);
282
    public void setPlaceholder(String placeholder);
283
    public void open();
284
    public void close();
285
}
286
```
287

288
### MultiSelectComboBox
289

290
Multi-select dropdown with filtering and tag display.
291

292
```java { .api }
293
public class MultiSelectComboBox<T> extends AbstractField<MultiSelectComboBox<T>, Set<T>> implements HasDataProvider<T> {
294
    public MultiSelectComboBox();
295
    public MultiSelectComboBox(String label);
296
    public MultiSelectComboBox(String label, Collection<T> items);
297

298
    public void setItems(Collection<T> items);
299
    public void setItems(T... items);
300
    public void setItemLabelGenerator(ItemLabelGenerator<T> itemLabelGenerator);
301
    public void setDataProvider(DataProvider<T, ?> dataProvider);
302
    public void setPageSize(int pageSize);
303
    public void setAutoOpen(boolean autoOpen);
304
    public void setClearButtonVisible(boolean clearButtonVisible);
305
    public void select(T... items);
306
    public void deselect(T... items);
307
    public void deselectAll();
308
}
309
```
310

311
### Select
312

313
Simple dropdown selection without filtering.
314

315
```java { .api }
316
public class Select<T> extends AbstractField<Select<T>, T> implements HasDataProvider<T> {
317
    public Select();
318
    public Select(T... items);
319
    public Select(String label, T... items);
320

321
    public void setItems(Collection<T> items);
322
    public void setItems(T... items);
323
    public void setItemLabelGenerator(ItemLabelGenerator<T> itemLabelGenerator);
324
    public void setTextRenderer(Renderer<T> renderer);
325
    public void setEmptySelectionAllowed(boolean emptySelectionAllowed);
326
    public void setEmptySelectionCaption(String caption);
327
    public void setPlaceholder(String placeholder);
328
}
329
```
330

331
### ListBox
332

333
Scrollable list selection component.
334

335
```java { .api }
336
public class ListBox<T> extends AbstractField<ListBox<T>, T> implements HasDataProvider<T> {
337
    public ListBox();
338
    public ListBox(T... items);
339

340
    public void setItems(Collection<T> items);
341
    public void setItems(T... items);
342
    public void setItemLabelGenerator(ItemLabelGenerator<T> itemLabelGenerator);
343
    public void setRenderer(ComponentRenderer<? extends Component, T> renderer);
344
    public void setDataProvider(DataProvider<T, ?> dataProvider);
345
}
346
```
347

348
### MultiSelectListBox
349

350
Multi-select scrollable list component.
351

352
```java { .api }
353
public class MultiSelectListBox<T> extends AbstractField<MultiSelectListBox<T>, Set<T>> implements HasDataProvider<T> {
354
    public MultiSelectListBox();
355
    public MultiSelectListBox(T... items);
356

357
    public void setItems(Collection<T> items);
358
    public void setItems(T... items);
359
    public void setItemLabelGenerator(ItemLabelGenerator<T> itemLabelGenerator);
360
    public void setRenderer(ComponentRenderer<? extends Component, T> renderer);
361
    public void select(T... items);
362
    public void deselect(T... items);
363
    public void deselectAll();
364
}
365
```
366

367
## Date and Time Components
368

369
### DatePicker
370

371
Date selection component with calendar popup and internationalization.
372

373
```java { .api }
374
public class DatePicker extends AbstractField<DatePicker, LocalDate> {
375
    public DatePicker();
376
    public DatePicker(String label);
377
    public DatePicker(LocalDate initialDate);
378
    public DatePicker(String label, LocalDate initialDate);
379

380
    public void setMin(LocalDate min);
381
    public LocalDate getMin();
382
    public void setMax(LocalDate max);
383
    public LocalDate getMax();
384
    public void setLocale(Locale locale);
385
    public Locale getLocale();
386
    public void setPlaceholder(String placeholder);
387
    public void setClearButtonVisible(boolean clearButtonVisible);
388
    public void setAutoOpen(boolean autoOpen);
389
    public void setWeekNumbersVisible(boolean weekNumbersVisible);
390
    public void open();
391
    public void close();
392
}
393
```
394

395
### TimePicker
396

397
Time selection component with step configuration.
398

399
```java { .api }
400
public class TimePicker extends AbstractField<TimePicker, LocalTime> {
401
    public TimePicker();
402
    public TimePicker(String label);
403
    public TimePicker(LocalTime initialTime);
404
    public TimePicker(String label, LocalTime initialTime);
405

406
    public void setMin(LocalTime min);
407
    public LocalTime getMin();
408
    public void setMax(LocalTime max);
409
    public LocalTime getMax();
410
    public void setStep(Duration step);
411
    public Duration getStep();
412
    public void setLocale(Locale locale);
413
    public void setAutoOpen(boolean autoOpen);
414
    public void setClearButtonVisible(boolean clearButtonVisible);
415
}
416
```
417

418
### DateTimePicker
419

420
Combined date and time selection component.
421

422
```java { .api }
423
public class DateTimePicker extends AbstractField<DateTimePicker, LocalDateTime> {
424
    public DateTimePicker();
425
    public DateTimePicker(String label);
426
    public DateTimePicker(LocalDateTime initialDateTime);
427
    public DateTimePicker(String label, LocalDateTime initialDateTime);
428

429
    public void setMin(LocalDateTime min);
430
    public LocalDateTime getMin();
431
    public void setMax(LocalDateTime max);
432
    public LocalDateTime getMax();
433
    public void setDatePlaceholder(String placeholder);
434
    public void setTimePlaceholder(String placeholder);
435
    public void setStep(Duration step);
436
    public void setAutoOpen(boolean autoOpen);
437
    public DatePicker getDatePicker();
438
    public TimePicker getTimePicker();
439
}
440
```
441

442
## File Upload
443

444
### Upload
445

446
File upload component with drag-and-drop support and progress indication.
447

448
```java { .api }
449
public class Upload extends Component implements HasSize {
450
    public Upload();
451
    public Upload(Receiver receiver);
452

453
    public void setReceiver(Receiver receiver);
454
    public Receiver getReceiver();
455
    public void setMaxFiles(int maxFiles);
456
    public int getMaxFiles();
457
    public void setMaxFileSize(int maxFileSize);
458
    public int getMaxFileSize();
459
    public void setAcceptedFileTypes(String... acceptedFileTypes);
460
    public String[] getAcceptedFileTypes();
461
    public void setDropLabel(Component dropLabel);
462
    public void setUploadButton(Component uploadButton);
463
    public void setAutoUpload(boolean autoUpload);
464
    public boolean isAutoUpload();
465
    public Registration addStartedListener(ComponentEventListener<StartedEvent> listener);
466
    public Registration addSucceededListener(ComponentEventListener<SucceededEvent> listener);
467
    public Registration addFailedListener(ComponentEventListener<FailedEvent> listener);
468
    public Registration addProgressListener(ComponentEventListener<ProgressEvent> listener);
469
    public void interruptUpload();
470
}
471
```
472

473
## Visual Feedback Components
474

475
### ProgressBar
476

477
Progress indication component with determinate and indeterminate modes.
478

479
```java { .api }
480
public class ProgressBar extends Component implements HasSize {
481
    public ProgressBar();
482
    public ProgressBar(double min, double max);
483
    public ProgressBar(double min, double max, double value);
484

485
    public void setValue(double value);
486
    public double getValue();
487
    public void setMin(double min);
488
    public double getMin();
489
    public void setMax(double max);
490
    public double getMax();
491
    public void setIndeterminate(boolean indeterminate);
492
    public boolean isIndeterminate();
493
}
494
```
495

496
### Avatar
497

498
User avatar display component with fallback initials.
499

500
```java { .api }
501
public class Avatar extends Component implements HasSize, HasTheme {
502
    public Avatar();
503
    public Avatar(String name);
504
    public Avatar(String name, String url);
505

506
    public void setName(String name);
507
    public String getName();
508
    public void setImage(String url);
509
    public String getImage();
510
    public void setAbbreviation(String abbreviation);
511
    public String getAbbreviation();
512
    public void setColorIndex(Integer colorIndex);
513
    public Integer getColorIndex();
514
    public void addThemeVariants(AvatarVariant... variants);
515
}
516
```
517

518
### AvatarGroup
519

520
Group display of multiple avatars with overflow handling.
521

522
```java { .api }
523
public class AvatarGroup extends Component implements HasSize {
524
    public AvatarGroup();
525
    public AvatarGroup(Avatar... avatars);
526

527
    public void add(Avatar... avatars);
528
    public void remove(Avatar... avatars);
529
    public void setMaxItemsVisible(Integer maxItemsVisible);
530
    public Integer getMaxItemsVisible();
531
    public List<Avatar> getChildren();
532
}
533
```
534

535
### Icon
536

537
Icon display component with support for Vaadin Icons and custom SVG.
538

539
```java { .api }
540
public class Icon extends Component implements HasSize, HasStyle {
541
    public Icon();
542
    public Icon(VaadinIcon icon);
543
    public Icon(String collection, String icon);
544

545
    public void setIcon(VaadinIcon icon);
546
    public void setIcon(String collection, String icon);
547
    public String getIcon();
548
    public void setSize(String size);
549
    public void setColor(String color);
550
}
551
```
552

553
## Common Interfaces and Types
554

555
```java { .api }
556
// Value change handling
557
public interface ValueChangeListener<E extends ValueChangeEvent<?>> {
558
    void valueChanged(E event);
559
}
560

561
public interface HasValue<E extends HasValue.ValueChangeEvent<V>, V> {
562
    V getValue();
563
    void setValue(V value);
564
    Registration addValueChangeListener(HasValue.ValueChangeListener<? super E> listener);
565
    void setReadOnly(boolean readOnly);
566
    boolean isReadOnly();
567
    void setRequiredIndicatorVisible(boolean requiredIndicatorVisible);
568
}
569

570
// Item label generation
571
public interface ItemLabelGenerator<T> {
572
    String apply(T item);
573
}
574

575
// File upload interfaces
576
public interface Receiver {
577
    OutputStream receiveUpload(String filename, String mimeType);
578
}
579

580
// Theme variants
581
public enum ButtonVariant implements ThemeVariant {
582
    LUMO_PRIMARY, LUMO_SUCCESS, LUMO_ERROR, LUMO_CONTRAST,
583
    LUMO_TERTIARY, LUMO_TERTIARY_INLINE, LUMO_ICON,
584
    LUMO_SMALL, LUMO_LARGE
585
}
586

587
public enum AvatarVariant implements ThemeVariant {
588
    LUMO_XSMALL, LUMO_SMALL, LUMO_LARGE, LUMO_XLARGE
589
}
590

591
// Vaadin Icons
592
public enum VaadinIcon {
593
    ABACUS, ABSOLUTE_POSITION, ACADEMY_CAP, ACCESSIBILITY,
594
    ACCORDION_MENU, ADD_DOCK, ADJUST, ADOBE_FLASH,
595
    AIRPLANE, ALARM, ALIGN_CENTER, ALIGN_JUSTIFY,
596
    // ... (300+ icons available)
597
}
598
```
599

600
Usage examples show how to create forms, handle events, and configure components for common web application scenarios.