Skip to main content

CustomInput

Custom HTML input widget for creating custom interactive components.

Examples

Basic Usage

This example runs a CustomInput that gets the current date from the user's browser

Example Code

from abstra.forms import CustomInput, run

html = """
<button id='date-btn'>Get current date</button>
"""

js = """
document.getElementById('date-btn').addEventListener('click',function() {
const date = new Date();
const day = date.getDate();
const month = date.getMonth() + 1;
const year = date.getFullYear();

changeEvent(day + '/' + month + '/' + year);
});
"""

css = """
body {
margin: 0;
padding: 0;
}

#date-btn {
cursor: pointer;
background-color: #343b46;
border: none;
border-radius: 4px;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}

#date-btn:hover {
background-color: #3e4756;
}
"""


# Create a page with the widget
example_page = [
CustomInput(
html_body=html,
js=js,
css=css,
key="my-custom-input",
),
]

# Run the form
result = run([example_page])

# Print the result
print(result)

Parameters

NameDescriptionTypeDefault
html_body (required)HTML content for the body of the custom component.strNone
keyIdentifier for the widget, defaults to hash of html_body if not provided.strNone
requiredWhether the component must be filled before proceeding.boolTrue
labelText label displayed above the component.str''
html_headHTML content for the head section.str''
heightHeight of the component in pixels.int200
cssCSS styles for the component.str''
jsJavaScript code for the component.str''
full_widthWhether the component should take up the full width of its container.boolFalse
change_eventFunction to process value changes before storing.CallableNone
errorsPre-defined validation error messages to display.Union[List[str], str]None