CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/pypi-panel

The powerful data exploration & web app framework for Python.

Pending
Overview
Eval results
Files

widget-system.mddocs/

Widget System

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.

Capabilities

Text Input Widgets

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

class TextInput:
    """
    Single-line text input widget.
    
    Parameters:
    - value: Current text value
    - placeholder: Placeholder text
    - width: Width of input
    - height: Height of input
    - **params: Additional parameters
    """

class TextAreaInput:
    """
    Multi-line text input widget.
    
    Parameters:
    - value: Current text value
    - placeholder: Placeholder text
    - rows: Number of visible rows
    - max_length: Maximum text length
    - **params: Additional parameters
    """

class PasswordInput:
    """
    Password input field with hidden text display.
    
    Parameters:
    - value: Current password value
    - placeholder: Placeholder text
    - **params: Additional parameters
    """

class StaticText:
    """
    Read-only text display widget.
    
    Parameters:
    - value: Text to display
    - **params: Additional parameters
    """

Numeric Input Widgets

Specialized inputs for numeric values with validation and formatting.

class IntInput:
    """
    Integer input widget with validation.
    
    Parameters:
    - value: Current integer value
    - start: Minimum allowed value
    - end: Maximum allowed value
    - step: Step size for increment/decrement
    - **params: Additional parameters
    """

class FloatInput:
    """
    Float number input widget with validation.
    
    Parameters:
    - value: Current float value
    - start: Minimum allowed value
    - end: Maximum allowed value
    - step: Step size for increment/decrement
    - **params: Additional parameters
    """

class NumberInput:
    """
    Generic number input widget.
    
    Parameters:
    - value: Current numeric value
    - format: Number format string
    - **params: Additional parameters
    """

class Spinner:
    """
    Numeric spinner input with increment/decrement buttons.
    
    Parameters:
    - value: Current numeric value
    - start: Minimum value
    - end: Maximum value  
    - step: Step size
    - **params: Additional parameters
    """

class LiteralInput:
    """
    Python literal input widget that evaluates expressions.
    
    Parameters:
    - value: Current Python literal value
    - type: Expected Python type
    - **params: Additional parameters
    """

class ArrayInput:
    """
    NumPy array input widget.
    
    Parameters:
    - value: Current array value
    - **params: Additional parameters
    """

Selection Widgets

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

class Select:
    """
    Dropdown selection widget for single selection.
    
    Parameters:
    - value: Currently selected value
    - options: List or dict of available options
    - **params: Additional parameters
    """

class MultiSelect:
    """
    Multiple selection dropdown widget.
    
    Parameters:
    - value: List of currently selected values
    - options: List or dict of available options
    - **params: Additional parameters
    """

class AutocompleteInput:
    """
    Autocomplete text input with suggestion dropdown.
    
    Parameters:
    - value: Current text value
    - options: List of autocomplete options
    - case_sensitive: Whether matching is case sensitive
    - **params: Additional parameters
    """

class RadioBoxGroup:
    """
    Radio button group for single selection.
    
    Parameters:
    - value: Currently selected value
    - options: List or dict of available options
    - inline: Whether to display options inline
    - **params: Additional parameters
    """

class CheckBoxGroup:
    """
    Checkbox group for multiple selection.
    
    Parameters:
    - value: List of currently selected values
    - options: List or dict of available options
    - inline: Whether to display options inline
    - **params: Additional parameters
    """

Slider Widgets

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

class IntSlider:
    """
    Integer slider widget.
    
    Parameters:
    - value: Current integer value
    - start: Minimum value
    - end: Maximum value
    - step: Step size
    - **params: Additional parameters
    """

class FloatSlider:
    """
    Float slider widget.
    
    Parameters:
    - value: Current float value
    - start: Minimum value
    - end: Maximum value
    - step: Step size
    - **params: Additional parameters
    """

class RangeSlider:
    """
    Range slider widget for selecting a range of values.
    
    Parameters:
    - value: Tuple of (start, end) values
    - start: Minimum allowed value
    - end: Maximum allowed value
    - step: Step size
    - **params: Additional parameters
    """

class DateSlider:
    """
    Date slider widget for selecting dates.
    
    Parameters:
    - value: Current date value
    - start: Minimum date
    - end: Maximum date
    - step: Step size in days
    - **params: Additional parameters
    """

class DatetimeSlider:
    """
    Datetime slider widget for selecting datetime values.
    
    Parameters:
    - value: Current datetime value
    - start: Minimum datetime
    - end: Maximum datetime
    - step: Step size
    - **params: Additional parameters
    """

Date and Time Widgets

Specialized widgets for date and time input with calendar pickers.

class DatePicker:
    """
    Date picker widget with calendar interface.
    
    Parameters:
    - value: Current date value
    - start: Minimum selectable date
    - end: Maximum selectable date
    - **params: Additional parameters
    """

class DatetimePicker:
    """
    Datetime picker widget with calendar and time selection.
    
    Parameters:
    - value: Current datetime value
    - start: Minimum selectable datetime
    - end: Maximum selectable datetime
    - **params: Additional parameters
    """

class TimePicker:
    """
    Time picker widget for selecting time values.
    
    Parameters:
    - value: Current time value
    - start: Minimum selectable time
    - end: Maximum selectable time
    - **params: Additional parameters
    """

class DateRangePicker:
    """
    Date range picker for selecting date ranges.
    
    Parameters:
    - value: Tuple of (start_date, end_date)
    - start: Minimum selectable date
    - end: Maximum selectable date
    - **params: Additional parameters
    """

Button Widgets

Interactive button components for triggering actions and state changes.

class Button:
    """
    Click button widget for triggering actions.
    
    Parameters:
    - name: Button label text
    - button_type: Button style ('default', 'primary', 'success', 'warning', 'danger')
    - **params: Additional parameters
    """

class Toggle:
    """
    Toggle button widget for boolean state.
    
    Parameters:
    - name: Button label text
    - value: Current toggle state (True/False)
    - button_type: Button style
    - **params: Additional parameters
    """

class MenuButton:
    """
    Dropdown menu button widget.
    
    Parameters:
    - name: Button label text
    - items: List of menu items
    - **params: Additional parameters
    """

File Input Widgets

Widgets for file upload and selection from the file system.

class FileInput:
    """
    File upload widget for selecting and uploading files.
    
    Parameters:
    - value: Uploaded file data
    - filename: Name of uploaded file
    - accept: Accepted file types
    - multiple: Whether multiple files can be selected
    - **params: Additional parameters
    """

class FileDropper:
    """
    Drag-and-drop file input widget.
    
    Parameters:
    - value: Dropped file data
    - filename: Name of dropped file
    - accept: Accepted file types
    - multiple: Whether multiple files can be accepted
    - **params: Additional parameters
    """

class FileSelector:
    """
    File system browser widget for selecting files.
    
    Parameters:
    - value: Selected file path
    - directory: Root directory to browse
    - **params: Additional parameters
    """

class FileDownload:
    """
    File download widget for providing downloadable files.
    
    Parameters:
    - file: File path or file-like object
    - filename: Download filename
    - **params: Additional parameters
    """

Table Widgets

Widgets for displaying and editing tabular data with various features.

class DataFrame:
    """
    Pandas DataFrame display widget.
    
    Parameters:
    - value: DataFrame to display
    - pagination: Pagination mode ('remote', 'local', None)
    - page_size: Number of rows per page
    - **params: Additional parameters
    """

class Tabulator:
    """
    Interactive data table widget with editing capabilities.
    
    Parameters:
    - value: DataFrame to display
    - pagination: Pagination mode
    - selectable: Row selection mode
    - sortable: Whether columns are sortable
    - **params: Additional parameters
    """

Editor Widgets

Advanced text editing widgets with syntax highlighting and rich formatting.

class CodeEditor:
    """
    Code editor widget with syntax highlighting.
    
    Parameters:
    - value: Code content
    - language: Programming language for syntax highlighting
    - theme: Editor theme
    - **params: Additional parameters
    """

class TextEditor:
    """
    Rich text editor widget with formatting options.
    
    Parameters:
    - value: HTML content
    - toolbar: Toolbar configuration
    - **params: Additional parameters
    """

class JSONEditor:
    """
    JSON editor widget with validation and formatting.
    
    Parameters:
    - value: JSON object or string
    - **params: Additional parameters
    """

Indicator Widgets

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

class Progress:
    """
    Progress bar widget for showing completion status.
    
    Parameters:
    - value: Current progress value (0-100)
    - max: Maximum progress value
    - **params: Additional parameters
    """

class LoadingSpinner:
    """
    Loading animation widget for indicating processing.
    
    Parameters:
    - value: Whether spinner is active
    - **params: Additional parameters
    """

class Number:
    """
    Numeric value display widget with formatting.
    
    Parameters:
    - value: Numeric value to display
    - format: Number format string
    - **params: Additional parameters
    """

class Gauge:
    """
    Semi-circular gauge widget for displaying values.
    
    Parameters:
    - value: Current gauge value
    - bounds: Tuple of (min, max) values
    - **params: Additional parameters
    """

class Tqdm:
    """
    Progress bar widget compatible with tqdm library for iterative processes.
    
    Parameters:
    - value: Current progress value
    - max: Maximum progress value
    - description: Progress description text
    - **params: Additional parameters
    """

Specialized Widgets

Advanced widgets for specific use cases and integrations.

class Terminal:
    """
    Terminal emulator widget for command-line interfaces.
    
    Parameters:
    - **params: Additional parameters
    """

class VideoStream:
    """
    Video streaming widget for real-time video display.
    
    Parameters:
    - **params: Additional parameters
    """

class ColorPicker:
    """
    Color selection widget with color palette.
    
    Parameters:
    - value: Current color value
    - **params: Additional parameters
    """

class Player:
    """
    Media player widget for controlling playback.
    
    Parameters:
    - **params: Additional parameters
    """

Speech Widgets

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

class SpeechToText:
    """
    Speech recognition widget for converting speech to text.
    
    Parameters:
    - value: Recognized text output
    - continuous: Whether to continuously listen
    - **params: Additional parameters
    """

class TextToSpeech:
    """
    Text-to-speech widget for converting text to speech.
    
    Parameters:
    - value: Text to synthesize
    - voice: Voice settings for synthesis
    - **params: Additional parameters
    """

class Grammar:
    """
    Speech grammar definition for recognition constraints.
    
    Parameters:
    - value: Grammar specification
    - **params: Additional parameters
    """

class GrammarList:
    """
    List of speech grammars for recognition.
    
    Parameters:
    - value: List of grammar objects
    - **params: Additional parameters
    """

class Utterance:
    """
    Speech utterance configuration for text-to-speech.
    
    Parameters:
    - text: Text to speak
    - voice: Voice to use for speaking
    - **params: Additional parameters
    """

class Voice:
    """
    Voice configuration for speech synthesis.
    
    Parameters:
    - name: Voice name
    - lang: Language code
    - **params: Additional parameters
    """

Enhanced Slider Widgets

Advanced slider widgets with inline editing capabilities.

class EditableFloatSlider:
    """
    Editable float slider with text input for precise values.
    
    Parameters:
    - value: Current float value
    - start: Minimum value
    - end: Maximum value
    - step: Step size
    - **params: Additional parameters
    """

class EditableIntSlider:
    """
    Editable integer slider with text input for precise values.
    
    Parameters:
    - value: Current integer value
    - start: Minimum value
    - end: Maximum value
    - step: Step size
    - **params: Additional parameters
    """

class EditableRangeSlider:
    """
    Editable range slider with text inputs for precise range values.
    
    Parameters:
    - value: Tuple of (start, end) values
    - start: Minimum allowed value
    - end: Maximum allowed value
    - step: Step size
    - **params: Additional parameters
    """

Usage Examples

Basic Widget Example

import panel as pn

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

# Arrange in layout
form = pn.Column(
    "## User Information",
    name_input,
    age_slider,
    submit_button
)

Interactive Dashboard Example

# Create selection widgets
category_select = pn.widgets.Select(
    options=['Sales', 'Marketing', 'Engineering'],
    value='Sales'
)

date_range = pn.widgets.DateRangePicker(
    start=datetime(2023, 1, 1),
    end=datetime(2023, 12, 31)
)

# Create data table
data_table = pn.widgets.Tabulator(
    value=df,
    pagination='remote',
    page_size=20,
    selectable='multiple'
)

Install with Tessl CLI

npx tessl i tessl/pypi-panel

docs

authentication-system.md

chat-interface.md

core-functions.md

custom-components.md

index.md

layout-components.md

links-system.md

pane-system.md

parameter-integration.md

pipeline-system.md

template-system.md

widget-system.md

tile.json