tessl/pypi-dash-mantine-components
Plotly Dash Components based on the Mantine React Components Library, providing over 90 high-quality UI components for building dashboards and web applications.
—
Pending
forms.mddocs/
Form Controls
Comprehensive form inputs including text fields, selectors, buttons, checkboxes, sliders, and specialized inputs for building interactive forms and user interfaces.
Capabilities
Input Components
Text input fields with various specializations for different data types.
def TextInput(
id=None,
value="", # Input value
placeholder="", # Placeholder text
label="", # Input label
description="", # Help text
error="", # Error message
required=False, # Required field
disabled=False, # Disabled state
size="sm", # Input size
radius="sm", # Border radius
**kwargs
):
"""
Single-line text input field.
Parameters:
- id: Component ID for callbacks
- value: Current input value
- placeholder: Placeholder text
- label: Field label
- description: Help text below input
- error: Error message (shows input as invalid)
- required: Show required indicator
- disabled: Disable input
- size: Input size
- radius: Border radius
"""
def Textarea(
id=None,
value="", # Textarea value
placeholder="", # Placeholder text
label="", # Textarea label
description="", # Help text
error="", # Error message
rows=4, # Number of rows
autosize=False, # Auto-resize
minRows=None, # Minimum rows when autosize
maxRows=None, # Maximum rows when autosize
resize="vertical", # Resize behavior
**kwargs
):
"""
Multi-line text input field.
Parameters:
- id: Component ID for callbacks
- value: Current textarea value
- rows: Initial number of rows
- autosize: Automatically adjust height
- minRows: Minimum rows for autosize
- maxRows: Maximum rows for autosize
- resize: CSS resize property
"""
def NumberInput(
id=None,
value=None, # Numeric value
min=None, # Minimum value
max=None, # Maximum value
step=1, # Step increment
precision=None, # Decimal precision
placeholder="", # Placeholder text
label="", # Input label
description="", # Help text
error="", # Error message
**kwargs
):
"""
Numeric input with controls.
Parameters:
- id: Component ID for callbacks
- value: Current numeric value
- min: Minimum allowed value
- max: Maximum allowed value
- step: Increment/decrement step
- precision: Decimal places
"""
def PasswordInput(
id=None,
value="", # Password value
placeholder="", # Placeholder text
label="", # Input label
description="", # Help text
error="", # Error message
visible=False, # Show password
**kwargs
):
"""
Password input with visibility toggle.
Parameters:
- id: Component ID for callbacks
- value: Current password value
- visible: Whether password is visible
"""
def JsonInput(
id=None,
value="", # JSON string value
placeholder="", # Placeholder text
label="", # Input label
description="", # Help text
error="", # Error message
validationError="Invalid JSON", # JSON validation error
formatOnBlur=True, # Format JSON on blur
**kwargs
):
"""
JSON input with syntax validation.
Parameters:
- id: Component ID for callbacks
- value: JSON string value
- validationError: Custom validation message
- formatOnBlur: Auto-format JSON
"""
def PinInput(
id=None,
value="", # PIN value
length=4, # Number of inputs
type="alphanumeric", # "number" | "alphanumeric"
mask=False, # Mask input like password
placeholder="", # Placeholder for each input
**kwargs
):
"""
PIN/code input with multiple fields.
Parameters:
- id: Component ID for callbacks
- value: Complete PIN value
- length: Number of input fields
- type: Allowed input type
- mask: Hide input characters
"""Selection Components
Dropdown and autocomplete components for selecting from options.
def Select(
id=None,
value=None, # Selected value
data=[], # Options list
placeholder="", # Placeholder text
label="", # Select label
description="", # Help text
error="", # Error message
searchable=False, # Enable search
clearable=False, # Allow clearing
disabled=False, # Disabled state
**kwargs
):
"""
Single-selection dropdown.
Parameters:
- id: Component ID for callbacks
- value: Currently selected value
- data: List of options [{"value": "val", "label": "Label"}]
- searchable: Enable option filtering
- clearable: Show clear button
"""
def MultiSelect(
id=None,
value=[], # Selected values list
data=[], # Options list
placeholder="", # Placeholder text
label="", # Select label
description="", # Help text
error="", # Error message
searchable=True, # Enable search
clearable=True, # Allow clearing
**kwargs
):
"""
Multi-selection dropdown.
Parameters:
- id: Component ID for callbacks
- value: List of selected values
- data: List of options
"""
def Autocomplete(
id=None,
value="", # Input value
data=[], # Suggestions list
placeholder="", # Placeholder text
label="", # Input label
description="", # Help text
error="", # Error message
limit=5, # Max suggestions shown
**kwargs
):
"""
Autocomplete input with suggestions.
Parameters:
- id: Component ID for callbacks
- value: Current input value
- data: List of suggestion strings or objects
- limit: Maximum suggestions to display
"""
def TagsInput(
id=None,
value=[], # Tags list
data=[], # Suggestions list
placeholder="", # Placeholder text
label="", # Input label
description="", # Help text
error="", # Error message
**kwargs
):
"""
Tags input with autocomplete.
Parameters:
- id: Component ID for callbacks
- value: List of current tags
- data: List of tag suggestions
"""Button Components
Various button styles and configurations for user interactions.
def Button(
children=None, # Button content
id=None,
variant="filled", # "filled" | "outline" | "light" | "subtle" | "transparent"
color="blue", # Button color
size="sm", # Button size
radius="sm", # Border radius
disabled=False, # Disabled state
loading=False, # Loading state
leftIcon=None, # Left icon
rightIcon=None, # Right icon
fullWidth=False, # Full width
compact=False, # Compact size
n_clicks=0, # Click counter
**kwargs
):
"""
Primary button component.
Parameters:
- children: Button text/content
- id: Component ID for callbacks
- variant: Button style variant
- color: Button color theme
- size: Button size
- disabled: Disable button
- loading: Show loading spinner
- leftIcon: Icon on left side
- rightIcon: Icon on right side
- fullWidth: Expand to full width
- n_clicks: Click counter for callbacks
"""
def ActionIcon(
children=None, # Icon content
id=None,
variant="subtle", # Button variant
color="gray", # Icon color
size="md", # Icon size
radius="sm", # Border radius
disabled=False, # Disabled state
loading=False, # Loading state
n_clicks=0, # Click counter
**kwargs
):
"""
Icon-only button component.
Parameters:
- children: Icon element
- id: Component ID for callbacks
- variant: Button style
- color: Icon color
- size: Icon size
- n_clicks: Click counter for callbacks
"""
def ButtonGroup(
children=None, # Button components
orientation="horizontal", # "horizontal" | "vertical"
**kwargs
):
"""
Group of connected buttons.
Parameters:
- children: List of Button components
- orientation: Group layout direction
"""
def UnstyledButton(
children=None, # Button content
id=None,
n_clicks=0, # Click counter
**kwargs
):
"""
Unstyled button base component.
Parameters:
- children: Button content
- id: Component ID for callbacks
- n_clicks: Click counter for callbacks
"""Choice Components
Checkboxes, radio buttons, and switches for boolean and choice selections.
def Checkbox(
id=None,
checked=False, # Checked state
label="", # Checkbox label
description="", # Help text
error="", # Error message
disabled=False, # Disabled state
indeterminate=False, # Indeterminate state
size="sm", # Checkbox size
color="blue", # Check color
**kwargs
):
"""
Checkbox input component.
Parameters:
- id: Component ID for callbacks
- checked: Current checked state
- label: Checkbox label text
- indeterminate: Show indeterminate state
- size: Checkbox size
- color: Check mark color
"""
def CheckboxGroup(
id=None,
value=[], # Selected values
data=[], # Checkbox options
label="", # Group label
description="", # Help text
error="", # Error message
orientation="vertical", # "vertical" | "horizontal"
**kwargs
):
"""
Group of checkboxes.
Parameters:
- id: Component ID for callbacks
- value: List of selected values
- data: List of checkbox options
- orientation: Layout direction
"""
def Radio(
id=None,
checked=False, # Checked state
value="", # Radio value
label="", # Radio label
description="", # Help text
disabled=False, # Disabled state
size="sm", # Radio size
color="blue", # Radio color
**kwargs
):
"""
Single radio button.
Parameters:
- id: Component ID for callbacks
- checked: Current checked state
- value: Radio button value
- label: Radio label text
"""
def RadioGroup(
id=None,
value=None, # Selected value
data=[], # Radio options
label="", # Group label
description="", # Help text
error="", # Error message
orientation="vertical", # "vertical" | "horizontal"
**kwargs
):
"""
Group of radio buttons.
Parameters:
- id: Component ID for callbacks
- value: Currently selected value
- data: List of radio options
- orientation: Layout direction
"""
def Switch(
id=None,
checked=False, # Switch state
label="", # Switch label
description="", # Help text
error="", # Error message
disabled=False, # Disabled state
size="sm", # Switch size
color="blue", # Switch color
**kwargs
):
"""
Toggle switch component.
Parameters:
- id: Component ID for callbacks
- checked: Current switch state
- label: Switch label text
- size: Switch size
- color: Switch color when on
"""Specialized Input Components
Advanced input components for specific use cases.
def Slider(
id=None,
value=50, # Slider value
min=0, # Minimum value
max=100, # Maximum value
step=1, # Step increment
marks=[], # Slider marks
label="", # Slider label
disabled=False, # Disabled state
**kwargs
):
"""
Single-value slider component.
Parameters:
- id: Component ID for callbacks
- value: Current slider value
- min: Minimum value
- max: Maximum value
- step: Value increment
- marks: List of mark objects
"""
def RangeSlider(
id=None,
value=[20, 80], # Range values [min, max]
min=0, # Minimum bound
max=100, # Maximum bound
step=1, # Step increment
marks=[], # Slider marks
label="", # Slider label
disabled=False, # Disabled state
**kwargs
):
"""
Range slider with two handles.
Parameters:
- id: Component ID for callbacks
- value: Current range [start, end]
- min: Minimum bound
- max: Maximum bound
- step: Value increment
"""
def Rating(
id=None,
value=0, # Rating value
count=5, # Number of items
fractions=1, # Fractional precision
color="yellow", # Rating color
size="sm", # Rating size
readOnly=False, # Read-only mode
**kwargs
):
"""
Star rating component.
Parameters:
- id: Component ID for callbacks
- value: Current rating value
- count: Total number of stars
- fractions: Fractional increments (1, 2, 3, or 4)
- readOnly: Disable interaction
"""
def SegmentedControl(
id=None,
value=None, # Selected value
data=[], # Segment options
orientation="horizontal", # "horizontal" | "vertical"
size="sm", # Control size
radius="sm", # Border radius
color="blue", # Selection color
disabled=False, # Disabled state
**kwargs
):
"""
Segmented control for exclusive selection.
Parameters:
- id: Component ID for callbacks
- value: Currently selected value
- data: List of segment options
- orientation: Layout direction
"""
def Chip(
children=None, # Chip content
id=None,
checked=False, # Selected state
variant="outline", # "outline" | "filled" | "light"
color="blue", # Chip color
size="sm", # Chip size
radius="xl", # Border radius
disabled=False, # Disabled state
**kwargs
):
"""
Selectable chip component.
Parameters:
- children: Chip text/content
- id: Component ID for callbacks
- checked: Current selection state
- variant: Chip style
- color: Chip color theme
"""Usage Examples
Basic Form
import dash_mantine_components as dmc
form = dmc.Stack([
dmc.TextInput(
id="name-input",
label="Full Name",
placeholder="Enter your name",
required=True
),
dmc.Select(
id="country-select",
label="Country",
placeholder="Select country",
data=[
{"value": "us", "label": "United States"},
{"value": "ca", "label": "Canada"},
{"value": "uk", "label": "United Kingdom"}
]
),
dmc.Checkbox(
id="newsletter-checkbox",
label="Subscribe to newsletter",
checked=False
),
dmc.Button("Submit", id="submit-button", type="submit")
], spacing="md")Advanced Input Controls
controls = dmc.Stack([
dmc.NumberInput(
id="age-input",
label="Age",
min=0,
max=120,
step=1,
value=25
),
dmc.RangeSlider(
id="price-range",
label="Price Range",
min=0,
max=1000,
step=10,
value=[100, 500],
marks=[
{"value": 0, "label": "$0"},
{"value": 500, "label": "$500"},
{"value": 1000, "label": "$1000"}
]
),
dmc.Rating(
id="rating",
label="Rate this product",
value=3,
count=5
)
])Install with Tessl CLI
npx tessl i tessl/pypi-dash-mantine-components