PasswordInput#

Material version available

pn.ui.PasswordInput resolves to the Material Design implementation of this component, documented in the panel-material-ui reference. This page documents the classic pn.widgets.PasswordInput.

import panel as pn
import panel.ui

pn.extension()

The PasswordInput allows entering any string using an obfuscated text input box.


Discover more on using widgets to add interactivity to your applications in the how-to guides on interactivity. Alternatively, learn how to set up callbacks and (JS-)links between parameters or how to use them as part of declarative UIs with Param.




Parameters:#


For details on other options for customizing the component see the customization guides.




Core#


    

  • disabled (boolean): Whether the widget is editable
    • 

  • value (str): The current value updated when pressing <enter> key.
    • 

  • value_input (str): The current value updated on every key press.
    • 







Display#


    

  • color (str): The color variant of the input, which must be one of 'default' (white), 'primary' (blue), 'success' (green), 'info' (yellow), 'light' (light), or 'danger' (red).
    • 

  • error_state (boolean): Indicates an invalid text entry.
    • 

  • helper_text (str): Helper text displayed below the input field.
    • 

  • max_length (int): The maximum number of allowed characters.
    • 

  • label (str): The title of the widget
    • 

  • placeholder (str): A placeholder string displayed when no value is entered.
    • 

  • size (Literal["small", "medium"]): The size variant of the widget.
    • 

  • variant (Literal["filled", "outlined", "standard"]): The variant of the input field.
    • 







Styling#


    

  • sx (dict): Component level styling API.
    • 

  • theme_config (dict): Theming API.
    • 







Aliases#


For compatibility with Panel certain parameters are allowed as aliases:


    

  • name: Alias for label
    • 











Basic Usage#


The PasswordInput widget provides a simple text entry form and supports a placeholder which is displayed when the value is empty:


password_input = pn.ui.PasswordInput(label='Password', placeholder='Enter your password here...')
password_input







            
            
PasswordInput.value returns a string type that can be read out and set like other widgets:


password_input.value











Value Input#


The PasswordInput.value is updated after an enter_pressed event or when switching focus, i.e. when clicking or tabbing away from the widget. To get the current value after every keystroke you can inspect the value_input instead:


value = pn.ui.PasswordInput(label='Value Input', value='Hello W')
value_input = pn.ui.PasswordInput(label='Value Input', value='Hello W')

pn.ui.Column(
    pn.ui.Row(value, pn.ui.Typography(value.param.value)),
    pn.ui.Row(value_input, pn.ui.Typography(value_input.param.value_input))
)







            
            




Maximum Length#


The max_length controls the maximum number of characters that can be entered:


pn.ui.PasswordInput(label='Password (max_length=12)', max_length=12)







            
            




Error State#


The error_state parameter allows setting of the message that is displayed if validation of the input fails.


pn.ui.PasswordInput(label='PasswordInput (invalid entry)', error_state=True)







            
            




Helper Text#


The helper_text parameter displays additional guidance text below the input field:


pn.ui.PasswordInput(label='Password', helper_text='Must be at least 8 characters')







            
            




Disabled and Loading#


Like other widgets, the PasswordInput can be disabled and/or show a loading indicator.


pn.ui.PasswordInput(
    label='Text Input', disabled=True, loading=True,
)







            
            




Color Options#


You can set the color parameter to visually distinguish the PasswordInput when active. Available options include “default”, “primary”, “secondary”, “error”, “info”, “success”, “warning”, “light”, “dark”, and “danger”:


pn.ui.FlexBox(
    *[pn.ui.PasswordInput(label=color, color=color) for color in pn.ui.PasswordInput.param.color.objects]
)







            
            




Size#


The size parameter allows toggling between “small” and “medium” (default) sized input fields:


pn.ui.FlexBox(
    pn.ui.PasswordInput(label='Small', size="small"),
    pn.ui.PasswordInput(label='Medium', size="medium"),
)







            
            




Variant#


The variant parameter controls the visual style of the input. Choose from “filled”, “outlined” (default), or “standard”:


pn.ui.FlexBox(
    pn.ui.PasswordInput(label='Filled', variant="filled"),
    pn.ui.PasswordInput(label='Outlined', variant="outlined"),
    pn.ui.PasswordInput(label='Standard', variant="standard"),
)







            
            




Icon Labels#


Material icon tokens like :material/zoom_out_map: render as icons in labels and option labels.


pn.ui.PasswordInput(label="Zoom :material/zoom_out_map:", placeholder="Enter password")







            
            




API Reference#




Parameters#


pn.ui.PasswordInput(
    label='PasswordInput'
).api(jslink=True)







            
            






References#


Panel Documentation:



Material UI AutoComplete:



pn.ui.Row(password_input.controls(jslink=True), password_input)