0
# Widget System
1

2
Comprehensive collection of interactive input components for building user interfaces. Panel's widget system includes text inputs, selections, sliders, buttons, tables, and specialized widgets for various data types and interactions.
3

4
## Capabilities
5

6
### Text Input Widgets
7

8
Components for text-based user input with various formats and validation options.
9

10
```python { .api }
11
class TextInput:
12
    """
13
    Single-line text input widget.
14
    
15
    Parameters:
16
    - value: Current text value
17
    - placeholder: Placeholder text
18
    - width: Width of input
19
    - height: Height of input
20
    - **params: Additional parameters
21
    """
22

23
class TextAreaInput:
24
    """
25
    Multi-line text input widget.
26
    
27
    Parameters:
28
    - value: Current text value
29
    - placeholder: Placeholder text
30
    - rows: Number of visible rows
31
    - max_length: Maximum text length
32
    - **params: Additional parameters
33
    """
34

35
class PasswordInput:
36
    """
37
    Password input field with hidden text display.
38
    
39
    Parameters:
40
    - value: Current password value
41
    - placeholder: Placeholder text
42
    - **params: Additional parameters
43
    """
44

45
class StaticText:
46
    """
47
    Read-only text display widget.
48
    
49
    Parameters:
50
    - value: Text to display
51
    - **params: Additional parameters
52
    """
53
```
54

55
### Numeric Input Widgets
56

57
Specialized inputs for numeric values with validation and formatting.
58

59
```python { .api }
60
class IntInput:
61
    """
62
    Integer input widget with validation.
63
    
64
    Parameters:
65
    - value: Current integer value
66
    - start: Minimum allowed value
67
    - end: Maximum allowed value
68
    - step: Step size for increment/decrement
69
    - **params: Additional parameters
70
    """
71

72
class FloatInput:
73
    """
74
    Float number input widget with validation.
75
    
76
    Parameters:
77
    - value: Current float value
78
    - start: Minimum allowed value
79
    - end: Maximum allowed value
80
    - step: Step size for increment/decrement
81
    - **params: Additional parameters
82
    """
83

84
class NumberInput:
85
    """
86
    Generic number input widget.
87
    
88
    Parameters:
89
    - value: Current numeric value
90
    - format: Number format string
91
    - **params: Additional parameters
92
    """
93

94
class Spinner:
95
    """
96
    Numeric spinner input with increment/decrement buttons.
97
    
98
    Parameters:
99
    - value: Current numeric value
100
    - start: Minimum value
101
    - end: Maximum value  
102
    - step: Step size
103
    - **params: Additional parameters
104
    """
105

106
class LiteralInput:
107
    """
108
    Python literal input widget that evaluates expressions.
109
    
110
    Parameters:
111
    - value: Current Python literal value
112
    - type: Expected Python type
113
    - **params: Additional parameters
114
    """
115

116
class ArrayInput:
117
    """
118
    NumPy array input widget.
119
    
120
    Parameters:
121
    - value: Current array value
122
    - **params: Additional parameters
123
    """
124
```
125

126
### Selection Widgets
127

128
Widgets for selecting from predefined options with single or multiple selection modes.
129

130
```python { .api }
131
class Select:
132
    """
133
    Dropdown selection widget for single selection.
134
    
135
    Parameters:
136
    - value: Currently selected value
137
    - options: List or dict of available options
138
    - **params: Additional parameters
139
    """
140

141
class MultiSelect:
142
    """
143
    Multiple selection dropdown widget.
144
    
145
    Parameters:
146
    - value: List of currently selected values
147
    - options: List or dict of available options
148
    - **params: Additional parameters
149
    """
150

151
class AutocompleteInput:
152
    """
153
    Autocomplete text input with suggestion dropdown.
154
    
155
    Parameters:
156
    - value: Current text value
157
    - options: List of autocomplete options
158
    - case_sensitive: Whether matching is case sensitive
159
    - **params: Additional parameters
160
    """
161

162
class RadioBoxGroup:
163
    """
164
    Radio button group for single selection.
165
    
166
    Parameters:
167
    - value: Currently selected value
168
    - options: List or dict of available options
169
    - inline: Whether to display options inline
170
    - **params: Additional parameters
171
    """
172

173
class CheckBoxGroup:
174
    """
175
    Checkbox group for multiple selection.
176
    
177
    Parameters:
178
    - value: List of currently selected values
179
    - options: List or dict of available options
180
    - inline: Whether to display options inline
181
    - **params: Additional parameters
182
    """
183
```
184

185
### Slider Widgets
186

187
Range input widgets with draggable handles for numeric and date values.
188

189
```python { .api }
190
class IntSlider:
191
    """
192
    Integer slider widget.
193
    
194
    Parameters:
195
    - value: Current integer value
196
    - start: Minimum value
197
    - end: Maximum value
198
    - step: Step size
199
    - **params: Additional parameters
200
    """
201

202
class FloatSlider:
203
    """
204
    Float slider widget.
205
    
206
    Parameters:
207
    - value: Current float value
208
    - start: Minimum value
209
    - end: Maximum value
210
    - step: Step size
211
    - **params: Additional parameters
212
    """
213

214
class RangeSlider:
215
    """
216
    Range slider widget for selecting a range of values.
217
    
218
    Parameters:
219
    - value: Tuple of (start, end) values
220
    - start: Minimum allowed value
221
    - end: Maximum allowed value
222
    - step: Step size
223
    - **params: Additional parameters
224
    """
225

226
class DateSlider:
227
    """
228
    Date slider widget for selecting dates.
229
    
230
    Parameters:
231
    - value: Current date value
232
    - start: Minimum date
233
    - end: Maximum date
234
    - step: Step size in days
235
    - **params: Additional parameters
236
    """
237

238
class DatetimeSlider:
239
    """
240
    Datetime slider widget for selecting datetime values.
241
    
242
    Parameters:
243
    - value: Current datetime value
244
    - start: Minimum datetime
245
    - end: Maximum datetime
246
    - step: Step size
247
    - **params: Additional parameters
248
    """
249
```
250

251
### Date and Time Widgets
252

253
Specialized widgets for date and time input with calendar pickers.
254

255
```python { .api }
256
class DatePicker:
257
    """
258
    Date picker widget with calendar interface.
259
    
260
    Parameters:
261
    - value: Current date value
262
    - start: Minimum selectable date
263
    - end: Maximum selectable date
264
    - **params: Additional parameters
265
    """
266

267
class DatetimePicker:
268
    """
269
    Datetime picker widget with calendar and time selection.
270
    
271
    Parameters:
272
    - value: Current datetime value
273
    - start: Minimum selectable datetime
274
    - end: Maximum selectable datetime
275
    - **params: Additional parameters
276
    """
277

278
class TimePicker:
279
    """
280
    Time picker widget for selecting time values.
281
    
282
    Parameters:
283
    - value: Current time value
284
    - start: Minimum selectable time
285
    - end: Maximum selectable time
286
    - **params: Additional parameters
287
    """
288

289
class DateRangePicker:
290
    """
291
    Date range picker for selecting date ranges.
292
    
293
    Parameters:
294
    - value: Tuple of (start_date, end_date)
295
    - start: Minimum selectable date
296
    - end: Maximum selectable date
297
    - **params: Additional parameters
298
    """
299
```
300

301
### Button Widgets
302

303
Interactive button components for triggering actions and state changes.
304

305
```python { .api }
306
class Button:
307
    """
308
    Click button widget for triggering actions.
309
    
310
    Parameters:
311
    - name: Button label text
312
    - button_type: Button style ('default', 'primary', 'success', 'warning', 'danger')
313
    - **params: Additional parameters
314
    """
315

316
class Toggle:
317
    """
318
    Toggle button widget for boolean state.
319
    
320
    Parameters:
321
    - name: Button label text
322
    - value: Current toggle state (True/False)
323
    - button_type: Button style
324
    - **params: Additional parameters
325
    """
326

327
class MenuButton:
328
    """
329
    Dropdown menu button widget.
330
    
331
    Parameters:
332
    - name: Button label text
333
    - items: List of menu items
334
    - **params: Additional parameters
335
    """
336
```
337

338
### File Input Widgets
339

340
Widgets for file upload and selection from the file system.
341

342
```python { .api }
343
class FileInput:
344
    """
345
    File upload widget for selecting and uploading files.
346
    
347
    Parameters:
348
    - value: Uploaded file data
349
    - filename: Name of uploaded file
350
    - accept: Accepted file types
351
    - multiple: Whether multiple files can be selected
352
    - **params: Additional parameters
353
    """
354

355
class FileDropper:
356
    """
357
    Drag-and-drop file input widget.
358
    
359
    Parameters:
360
    - value: Dropped file data
361
    - filename: Name of dropped file
362
    - accept: Accepted file types
363
    - multiple: Whether multiple files can be accepted
364
    - **params: Additional parameters
365
    """
366

367
class FileSelector:
368
    """
369
    File system browser widget for selecting files.
370
    
371
    Parameters:
372
    - value: Selected file path
373
    - directory: Root directory to browse
374
    - **params: Additional parameters
375
    """
376

377
class FileDownload:
378
    """
379
    File download widget for providing downloadable files.
380
    
381
    Parameters:
382
    - file: File path or file-like object
383
    - filename: Download filename
384
    - **params: Additional parameters
385
    """
386
```
387

388
### Table Widgets
389

390
Widgets for displaying and editing tabular data with various features.
391

392
```python { .api }
393
class DataFrame:
394
    """
395
    Pandas DataFrame display widget.
396
    
397
    Parameters:
398
    - value: DataFrame to display
399
    - pagination: Pagination mode ('remote', 'local', None)
400
    - page_size: Number of rows per page
401
    - **params: Additional parameters
402
    """
403

404
class Tabulator:
405
    """
406
    Interactive data table widget with editing capabilities.
407
    
408
    Parameters:
409
    - value: DataFrame to display
410
    - pagination: Pagination mode
411
    - selectable: Row selection mode
412
    - sortable: Whether columns are sortable
413
    - **params: Additional parameters
414
    """
415
```
416

417
### Editor Widgets
418

419
Advanced text editing widgets with syntax highlighting and rich formatting.
420

421
```python { .api }
422
class CodeEditor:
423
    """
424
    Code editor widget with syntax highlighting.
425
    
426
    Parameters:
427
    - value: Code content
428
    - language: Programming language for syntax highlighting
429
    - theme: Editor theme
430
    - **params: Additional parameters
431
    """
432

433
class TextEditor:
434
    """
435
    Rich text editor widget with formatting options.
436
    
437
    Parameters:
438
    - value: HTML content
439
    - toolbar: Toolbar configuration
440
    - **params: Additional parameters
441
    """
442

443
class JSONEditor:
444
    """
445
    JSON editor widget with validation and formatting.
446
    
447
    Parameters:
448
    - value: JSON object or string
449
    - **params: Additional parameters
450
    """
451
```
452

453
### Indicator Widgets
454

455
Visual indicators for displaying status, progress, and numeric values.
456

457
```python { .api }
458
class Progress:
459
    """
460
    Progress bar widget for showing completion status.
461
    
462
    Parameters:
463
    - value: Current progress value (0-100)
464
    - max: Maximum progress value
465
    - **params: Additional parameters
466
    """
467

468
class LoadingSpinner:
469
    """
470
    Loading animation widget for indicating processing.
471
    
472
    Parameters:
473
    - value: Whether spinner is active
474
    - **params: Additional parameters
475
    """
476

477
class Number:
478
    """
479
    Numeric value display widget with formatting.
480
    
481
    Parameters:
482
    - value: Numeric value to display
483
    - format: Number format string
484
    - **params: Additional parameters
485
    """
486

487
class Gauge:
488
    """
489
    Semi-circular gauge widget for displaying values.
490
    
491
    Parameters:
492
    - value: Current gauge value
493
    - bounds: Tuple of (min, max) values
494
    - **params: Additional parameters
495
    """
496

497
class Tqdm:
498
    """
499
    Progress bar widget compatible with tqdm library for iterative processes.
500
    
501
    Parameters:
502
    - value: Current progress value
503
    - max: Maximum progress value
504
    - description: Progress description text
505
    - **params: Additional parameters
506
    """
507
```
508

509
### Specialized Widgets
510

511
Advanced widgets for specific use cases and integrations.
512

513
```python { .api }
514
class Terminal:
515
    """
516
    Terminal emulator widget for command-line interfaces.
517
    
518
    Parameters:
519
    - **params: Additional parameters
520
    """
521

522
class VideoStream:
523
    """
524
    Video streaming widget for real-time video display.
525
    
526
    Parameters:
527
    - **params: Additional parameters
528
    """
529

530
class ColorPicker:
531
    """
532
    Color selection widget with color palette.
533
    
534
    Parameters:
535
    - value: Current color value
536
    - **params: Additional parameters
537
    """
538

539
class Player:
540
    """
541
    Media player widget for controlling playback.
542
    
543
    Parameters:
544
    - **params: Additional parameters
545
    """
546
```
547

548
### Speech Widgets
549

550
Widgets for speech recognition and text-to-speech functionality.
551

552
```python { .api }
553
class SpeechToText:
554
    """
555
    Speech recognition widget for converting speech to text.
556
    
557
    Parameters:
558
    - value: Recognized text output
559
    - continuous: Whether to continuously listen
560
    - **params: Additional parameters
561
    """
562

563
class TextToSpeech:
564
    """
565
    Text-to-speech widget for converting text to speech.
566
    
567
    Parameters:
568
    - value: Text to synthesize
569
    - voice: Voice settings for synthesis
570
    - **params: Additional parameters
571
    """
572

573
class Grammar:
574
    """
575
    Speech grammar definition for recognition constraints.
576
    
577
    Parameters:
578
    - value: Grammar specification
579
    - **params: Additional parameters
580
    """
581

582
class GrammarList:
583
    """
584
    List of speech grammars for recognition.
585
    
586
    Parameters:
587
    - value: List of grammar objects
588
    - **params: Additional parameters
589
    """
590

591
class Utterance:
592
    """
593
    Speech utterance configuration for text-to-speech.
594
    
595
    Parameters:
596
    - text: Text to speak
597
    - voice: Voice to use for speaking
598
    - **params: Additional parameters
599
    """
600

601
class Voice:
602
    """
603
    Voice configuration for speech synthesis.
604
    
605
    Parameters:
606
    - name: Voice name
607
    - lang: Language code
608
    - **params: Additional parameters
609
    """
610
```
611

612
### Enhanced Slider Widgets
613

614
Advanced slider widgets with inline editing capabilities.
615

616
```python { .api }
617
class EditableFloatSlider:
618
    """
619
    Editable float slider with text input for precise values.
620
    
621
    Parameters:
622
    - value: Current float value
623
    - start: Minimum value
624
    - end: Maximum value
625
    - step: Step size
626
    - **params: Additional parameters
627
    """
628

629
class EditableIntSlider:
630
    """
631
    Editable integer slider with text input for precise values.
632
    
633
    Parameters:
634
    - value: Current integer value
635
    - start: Minimum value
636
    - end: Maximum value
637
    - step: Step size
638
    - **params: Additional parameters
639
    """
640

641
class EditableRangeSlider:
642
    """
643
    Editable range slider with text inputs for precise range values.
644
    
645
    Parameters:
646
    - value: Tuple of (start, end) values
647
    - start: Minimum allowed value
648
    - end: Maximum allowed value
649
    - step: Step size
650
    - **params: Additional parameters
651
    """
652
```
653

654
## Usage Examples
655

656
### Basic Widget Example
657

658
```python
659
import panel as pn
660

661
# Create input widgets
662
name_input = pn.widgets.TextInput(placeholder="Enter your name")
663
age_slider = pn.widgets.IntSlider(start=0, end=100, value=25)
664
submit_button = pn.widgets.Button(name="Submit", button_type="primary")
665

666
# Arrange in layout
667
form = pn.Column(
668
    "## User Information",
669
    name_input,
670
    age_slider,
671
    submit_button
672
)
673
```
674

675
### Interactive Dashboard Example
676

677
```python
678
# Create selection widgets
679
category_select = pn.widgets.Select(
680
    options=['Sales', 'Marketing', 'Engineering'],
681
    value='Sales'
682
)
683

684
date_range = pn.widgets.DateRangePicker(
685
    start=datetime(2023, 1, 1),
686
    end=datetime(2023, 12, 31)
687
)
688

689
# Create data table
690
data_table = pn.widgets.Tabulator(
691
    value=df,
692
    pagination='remote',
693
    page_size=20,
694
    selectable='multiple'
695
)
696
```