CardsInput

Card selection input widget for choosing from visual card options.

Examples

Basic Usage

This example runs a form with a single page containing the widget

Example Code

from abstra.forms import CardsInput, run

# Create a page with the widget
example_page = [
    CardsInput(
        "Choose your favorite dessert",
        [
            {
                "title": "Crepe",
                "subtitle": "French",
                "image": "https://cdn.pixabay.com/photo/2017/01/30/13/56/pancakes-2020870_1280.jpg",
                "description": "A crêpe or crepe is a type of very thin pancake.",
            },
            {
                "title": "Pancake",
                "subtitle": "American",
                "image": "https://cdn.pixabay.com/photo/2018/07/10/21/23/pancake-3529653_1280.jpg",
                "description": "A pancake is a flat cake, often thin and round.",
            },
            {
                "title": "Waffle",
                "subtitle": "Belgian",
                "image": "https://cdn.pixabay.com/photo/2020/05/19/20/54/waffles-5192625_1280.jpg",
                "description": "A waffle is a patterned dish made from leavened batter or dough.",
            },
        ],
    )
]

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

# Print the result
print(result)

Searchable

You may also add a search bar to the cards input widget.

Example Code

from abstra.forms import CardsInput, run

# Create a page with the widget
example_page = [
    CardsInput(
        "Choose your favorite dessert",
        [
            {
                "title": "Crepe",
                "subtitle": "French",
                "image": "https://cdn.pixabay.com/photo/2017/01/30/13/56/pancakes-2020870_1280.jpg",
                "description": "A crêpe or crepe is a type of very thin pancake.",
            },
            {
                "title": "Pancake",
                "subtitle": "American",
                "image": "https://cdn.pixabay.com/photo/2018/07/10/21/23/pancake-3529653_1280.jpg",
                "description": "A pancake is a flat cake, often thin and round.",
            },
            {
                "title": "Waffle",
                "subtitle": "Belgian",
                "image": "https://cdn.pixabay.com/photo/2020/05/19/20/54/waffles-5192625_1280.jpg",
                "description": "A waffle is a patterned dish made from leavened batter or dough.",
            },
        ],
        multiple=True,
        searchable=True,
    )
]

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

# Print the result
print(result)

Parameters

Name	Description	Type	Default
label (required)	Text label displayed above the cards.	str	None
options (required)	List of card options to display. CardOption is a Dict with the following structure: TypedDict(\{"title": str, "subtitle": str, "image": str, "description": str, "topLeftExtra": str, "topRightExtra": str\})	List[CardOption]	None
key	Identifier for the widget, defaults to label if not provided.	str	None
required	Whether a card selection is required before proceeding.	bool	True
searchable	Whether cards can be filtered by search.	bool	False
multiple	Whether multiple cards can be selected.	bool	False
hint	Help text displayed below the input.	str	None
columns	Number of columns to display cards in.	int	2
full_width	Whether the cards should take up the full width of their container.	bool	False
layout	Layout style for the cards ('list' or 'grid').	str	'list'
disabled	Whether the input is non-interactive.	bool	False
min	Minimum number of cards that must be selected when multiple=True.	int	None
max	Maximum number of cards that can be selected when multiple=True.	int	None
errors	Pre-defined validation error messages to display.	Union[List[str], str]	None

State Value

Union[List[CardOption], CardOption, None]: The selected card option(s). CardOption is a Dict with the following structure: {"title": str, "subtitle": str, "image": str, "description": str, "topLeftExtra": str, "topRightExtra": str}

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