Skip to main content

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

NameDescriptionTypeDefault
label (required)Text label displayed above the cards.strNone
options (required)List of card options to display.List[CardOption]None
keyIdentifier for the widget, defaults to label if not provided.strNone
requiredWhether a card selection is required before proceeding.boolTrue
searchableWhether cards can be filtered by search.boolFalse
multipleWhether multiple cards can be selected.boolFalse
hintHelp text displayed below the input.strNone
columnsNumber of columns to display cards in.int2
full_widthWhether the cards should take up the full width of their container.boolFalse
layoutLayout style for the cards ('list' or 'grid').str'list'
disabledWhether the input is non-interactive.boolFalse
minMinimum number of cards that must be selected when multiple=True.intNone
maxMaximum number of cards that can be selected when multiple=True.intNone
errorsPre-defined validation error messages to display.Union[List[str], str]None