0
# Form Components
1
2
Comprehensive form controls including inputs, selections, validation feedback, and form organization components built with Bootstrap styling and Dash integration.
3
4
## Capabilities
5
6
### Form
7
8
Container component for organizing form elements with consistent styling and behavior.
9
10
```python { .api }
11
class Form:
12
"""
13
Form container component for grouping form controls.
14
15
Args:
16
children: Form control components
17
id (str): Component identifier for callbacks
18
style (dict): Inline CSS styles
19
class_name (str): Additional CSS classes
20
inline (bool): Display form controls inline
21
"""
22
def __init__(self, children=None, id=None, style=None, class_name=None, inline=False, **kwargs): ...
23
```
24
25
### Input
26
27
Enhanced text input component with Bootstrap styling, validation states, and various input types.
28
29
```python { .api }
30
class Input:
31
"""
32
Enhanced HTML input with Bootstrap styling and Dash integration.
33
34
Args:
35
id (str): Component identifier for callbacks
36
value (str|number): Input value
37
type (str): Input type - "text", "number", "password", "email", "range", "search", "tel", "url", "hidden", "time"
38
placeholder (str|number): Placeholder text
39
valid (bool): Apply valid styling for feedback purposes
40
invalid (bool): Apply invalid styling for feedback purposes
41
plaintext (bool): Style as plain text with form field styling removed
42
size (str): Input size - "sm", "lg"
43
disabled (bool): Disable the input
44
readonly (bool): Make input read-only
45
n_submit (int): Number of times Enter key was pressed (for callbacks)
46
n_blur (int): Number of times input lost focus (for callbacks)
47
debounce (bool|int): Debounce input changes - True for default, number for milliseconds
48
style (dict): Inline CSS styles
49
class_name (str): Additional CSS classes
50
step (str|number): Step size for number inputs (default "any")
51
html_size (str): HTML size attribute (number of characters for text inputs)
52
autocomplete (str): HTML autocomplete attribute for browser assistance
53
autofocus (bool|str): Auto-focus on page load (accepts bool or "autoFocus")
54
inputmode (str): Input mode hint - "verbatim", "latin", "latin-name", "latin-prose",
55
"full-width-latin", "kana", "katakana", "numeric", "tel", "email", "url"
56
list (str): ID of datalist element for input suggestions
57
max (str|number): Maximum value for numeric/date inputs
58
min (str|number): Minimum value for numeric/date inputs
59
maxlength (str|number): Maximum number of characters for text inputs
60
minlength (str|number): Minimum number of characters for text inputs
61
pattern (str): Regular expression pattern for input validation
62
required (bool): Whether input is required for form submission
63
tabindex (str|number): Tab order index for keyboard navigation
64
title (str): Tooltip text for the input
65
name (str): HTML name attribute for form submission
66
form (str): ID of form element this input belongs to
67
key (str): React performance optimization key
68
"""
69
def __init__(self, id=None, value=None, type="text", placeholder=None,
70
valid=None, invalid=None, plaintext=False, size=None, disabled=False,
71
readonly=False, n_submit=0, n_blur=0, debounce=False, style=None,
72
class_name=None, step="any", html_size=None, autocomplete=None,
73
autofocus=False, inputmode=None, list=None, max=None, min=None,
74
maxlength=None, minlength=None, pattern=None, required=False,
75
tabindex=None, title=None, name=None, form=None, key=None, **kwargs): ...
76
```
77
78
### Select
79
80
Dropdown selection component with single and multiple selection support.
81
82
```python { .api }
83
class Select:
84
"""
85
Select dropdown component with Bootstrap styling.
86
87
Args:
88
id (str): Component identifier for callbacks
89
options (list): List of option dictionaries with "label" and "value" keys
90
value (str|list): Selected value(s)
91
placeholder (str): Placeholder text when no selection
92
size (str): Size - "sm", "lg"
93
disabled (bool): Disable select
94
multiple (bool): Allow multiple selections
95
html_size (int): Number of visible options (for multiple select)
96
"""
97
def __init__(self, id=None, options=None, value=None, placeholder=None,
98
size=None, disabled=False, multiple=False, html_size=None,
99
style=None, class_name=None, **kwargs): ...
100
```
101
102
### Textarea
103
104
Multiline text input component with resizing and validation support.
105
106
```python { .api }
107
class Textarea:
108
"""
109
Multiline text input component.
110
111
Args:
112
id (str): Component identifier for callbacks
113
value (str): Text content
114
placeholder (str): Placeholder text
115
rows (int): Number of visible text rows
116
cols (int): Text input width in characters
117
disabled (bool): Disable textarea
118
readonly (bool): Make read-only
119
valid (bool): Apply valid styling
120
invalid (bool): Apply invalid styling
121
size (str): Size - "sm", "lg"
122
maxLength (int): Maximum character length
123
minLength (int): Minimum character length
124
wrap (str): Text wrapping - "hard", "soft", "off"
125
"""
126
def __init__(self, id=None, value=None, placeholder=None, rows=None, cols=None,
127
disabled=False, readonly=False, valid=None, invalid=None, size=None,
128
maxLength=None, minLength=None, wrap=None, style=None, class_name=None, **kwargs): ...
129
```
130
131
### Checkbox
132
133
Individual checkbox input with label and styling options.
134
135
```python { .api }
136
class Checkbox:
137
"""
138
Checkbox input component with label support.
139
140
Args:
141
id (str): Component identifier for callbacks
142
checked (bool): Checked state
143
disabled (bool): Disable checkbox
144
label (str): Label text
145
label_id (str): ID for the label element
146
label_style (dict): Styles for label
147
label_class_name (str): CSS classes for label
148
switch (bool): Render as toggle switch style
149
inline (bool): Display inline with other checkboxes
150
"""
151
def __init__(self, id=None, checked=False, disabled=False, label=None,
152
label_id=None, label_style=None, label_class_name=None,
153
switch=False, inline=False, style=None, class_name=None, **kwargs): ...
154
```
155
156
### Switch
157
158
Toggle switch component styled as a modern on/off switch.
159
160
```python { .api }
161
class Switch:
162
"""
163
Toggle switch component for boolean values.
164
165
Args:
166
id (str): Component identifier for callbacks
167
value (bool): Switch state (on/off)
168
disabled (bool): Disable switch
169
label (str): Label text
170
label_id (str): ID for the label element
171
label_style (dict): Styles for label
172
label_class_name (str): CSS classes for label
173
"""
174
def __init__(self, id=None, value=False, disabled=False, label=None,
175
label_id=None, label_style=None, label_class_name=None,
176
style=None, class_name=None, **kwargs): ...
177
```
178
179
### RadioItems
180
181
Group of radio buttons for single selection from multiple options.
182
183
```python { .api }
184
class RadioItems:
185
"""
186
Radio button group for single selection.
187
188
Args:
189
id (str): Component identifier for callbacks
190
options (list): List of option dictionaries with "label" and "value" keys
191
value (str): Selected value
192
inline (bool): Display options inline horizontally
193
switch (bool): Render as toggle switches
194
disabled (bool): Disable all options
195
input_style (dict): Styles for radio inputs
196
input_class_name (str): CSS classes for radio inputs
197
label_style (dict): Styles for labels
198
label_class_name (str): CSS classes for labels
199
"""
200
def __init__(self, id=None, options=None, value=None, inline=False, switch=False,
201
disabled=False, input_style=None, input_class_name=None,
202
label_style=None, label_class_name=None, style=None, class_name=None, **kwargs): ...
203
```
204
205
### Checklist
206
207
Group of checkboxes for multiple selection from options.
208
209
```python { .api }
210
class Checklist:
211
"""
212
Checkbox group for multiple selections.
213
214
Args:
215
id (str): Component identifier for callbacks
216
options (list): List of option dictionaries with "label" and "value" keys
217
value (list): List of selected values
218
inline (bool): Display options inline horizontally
219
switch (bool): Render as toggle switches
220
disabled (bool): Disable all options
221
input_style (dict): Styles for checkbox inputs
222
input_class_name (str): CSS classes for checkbox inputs
223
label_style (dict): Styles for labels
224
label_class_name (str): CSS classes for labels
225
"""
226
def __init__(self, id=None, options=None, value=None, inline=False, switch=False,
227
disabled=False, input_style=None, input_class_name=None,
228
label_style=None, label_class_name=None, style=None, class_name=None, **kwargs): ...
229
```
230
231
### Label
232
233
Form label component with enhanced accessibility and styling.
234
235
```python { .api }
236
class Label:
237
"""
238
Form label component for accessibility and styling.
239
240
Args:
241
children: Label content (text or components)
242
id (str): Component identifier
243
html_for (str): ID of associated form control
244
style (dict): Inline CSS styles
245
class_name (str): Additional CSS classes
246
size (str): Size - "sm", "lg" (matches associated control)
247
width (int|str): Column width when used in horizontal forms
248
check (bool): Style for checkbox/radio labels
249
"""
250
def __init__(self, children=None, id=None, html_for=None, style=None, class_name=None,
251
size=None, width=None, check=False, **kwargs): ...
252
```
253
254
### InputGroup
255
256
Component for grouping inputs with addons, buttons, or other elements.
257
258
```python { .api }
259
class InputGroup:
260
"""
261
Group inputs with addons, buttons, or other elements.
262
263
Args:
264
children: Input and addon components
265
id (str): Component identifier
266
style (dict): Inline CSS styles
267
class_name (str): Additional CSS classes
268
size (str): Size - "sm", "lg"
269
"""
270
def __init__(self, children=None, id=None, style=None, class_name=None,
271
size=None, **kwargs): ...
272
```
273
274
### InputGroupText
275
276
Text addon component for use within InputGroup.
277
278
```python { .api }
279
class InputGroupText:
280
"""
281
Text addon for InputGroup components.
282
283
Args:
284
children: Text content or components
285
id (str): Component identifier
286
style (dict): Inline CSS styles
287
class_name (str): Additional CSS classes
288
"""
289
def __init__(self, children=None, id=None, style=None, class_name=None, **kwargs): ...
290
```
291
292
### FormText
293
294
Help text component for providing additional information about form controls.
295
296
```python { .api }
297
class FormText:
298
"""
299
Help text for form controls.
300
301
Args:
302
children: Help text content
303
id (str): Component identifier
304
style (dict): Inline CSS styles
305
class_name (str): Additional CSS classes
306
color (str): Text color - "muted" (default), "primary", "secondary", etc.
307
"""
308
def __init__(self, children=None, id=None, style=None, class_name=None,
309
color="muted", **kwargs): ...
310
```
311
312
### FormFeedback
313
314
Validation feedback component for displaying success or error messages.
315
316
```python { .api }
317
class FormFeedback:
318
"""
319
Validation feedback for form controls.
320
321
Args:
322
children: Feedback message content
323
id (str): Component identifier
324
style (dict): Inline CSS styles
325
class_name (str): Additional CSS classes
326
type (str): Feedback type - "valid" or "invalid"
327
tooltip (bool): Display as tooltip style
328
"""
329
def __init__(self, children=None, id=None, style=None, class_name=None,
330
type="invalid", tooltip=False, **kwargs): ...
331
```
332
333
### FormFloating
334
335
Container for floating label inputs with modern styling.
336
337
```python { .api }
338
class FormFloating:
339
"""
340
Container for floating label form controls.
341
342
Args:
343
children: Input and label components
344
id (str): Component identifier
345
style (dict): Inline CSS styles
346
class_name (str): Additional CSS classes
347
"""
348
def __init__(self, children=None, id=None, style=None, class_name=None, **kwargs): ...
349
```
350
351
## Usage Examples
352
353
### Basic Form
354
355
```python
356
import dash_bootstrap_components as dbc
357
from dash import html, callback, Input, Output
358
359
form = dbc.Form([
360
dbc.Row([
361
dbc.Label("Email", html_for="email-input", width=2),
362
dbc.Col([
363
dbc.Input(id="email-input", type="email", placeholder="Enter email"),
364
dbc.FormText("We'll never share your email.", color="muted"),
365
], width=10),
366
], className="mb-3"),
367
dbc.Row([
368
dbc.Label("Password", html_for="password-input", width=2),
369
dbc.Col([
370
dbc.Input(id="password-input", type="password", placeholder="Password"),
371
], width=10),
372
], className="mb-3"),
373
dbc.Row([
374
dbc.Col([
375
dbc.Checkbox(id="remember-checkbox", label="Remember me"),
376
], width={"size": 10, "offset": 2}),
377
], className="mb-3"),
378
dbc.Row([
379
dbc.Col([
380
dbc.Button("Sign in", color="primary", type="submit"),
381
], width={"size": 10, "offset": 2}),
382
]),
383
])
384
```
385
386
### Input Groups
387
388
```python
389
# Input with text addon
390
search_input = dbc.InputGroup([
391
dbc.InputGroupText("@"),
392
dbc.Input(placeholder="Username"),
393
])
394
395
# Input with button
396
url_input = dbc.InputGroup([
397
dbc.Input(placeholder="Enter URL", type="url"),
398
dbc.Button("Go", color="primary"),
399
])
400
401
# Input with dropdown
402
filter_input = dbc.InputGroup([
403
dbc.DropdownMenu([
404
dbc.DropdownMenuItem("Action"),
405
dbc.DropdownMenuItem("Another action"),
406
], label="Filter"),
407
dbc.Input(placeholder="Search..."),
408
])
409
```
410
411
### Validation States
412
413
```python
414
from dash import callback, Input, Output, State
415
416
# Form with validation
417
validated_form = dbc.Form([
418
dbc.Label("Email", html_for="validated-email"),
419
dbc.Input(
420
id="validated-email",
421
type="email",
422
valid=False, # Set via callback
423
invalid=False, # Set via callback
424
),
425
dbc.FormFeedback("Please provide a valid email.", type="invalid"),
426
dbc.FormFeedback("Looks good!", type="valid"),
427
])
428
429
@callback(
430
[Output("validated-email", "valid"), Output("validated-email", "invalid")],
431
[Input("validated-email", "value")],
432
)
433
def validate_email(value):
434
if not value:
435
return False, False
436
is_valid = "@" in value and "." in value.split("@")[-1]
437
return is_valid, not is_valid
438
```
439
440
### Floating Labels
441
442
```python
443
floating_form = dbc.Form([
444
dbc.FormFloating([
445
dbc.Input(id="floating-email", type="email", placeholder="name@example.com"),
446
dbc.Label("Email address", html_for="floating-email"),
447
]),
448
dbc.FormFloating([
449
dbc.Input(id="floating-password", type="password", placeholder="Password"),
450
dbc.Label("Password", html_for="floating-password"),
451
]),
452
dbc.FormFloating([
453
dbc.Textarea(id="floating-textarea", placeholder="Leave a comment here"),
454
dbc.Label("Comments", html_for="floating-textarea"),
455
]),
456
])
457
```
458
459
### Switch and Radio Examples
460
461
```python
462
# Switch group
463
preferences = html.Div([
464
dbc.Switch(id="notifications-switch", label="Email notifications", value=True),
465
dbc.Switch(id="marketing-switch", label="Marketing emails", value=False),
466
dbc.Switch(id="updates-switch", label="Product updates", value=True),
467
])
468
469
# Radio button group
470
size_options = dbc.RadioItems(
471
id="size-radios",
472
options=[
473
{"label": "Small", "value": "sm"},
474
{"label": "Medium", "value": "md"},
475
{"label": "Large", "value": "lg"},
476
],
477
value="md",
478
inline=True,
479
)
480
481
# Checkbox group
482
features = dbc.Checklist(
483
id="feature-checklist",
484
options=[
485
{"label": "WiFi", "value": "wifi"},
486
{"label": "Parking", "value": "parking"},
487
{"label": "Pool", "value": "pool"},
488
{"label": "Gym", "value": "gym"},
489
],
490
value=["wifi", "parking"],
491
switch=True,
492
)
493
```