tessl/pypi-dash-bootstrap-components
Bootstrap themed components for use in Plotly Dash applications
—
Pending
forms.mddocs/
Form Components
Comprehensive form controls including inputs, selections, validation feedback, and form organization components built with Bootstrap styling and Dash integration.
Capabilities
Form
Container component for organizing form elements with consistent styling and behavior.
class Form:
"""
Form container component for grouping form controls.
Args:
children: Form control components
id (str): Component identifier for callbacks
style (dict): Inline CSS styles
class_name (str): Additional CSS classes
inline (bool): Display form controls inline
"""
def __init__(self, children=None, id=None, style=None, class_name=None, inline=False, **kwargs): ...Input
Enhanced text input component with Bootstrap styling, validation states, and various input types.
class Input:
"""
Enhanced HTML input with Bootstrap styling and Dash integration.
Args:
id (str): Component identifier for callbacks
value (str|number): Input value
type (str): Input type - "text", "number", "password", "email", "range", "search", "tel", "url", "hidden", "time"
placeholder (str|number): Placeholder text
valid (bool): Apply valid styling for feedback purposes
invalid (bool): Apply invalid styling for feedback purposes
plaintext (bool): Style as plain text with form field styling removed
size (str): Input size - "sm", "lg"
disabled (bool): Disable the input
readonly (bool): Make input read-only
n_submit (int): Number of times Enter key was pressed (for callbacks)
n_blur (int): Number of times input lost focus (for callbacks)
debounce (bool|int): Debounce input changes - True for default, number for milliseconds
style (dict): Inline CSS styles
class_name (str): Additional CSS classes
step (str|number): Step size for number inputs (default "any")
html_size (str): HTML size attribute (number of characters for text inputs)
autocomplete (str): HTML autocomplete attribute for browser assistance
autofocus (bool|str): Auto-focus on page load (accepts bool or "autoFocus")
inputmode (str): Input mode hint - "verbatim", "latin", "latin-name", "latin-prose",
"full-width-latin", "kana", "katakana", "numeric", "tel", "email", "url"
list (str): ID of datalist element for input suggestions
max (str|number): Maximum value for numeric/date inputs
min (str|number): Minimum value for numeric/date inputs
maxlength (str|number): Maximum number of characters for text inputs
minlength (str|number): Minimum number of characters for text inputs
pattern (str): Regular expression pattern for input validation
required (bool): Whether input is required for form submission
tabindex (str|number): Tab order index for keyboard navigation
title (str): Tooltip text for the input
name (str): HTML name attribute for form submission
form (str): ID of form element this input belongs to
key (str): React performance optimization key
"""
def __init__(self, id=None, value=None, type="text", placeholder=None,
valid=None, invalid=None, plaintext=False, size=None, disabled=False,
readonly=False, n_submit=0, n_blur=0, debounce=False, style=None,
class_name=None, step="any", html_size=None, autocomplete=None,
autofocus=False, inputmode=None, list=None, max=None, min=None,
maxlength=None, minlength=None, pattern=None, required=False,
tabindex=None, title=None, name=None, form=None, key=None, **kwargs): ...Select
Dropdown selection component with single and multiple selection support.
class Select:
"""
Select dropdown component with Bootstrap styling.
Args:
id (str): Component identifier for callbacks
options (list): List of option dictionaries with "label" and "value" keys
value (str|list): Selected value(s)
placeholder (str): Placeholder text when no selection
size (str): Size - "sm", "lg"
disabled (bool): Disable select
multiple (bool): Allow multiple selections
html_size (int): Number of visible options (for multiple select)
"""
def __init__(self, id=None, options=None, value=None, placeholder=None,
size=None, disabled=False, multiple=False, html_size=None,
style=None, class_name=None, **kwargs): ...Textarea
Multiline text input component with resizing and validation support.
class Textarea:
"""
Multiline text input component.
Args:
id (str): Component identifier for callbacks
value (str): Text content
placeholder (str): Placeholder text
rows (int): Number of visible text rows
cols (int): Text input width in characters
disabled (bool): Disable textarea
readonly (bool): Make read-only
valid (bool): Apply valid styling
invalid (bool): Apply invalid styling
size (str): Size - "sm", "lg"
maxLength (int): Maximum character length
minLength (int): Minimum character length
wrap (str): Text wrapping - "hard", "soft", "off"
"""
def __init__(self, id=None, value=None, placeholder=None, rows=None, cols=None,
disabled=False, readonly=False, valid=None, invalid=None, size=None,
maxLength=None, minLength=None, wrap=None, style=None, class_name=None, **kwargs): ...Checkbox
Individual checkbox input with label and styling options.
class Checkbox:
"""
Checkbox input component with label support.
Args:
id (str): Component identifier for callbacks
checked (bool): Checked state
disabled (bool): Disable checkbox
label (str): Label text
label_id (str): ID for the label element
label_style (dict): Styles for label
label_class_name (str): CSS classes for label
switch (bool): Render as toggle switch style
inline (bool): Display inline with other checkboxes
"""
def __init__(self, id=None, checked=False, disabled=False, label=None,
label_id=None, label_style=None, label_class_name=None,
switch=False, inline=False, style=None, class_name=None, **kwargs): ...Switch
Toggle switch component styled as a modern on/off switch.
class Switch:
"""
Toggle switch component for boolean values.
Args:
id (str): Component identifier for callbacks
value (bool): Switch state (on/off)
disabled (bool): Disable switch
label (str): Label text
label_id (str): ID for the label element
label_style (dict): Styles for label
label_class_name (str): CSS classes for label
"""
def __init__(self, id=None, value=False, disabled=False, label=None,
label_id=None, label_style=None, label_class_name=None,
style=None, class_name=None, **kwargs): ...RadioItems
Group of radio buttons for single selection from multiple options.
class RadioItems:
"""
Radio button group for single selection.
Args:
id (str): Component identifier for callbacks
options (list): List of option dictionaries with "label" and "value" keys
value (str): Selected value
inline (bool): Display options inline horizontally
switch (bool): Render as toggle switches
disabled (bool): Disable all options
input_style (dict): Styles for radio inputs
input_class_name (str): CSS classes for radio inputs
label_style (dict): Styles for labels
label_class_name (str): CSS classes for labels
"""
def __init__(self, id=None, options=None, value=None, inline=False, switch=False,
disabled=False, input_style=None, input_class_name=None,
label_style=None, label_class_name=None, style=None, class_name=None, **kwargs): ...Checklist
Group of checkboxes for multiple selection from options.
class Checklist:
"""
Checkbox group for multiple selections.
Args:
id (str): Component identifier for callbacks
options (list): List of option dictionaries with "label" and "value" keys
value (list): List of selected values
inline (bool): Display options inline horizontally
switch (bool): Render as toggle switches
disabled (bool): Disable all options
input_style (dict): Styles for checkbox inputs
input_class_name (str): CSS classes for checkbox inputs
label_style (dict): Styles for labels
label_class_name (str): CSS classes for labels
"""
def __init__(self, id=None, options=None, value=None, inline=False, switch=False,
disabled=False, input_style=None, input_class_name=None,
label_style=None, label_class_name=None, style=None, class_name=None, **kwargs): ...Label
Form label component with enhanced accessibility and styling.
class Label:
"""
Form label component for accessibility and styling.
Args:
children: Label content (text or components)
id (str): Component identifier
html_for (str): ID of associated form control
style (dict): Inline CSS styles
class_name (str): Additional CSS classes
size (str): Size - "sm", "lg" (matches associated control)
width (int|str): Column width when used in horizontal forms
check (bool): Style for checkbox/radio labels
"""
def __init__(self, children=None, id=None, html_for=None, style=None, class_name=None,
size=None, width=None, check=False, **kwargs): ...InputGroup
Component for grouping inputs with addons, buttons, or other elements.
class InputGroup:
"""
Group inputs with addons, buttons, or other elements.
Args:
children: Input and addon components
id (str): Component identifier
style (dict): Inline CSS styles
class_name (str): Additional CSS classes
size (str): Size - "sm", "lg"
"""
def __init__(self, children=None, id=None, style=None, class_name=None,
size=None, **kwargs): ...InputGroupText
Text addon component for use within InputGroup.
class InputGroupText:
"""
Text addon for InputGroup components.
Args:
children: Text content or components
id (str): Component identifier
style (dict): Inline CSS styles
class_name (str): Additional CSS classes
"""
def __init__(self, children=None, id=None, style=None, class_name=None, **kwargs): ...FormText
Help text component for providing additional information about form controls.
class FormText:
"""
Help text for form controls.
Args:
children: Help text content
id (str): Component identifier
style (dict): Inline CSS styles
class_name (str): Additional CSS classes
color (str): Text color - "muted" (default), "primary", "secondary", etc.
"""
def __init__(self, children=None, id=None, style=None, class_name=None,
color="muted", **kwargs): ...FormFeedback
Validation feedback component for displaying success or error messages.
class FormFeedback:
"""
Validation feedback for form controls.
Args:
children: Feedback message content
id (str): Component identifier
style (dict): Inline CSS styles
class_name (str): Additional CSS classes
type (str): Feedback type - "valid" or "invalid"
tooltip (bool): Display as tooltip style
"""
def __init__(self, children=None, id=None, style=None, class_name=None,
type="invalid", tooltip=False, **kwargs): ...FormFloating
Container for floating label inputs with modern styling.
class FormFloating:
"""
Container for floating label form controls.
Args:
children: Input and label components
id (str): Component identifier
style (dict): Inline CSS styles
class_name (str): Additional CSS classes
"""
def __init__(self, children=None, id=None, style=None, class_name=None, **kwargs): ...Usage Examples
Basic Form
import dash_bootstrap_components as dbc
from dash import html, callback, Input, Output
form = dbc.Form([
dbc.Row([
dbc.Label("Email", html_for="email-input", width=2),
dbc.Col([
dbc.Input(id="email-input", type="email", placeholder="Enter email"),
dbc.FormText("We'll never share your email.", color="muted"),
], width=10),
], className="mb-3"),
dbc.Row([
dbc.Label("Password", html_for="password-input", width=2),
dbc.Col([
dbc.Input(id="password-input", type="password", placeholder="Password"),
], width=10),
], className="mb-3"),
dbc.Row([
dbc.Col([
dbc.Checkbox(id="remember-checkbox", label="Remember me"),
], width={"size": 10, "offset": 2}),
], className="mb-3"),
dbc.Row([
dbc.Col([
dbc.Button("Sign in", color="primary", type="submit"),
], width={"size": 10, "offset": 2}),
]),
])Input Groups
# Input with text addon
search_input = dbc.InputGroup([
dbc.InputGroupText("@"),
dbc.Input(placeholder="Username"),
])
# Input with button
url_input = dbc.InputGroup([
dbc.Input(placeholder="Enter URL", type="url"),
dbc.Button("Go", color="primary"),
])
# Input with dropdown
filter_input = dbc.InputGroup([
dbc.DropdownMenu([
dbc.DropdownMenuItem("Action"),
dbc.DropdownMenuItem("Another action"),
], label="Filter"),
dbc.Input(placeholder="Search..."),
])Validation States
from dash import callback, Input, Output, State
# Form with validation
validated_form = dbc.Form([
dbc.Label("Email", html_for="validated-email"),
dbc.Input(
id="validated-email",
type="email",
valid=False, # Set via callback
invalid=False, # Set via callback
),
dbc.FormFeedback("Please provide a valid email.", type="invalid"),
dbc.FormFeedback("Looks good!", type="valid"),
])
@callback(
[Output("validated-email", "valid"), Output("validated-email", "invalid")],
[Input("validated-email", "value")],
)
def validate_email(value):
if not value:
return False, False
is_valid = "@" in value and "." in value.split("@")[-1]
return is_valid, not is_validFloating Labels
floating_form = dbc.Form([
dbc.FormFloating([
dbc.Input(id="floating-email", type="email", placeholder="name@example.com"),
dbc.Label("Email address", html_for="floating-email"),
]),
dbc.FormFloating([
dbc.Input(id="floating-password", type="password", placeholder="Password"),
dbc.Label("Password", html_for="floating-password"),
]),
dbc.FormFloating([
dbc.Textarea(id="floating-textarea", placeholder="Leave a comment here"),
dbc.Label("Comments", html_for="floating-textarea"),
]),
])Switch and Radio Examples
# Switch group
preferences = html.Div([
dbc.Switch(id="notifications-switch", label="Email notifications", value=True),
dbc.Switch(id="marketing-switch", label="Marketing emails", value=False),
dbc.Switch(id="updates-switch", label="Product updates", value=True),
])
# Radio button group
size_options = dbc.RadioItems(
id="size-radios",
options=[
{"label": "Small", "value": "sm"},
{"label": "Medium", "value": "md"},
{"label": "Large", "value": "lg"},
],
value="md",
inline=True,
)
# Checkbox group
features = dbc.Checklist(
id="feature-checklist",
options=[
{"label": "WiFi", "value": "wifi"},
{"label": "Parking", "value": "parking"},
{"label": "Pool", "value": "pool"},
{"label": "Gym", "value": "gym"},
],
value=["wifi", "parking"],
switch=True,
)Install with Tessl CLI
npx tessl i tessl/pypi-dash-bootstrap-components