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

State Value

Any: The value returned by the custom component.

info

This is the type of the value that this widget holds. It will show up when accessing widget's state item.

This also defines which value type can be used on initial_state