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. | 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 |