0
# Form Controls
1
2
Comprehensive form inputs including text fields, selectors, buttons, checkboxes, sliders, and specialized inputs for building interactive forms and user interfaces.
3
4
## Capabilities
5
6
### Input Components
7
8
Text input fields with various specializations for different data types.
9
10
```python { .api }
11
def TextInput(
12
id=None,
13
value="", # Input value
14
placeholder="", # Placeholder text
15
label="", # Input label
16
description="", # Help text
17
error="", # Error message
18
required=False, # Required field
19
disabled=False, # Disabled state
20
size="sm", # Input size
21
radius="sm", # Border radius
22
**kwargs
23
):
24
"""
25
Single-line text input field.
26
27
Parameters:
28
- id: Component ID for callbacks
29
- value: Current input value
30
- placeholder: Placeholder text
31
- label: Field label
32
- description: Help text below input
33
- error: Error message (shows input as invalid)
34
- required: Show required indicator
35
- disabled: Disable input
36
- size: Input size
37
- radius: Border radius
38
"""
39
40
def Textarea(
41
id=None,
42
value="", # Textarea value
43
placeholder="", # Placeholder text
44
label="", # Textarea label
45
description="", # Help text
46
error="", # Error message
47
rows=4, # Number of rows
48
autosize=False, # Auto-resize
49
minRows=None, # Minimum rows when autosize
50
maxRows=None, # Maximum rows when autosize
51
resize="vertical", # Resize behavior
52
**kwargs
53
):
54
"""
55
Multi-line text input field.
56
57
Parameters:
58
- id: Component ID for callbacks
59
- value: Current textarea value
60
- rows: Initial number of rows
61
- autosize: Automatically adjust height
62
- minRows: Minimum rows for autosize
63
- maxRows: Maximum rows for autosize
64
- resize: CSS resize property
65
"""
66
67
def NumberInput(
68
id=None,
69
value=None, # Numeric value
70
min=None, # Minimum value
71
max=None, # Maximum value
72
step=1, # Step increment
73
precision=None, # Decimal precision
74
placeholder="", # Placeholder text
75
label="", # Input label
76
description="", # Help text
77
error="", # Error message
78
**kwargs
79
):
80
"""
81
Numeric input with controls.
82
83
Parameters:
84
- id: Component ID for callbacks
85
- value: Current numeric value
86
- min: Minimum allowed value
87
- max: Maximum allowed value
88
- step: Increment/decrement step
89
- precision: Decimal places
90
"""
91
92
def PasswordInput(
93
id=None,
94
value="", # Password value
95
placeholder="", # Placeholder text
96
label="", # Input label
97
description="", # Help text
98
error="", # Error message
99
visible=False, # Show password
100
**kwargs
101
):
102
"""
103
Password input with visibility toggle.
104
105
Parameters:
106
- id: Component ID for callbacks
107
- value: Current password value
108
- visible: Whether password is visible
109
"""
110
111
def JsonInput(
112
id=None,
113
value="", # JSON string value
114
placeholder="", # Placeholder text
115
label="", # Input label
116
description="", # Help text
117
error="", # Error message
118
validationError="Invalid JSON", # JSON validation error
119
formatOnBlur=True, # Format JSON on blur
120
**kwargs
121
):
122
"""
123
JSON input with syntax validation.
124
125
Parameters:
126
- id: Component ID for callbacks
127
- value: JSON string value
128
- validationError: Custom validation message
129
- formatOnBlur: Auto-format JSON
130
"""
131
132
def PinInput(
133
id=None,
134
value="", # PIN value
135
length=4, # Number of inputs
136
type="alphanumeric", # "number" | "alphanumeric"
137
mask=False, # Mask input like password
138
placeholder="", # Placeholder for each input
139
**kwargs
140
):
141
"""
142
PIN/code input with multiple fields.
143
144
Parameters:
145
- id: Component ID for callbacks
146
- value: Complete PIN value
147
- length: Number of input fields
148
- type: Allowed input type
149
- mask: Hide input characters
150
"""
151
```
152
153
### Selection Components
154
155
Dropdown and autocomplete components for selecting from options.
156
157
```python { .api }
158
def Select(
159
id=None,
160
value=None, # Selected value
161
data=[], # Options list
162
placeholder="", # Placeholder text
163
label="", # Select label
164
description="", # Help text
165
error="", # Error message
166
searchable=False, # Enable search
167
clearable=False, # Allow clearing
168
disabled=False, # Disabled state
169
**kwargs
170
):
171
"""
172
Single-selection dropdown.
173
174
Parameters:
175
- id: Component ID for callbacks
176
- value: Currently selected value
177
- data: List of options [{"value": "val", "label": "Label"}]
178
- searchable: Enable option filtering
179
- clearable: Show clear button
180
"""
181
182
def MultiSelect(
183
id=None,
184
value=[], # Selected values list
185
data=[], # Options list
186
placeholder="", # Placeholder text
187
label="", # Select label
188
description="", # Help text
189
error="", # Error message
190
searchable=True, # Enable search
191
clearable=True, # Allow clearing
192
**kwargs
193
):
194
"""
195
Multi-selection dropdown.
196
197
Parameters:
198
- id: Component ID for callbacks
199
- value: List of selected values
200
- data: List of options
201
"""
202
203
def Autocomplete(
204
id=None,
205
value="", # Input value
206
data=[], # Suggestions list
207
placeholder="", # Placeholder text
208
label="", # Input label
209
description="", # Help text
210
error="", # Error message
211
limit=5, # Max suggestions shown
212
**kwargs
213
):
214
"""
215
Autocomplete input with suggestions.
216
217
Parameters:
218
- id: Component ID for callbacks
219
- value: Current input value
220
- data: List of suggestion strings or objects
221
- limit: Maximum suggestions to display
222
"""
223
224
def TagsInput(
225
id=None,
226
value=[], # Tags list
227
data=[], # Suggestions list
228
placeholder="", # Placeholder text
229
label="", # Input label
230
description="", # Help text
231
error="", # Error message
232
**kwargs
233
):
234
"""
235
Tags input with autocomplete.
236
237
Parameters:
238
- id: Component ID for callbacks
239
- value: List of current tags
240
- data: List of tag suggestions
241
"""
242
```
243
244
### Button Components
245
246
Various button styles and configurations for user interactions.
247
248
```python { .api }
249
def Button(
250
children=None, # Button content
251
id=None,
252
variant="filled", # "filled" | "outline" | "light" | "subtle" | "transparent"
253
color="blue", # Button color
254
size="sm", # Button size
255
radius="sm", # Border radius
256
disabled=False, # Disabled state
257
loading=False, # Loading state
258
leftIcon=None, # Left icon
259
rightIcon=None, # Right icon
260
fullWidth=False, # Full width
261
compact=False, # Compact size
262
n_clicks=0, # Click counter
263
**kwargs
264
):
265
"""
266
Primary button component.
267
268
Parameters:
269
- children: Button text/content
270
- id: Component ID for callbacks
271
- variant: Button style variant
272
- color: Button color theme
273
- size: Button size
274
- disabled: Disable button
275
- loading: Show loading spinner
276
- leftIcon: Icon on left side
277
- rightIcon: Icon on right side
278
- fullWidth: Expand to full width
279
- n_clicks: Click counter for callbacks
280
"""
281
282
def ActionIcon(
283
children=None, # Icon content
284
id=None,
285
variant="subtle", # Button variant
286
color="gray", # Icon color
287
size="md", # Icon size
288
radius="sm", # Border radius
289
disabled=False, # Disabled state
290
loading=False, # Loading state
291
n_clicks=0, # Click counter
292
**kwargs
293
):
294
"""
295
Icon-only button component.
296
297
Parameters:
298
- children: Icon element
299
- id: Component ID for callbacks
300
- variant: Button style
301
- color: Icon color
302
- size: Icon size
303
- n_clicks: Click counter for callbacks
304
"""
305
306
def ButtonGroup(
307
children=None, # Button components
308
orientation="horizontal", # "horizontal" | "vertical"
309
**kwargs
310
):
311
"""
312
Group of connected buttons.
313
314
Parameters:
315
- children: List of Button components
316
- orientation: Group layout direction
317
"""
318
319
def UnstyledButton(
320
children=None, # Button content
321
id=None,
322
n_clicks=0, # Click counter
323
**kwargs
324
):
325
"""
326
Unstyled button base component.
327
328
Parameters:
329
- children: Button content
330
- id: Component ID for callbacks
331
- n_clicks: Click counter for callbacks
332
"""
333
```
334
335
### Choice Components
336
337
Checkboxes, radio buttons, and switches for boolean and choice selections.
338
339
```python { .api }
340
def Checkbox(
341
id=None,
342
checked=False, # Checked state
343
label="", # Checkbox label
344
description="", # Help text
345
error="", # Error message
346
disabled=False, # Disabled state
347
indeterminate=False, # Indeterminate state
348
size="sm", # Checkbox size
349
color="blue", # Check color
350
**kwargs
351
):
352
"""
353
Checkbox input component.
354
355
Parameters:
356
- id: Component ID for callbacks
357
- checked: Current checked state
358
- label: Checkbox label text
359
- indeterminate: Show indeterminate state
360
- size: Checkbox size
361
- color: Check mark color
362
"""
363
364
def CheckboxGroup(
365
id=None,
366
value=[], # Selected values
367
data=[], # Checkbox options
368
label="", # Group label
369
description="", # Help text
370
error="", # Error message
371
orientation="vertical", # "vertical" | "horizontal"
372
**kwargs
373
):
374
"""
375
Group of checkboxes.
376
377
Parameters:
378
- id: Component ID for callbacks
379
- value: List of selected values
380
- data: List of checkbox options
381
- orientation: Layout direction
382
"""
383
384
def Radio(
385
id=None,
386
checked=False, # Checked state
387
value="", # Radio value
388
label="", # Radio label
389
description="", # Help text
390
disabled=False, # Disabled state
391
size="sm", # Radio size
392
color="blue", # Radio color
393
**kwargs
394
):
395
"""
396
Single radio button.
397
398
Parameters:
399
- id: Component ID for callbacks
400
- checked: Current checked state
401
- value: Radio button value
402
- label: Radio label text
403
"""
404
405
def RadioGroup(
406
id=None,
407
value=None, # Selected value
408
data=[], # Radio options
409
label="", # Group label
410
description="", # Help text
411
error="", # Error message
412
orientation="vertical", # "vertical" | "horizontal"
413
**kwargs
414
):
415
"""
416
Group of radio buttons.
417
418
Parameters:
419
- id: Component ID for callbacks
420
- value: Currently selected value
421
- data: List of radio options
422
- orientation: Layout direction
423
"""
424
425
def Switch(
426
id=None,
427
checked=False, # Switch state
428
label="", # Switch label
429
description="", # Help text
430
error="", # Error message
431
disabled=False, # Disabled state
432
size="sm", # Switch size
433
color="blue", # Switch color
434
**kwargs
435
):
436
"""
437
Toggle switch component.
438
439
Parameters:
440
- id: Component ID for callbacks
441
- checked: Current switch state
442
- label: Switch label text
443
- size: Switch size
444
- color: Switch color when on
445
"""
446
```
447
448
### Specialized Input Components
449
450
Advanced input components for specific use cases.
451
452
```python { .api }
453
def Slider(
454
id=None,
455
value=50, # Slider value
456
min=0, # Minimum value
457
max=100, # Maximum value
458
step=1, # Step increment
459
marks=[], # Slider marks
460
label="", # Slider label
461
disabled=False, # Disabled state
462
**kwargs
463
):
464
"""
465
Single-value slider component.
466
467
Parameters:
468
- id: Component ID for callbacks
469
- value: Current slider value
470
- min: Minimum value
471
- max: Maximum value
472
- step: Value increment
473
- marks: List of mark objects
474
"""
475
476
def RangeSlider(
477
id=None,
478
value=[20, 80], # Range values [min, max]
479
min=0, # Minimum bound
480
max=100, # Maximum bound
481
step=1, # Step increment
482
marks=[], # Slider marks
483
label="", # Slider label
484
disabled=False, # Disabled state
485
**kwargs
486
):
487
"""
488
Range slider with two handles.
489
490
Parameters:
491
- id: Component ID for callbacks
492
- value: Current range [start, end]
493
- min: Minimum bound
494
- max: Maximum bound
495
- step: Value increment
496
"""
497
498
def Rating(
499
id=None,
500
value=0, # Rating value
501
count=5, # Number of items
502
fractions=1, # Fractional precision
503
color="yellow", # Rating color
504
size="sm", # Rating size
505
readOnly=False, # Read-only mode
506
**kwargs
507
):
508
"""
509
Star rating component.
510
511
Parameters:
512
- id: Component ID for callbacks
513
- value: Current rating value
514
- count: Total number of stars
515
- fractions: Fractional increments (1, 2, 3, or 4)
516
- readOnly: Disable interaction
517
"""
518
519
def SegmentedControl(
520
id=None,
521
value=None, # Selected value
522
data=[], # Segment options
523
orientation="horizontal", # "horizontal" | "vertical"
524
size="sm", # Control size
525
radius="sm", # Border radius
526
color="blue", # Selection color
527
disabled=False, # Disabled state
528
**kwargs
529
):
530
"""
531
Segmented control for exclusive selection.
532
533
Parameters:
534
- id: Component ID for callbacks
535
- value: Currently selected value
536
- data: List of segment options
537
- orientation: Layout direction
538
"""
539
540
def Chip(
541
children=None, # Chip content
542
id=None,
543
checked=False, # Selected state
544
variant="outline", # "outline" | "filled" | "light"
545
color="blue", # Chip color
546
size="sm", # Chip size
547
radius="xl", # Border radius
548
disabled=False, # Disabled state
549
**kwargs
550
):
551
"""
552
Selectable chip component.
553
554
Parameters:
555
- children: Chip text/content
556
- id: Component ID for callbacks
557
- checked: Current selection state
558
- variant: Chip style
559
- color: Chip color theme
560
"""
561
```
562
563
## Usage Examples
564
565
### Basic Form
566
567
```python
568
import dash_mantine_components as dmc
569
570
form = dmc.Stack([
571
dmc.TextInput(
572
id="name-input",
573
label="Full Name",
574
placeholder="Enter your name",
575
required=True
576
),
577
578
dmc.Select(
579
id="country-select",
580
label="Country",
581
placeholder="Select country",
582
data=[
583
{"value": "us", "label": "United States"},
584
{"value": "ca", "label": "Canada"},
585
{"value": "uk", "label": "United Kingdom"}
586
]
587
),
588
589
dmc.Checkbox(
590
id="newsletter-checkbox",
591
label="Subscribe to newsletter",
592
checked=False
593
),
594
595
dmc.Button("Submit", id="submit-button", type="submit")
596
], spacing="md")
597
```
598
599
### Advanced Input Controls
600
601
```python
602
controls = dmc.Stack([
603
dmc.NumberInput(
604
id="age-input",
605
label="Age",
606
min=0,
607
max=120,
608
step=1,
609
value=25
610
),
611
612
dmc.RangeSlider(
613
id="price-range",
614
label="Price Range",
615
min=0,
616
max=1000,
617
step=10,
618
value=[100, 500],
619
marks=[
620
{"value": 0, "label": "$0"},
621
{"value": 500, "label": "$500"},
622
{"value": 1000, "label": "$1000"}
623
]
624
),
625
626
dmc.Rating(
627
id="rating",
628
label="Rate this product",
629
value=3,
630
count=5
631
)
632
])
633
```