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
Name | Description | Type | Default |
---|---|---|---|
html_body (required) | HTML content for the body of the custom component. | str | None |
key | Identifier for the widget, defaults to hash of html_body if not provided. | str | None |
required | Whether the component must be filled before proceeding. | bool | True |
label | Text label displayed above the component. | str | '' |
html_head | HTML content for the head section. | str | '' |
height | Height of the component in pixels. | int | 200 |
css | CSS styles for the component. | str | '' |
js | JavaScript code for the component. | str | '' |
full_width | Whether the component should take up the full width of its container. | bool | False |
change_event | Function to process value changes before storing. | Callable | None |
errors | Pre-defined validation error messages to display. | Union[List[str], str] | None |