Checkbox Card
v0.0.10
v0.0.10StableComponentStatelessApache-2.0
Installation
mix mishka.ui.gen.component checkbox_card
Source
View Source
Overview of checkbox card component
Mishka Chelekom checkbox card component is an interactive form component in Phoenix LiveView designed for user input selection. The component supports various configurations including grid layouts, descriptions, and custom styling through props. Use it when you need grouped checkbox options with richer visual presentation than traditional checkbox inputs.
Overview of checkbox card component
Choose Options
Choose Platform
Familiarity with Phoenix LiveView
Base variant
Base variant
heex
<.checkbox_card name="cpu" id="cpu">
<:checkbox value="cpu-8" title="8-core CPU" description="32 GB RAM"></:checkbox>
<:checkbox value="cpu-6" title="6-core CPU" description="24 GB RAM"></:checkbox>
<:checkbox value="cpu-4" title="4-core CPU" description="16 GB RAM"></:checkbox>
</.checkbox_card>Default variant
Default variant
heex
<.checkbox_card name="" variant="default" color="natural">
<:checkbox value="starter" title="Starter Plan"></:checkbox>
</.checkbox_card>
<.checkbox_card name="" variant="default" color="primary">
<:checkbox value="starter" title="Starter Plan"></:checkbox>
</.checkbox_card>
<.checkbox_card name="" variant="default" color="secondary">
<:checkbox value="starter" title="Starter Plan"></:checkbox>
</.checkbox_card>
<.checkbox_card name="" variant="default" color="success">
<:checkbox value="starter" title="Starter Plan"></:checkbox>
</.checkbox_card>
<.checkbox_card name="" variant="default" color="danger">
<:checkbox value="starter" title="Starter Plan"></:checkbox>
</.checkbox_card>
<.checkbox_card name="" variant="default" color="warning">
<:checkbox value="starter" title="Starter Plan"></:checkbox>
</.checkbox_card>
<.checkbox_card name="" variant="default" color="misc">
<:checkbox value="starter" title="Starter Plan"></:checkbox>
</.checkbox_card>
<.checkbox_card name="" variant="default" color="dawn">
<:checkbox value="starter" title="Starter Plan"></:checkbox>
</.checkbox_card>
<.checkbox_card name="" variant="default" color="silver">
<:checkbox value="starter" title="Starter Plan"></:checkbox>
</.checkbox_card>
<.checkbox_card name="" variant="default" color="info">
<:checkbox value="starter" title="Starter Plan"></:checkbox>
</.checkbox_card>
<.checkbox_card name="" variant="default" color="dark">
<:checkbox value="starter" title="Starter Plan"></:checkbox>
</.checkbox_card>
<.checkbox_card name="" variant="default" color="white">
<:checkbox value="starter" title="Starter Plan"></:checkbox>
</.checkbox_card>Outline variant
Outline variant
heex
<.checkbox_card name="" variant="outline" color="natural">
<:checkbox value="starter" title="Starter Plan"></:checkbox>
</.checkbox_card>
<.checkbox_card name="" variant="outline" color="primary">
<:checkbox value="starter" title="Starter Plan"></:checkbox>
</.checkbox_card>
<.checkbox_card name="" variant="outline" color="secondary">
<:checkbox value="starter" title="Starter Plan"></:checkbox>
</.checkbox_card>
<.checkbox_card name="" variant="outline" color="success">
<:checkbox value="starter" title="Starter Plan"></:checkbox>
</.checkbox_card>
<.checkbox_card name="" variant="outline" color="danger">
<:checkbox value="starter" title="Starter Plan"></:checkbox>
</.checkbox_card>
<.checkbox_card name="" variant="outline" color="warning">
<:checkbox value="starter" title="Starter Plan"></:checkbox>
</.checkbox_card>
<.checkbox_card name="" variant="outline" color="misc">
<:checkbox value="starter" title="Starter Plan"></:checkbox>
</.checkbox_card>
<.checkbox_card name="" variant="outline" color="dawn">
<:checkbox value="starter" title="Starter Plan"></:checkbox>
</.checkbox_card>
<.checkbox_card name="" variant="outline" color="silver">
<:checkbox value="starter" title="Starter Plan"></:checkbox>
</.checkbox_card>
<.checkbox_card name="" variant="outline" color="info">
<:checkbox value="starter" title="Starter Plan"></:checkbox>
</.checkbox_card>Shadow variant
Shadow variant
heex
<.checkbox_card name="" variant="shadow" color="natural">
<:checkbox value="starter" title="Starter Plan"></:checkbox>
</.checkbox_card>
<.checkbox_card name="" variant="shadow" color="primary">
<:checkbox value="starter" title="Starter Plan"></:checkbox>
</.checkbox_card>
<.checkbox_card name="" variant="shadow" color="secondary">
<:checkbox value="starter" title="Starter Plan"></:checkbox>
</.checkbox_card>
<.checkbox_card name="" variant="shadow" color="success">
<:checkbox value="starter" title="Starter Plan"></:checkbox>
</.checkbox_card>
<.checkbox_card name="" variant="shadow" color="danger">
<:checkbox value="starter" title="Starter Plan"></:checkbox>
</.checkbox_card>
<.checkbox_card name="" variant="shadow" color="warning">
<:checkbox value="starter" title="Starter Plan"></:checkbox>
</.checkbox_card>
<.checkbox_card name="" variant="shadow" color="misc">
<:checkbox value="starter" title="Starter Plan"></:checkbox>
</.checkbox_card>
<.checkbox_card name="" variant="shadow" color="dawn">
<:checkbox value="starter" title="Starter Plan"></:checkbox>
</.checkbox_card>
<.checkbox_card name="" variant="shadow" color="silver">
<:checkbox value="starter" title="Starter Plan"></:checkbox>
</.checkbox_card>
<.checkbox_card name="" variant="shadow" color="info">
<:checkbox value="starter" title="Starter Plan"></:checkbox>
</.checkbox_card>Bordered variant
Bordered variant
heex
<.checkbox_card name="" variant="bordered" color="natural">
<:checkbox value="starter" title="Starter Plan"></:checkbox>
</.checkbox_card>
<.checkbox_card name="" variant="bordered" color="primary">
<:checkbox value="starter" title="Starter Plan"></:checkbox>
</.checkbox_card>
<.checkbox_card name="" variant="bordered" color="secondary">
<:checkbox value="starter" title="Starter Plan"></:checkbox>
</.checkbox_card>
<.checkbox_card name="" variant="bordered" color="success">
<:checkbox value="starter" title="Starter Plan"></:checkbox>
</.checkbox_card>
<.checkbox_card name="" variant="bordered" color="danger">
<:checkbox value="starter" title="Starter Plan"></:checkbox>
</.checkbox_card>
<.checkbox_card name="" variant="bordered" color="warning">
<:checkbox value="starter" title="Starter Plan"></:checkbox>
</.checkbox_card>
<.checkbox_card name="" variant="bordered" color="misc">
<:checkbox value="starter" title="Starter Plan"></:checkbox>
</.checkbox_card>
<.checkbox_card name="" variant="bordered" color="dawn">
<:checkbox value="starter" title="Starter Plan"></:checkbox>
</.checkbox_card>
<.checkbox_card name="" variant="bordered" color="silver">
<:checkbox value="starter" title="Starter Plan"></:checkbox>
</.checkbox_card>
<.checkbox_card name="" variant="bordered" color="info">
<:checkbox value="starter" title="Starter Plan"></:checkbox>
</.checkbox_card>
<.checkbox_card name="" variant="bordered" color="white">
<:checkbox value="starter" title="Starter Plan"></:checkbox>
</.checkbox_card>
<.checkbox_card name="" variant="bordered" color="dark">
<:checkbox value="starter" title="Starter Plan"></:checkbox>
</.checkbox_card>Label prop
You can use the label prop to add custom title text above the checkbox card group.
Label prop
heex
<.checkbox_card name="" label="This is label of this group">
<:checkbox value="starter" title="Starter Plan"></:checkbox>
</.checkbox_card>Description prop
The description prop allows you to add explanatory text below the label for additional context about the checkbox card group.
Description prop
Choose your hosting plan based on your website's needs and expected traffic volume
heex
<.checkbox_card name="" description="This is a description">
<:checkbox value="starter" title="Starter Plan"></:checkbox>
</.checkbox_card>Rounded prop
The rounded prop offers values like "extra_small", "small", "medium", "large", and "extra_large".
Rounded prop
heex
<.checkbox_card name="" rounded="extra_small">
<:checkbox value="starter" title="Starter Plan"></:checkbox>
</.checkbox_card>
<.checkbox_card name="" rounded="small">
<:checkbox value="starter" title="Starter Plan"></:checkbox>
</.checkbox_card>
<.checkbox_card name="" rounded="medium">
<:checkbox value="starter" title="Starter Plan"></:checkbox>
</.checkbox_card>
<.checkbox_card name="" rounded="large">
<:checkbox value="starter" title="Starter Plan"></:checkbox>
</.checkbox_card>
<.checkbox_card name="" rounded="extra_large">
<:checkbox value="starter" title="Starter Plan"></:checkbox>
</.checkbox_card>Border prop
The border prop offers values like "extra_small", "small", "medium", "large", and "extra_large".
Border prop
heex
<.checkbox_card name="" border="extra_small">
<:checkbox value="starter" title="Starter Plan"></:checkbox>
</.checkbox_card>
<.checkbox_card name="" border="small">
<:checkbox value="starter" title="Starter Plan"></:checkbox>
</.checkbox_card>
<.checkbox_card name="" border="medium">
<:checkbox value="starter" title="Starter Plan"></:checkbox>
</.checkbox_card>
<.checkbox_card name="" border="large">
<:checkbox value="starter" title="Starter Plan"></:checkbox>
</.checkbox_card>
<.checkbox_card name="" border="extra_large">
<:checkbox value="starter" title="Starter Plan"></:checkbox>
</.checkbox_card>Space prop
The space prop offers values such as "extra_small", "small", "medium", "large", and "extra_large". These values set the space between the label and description of the group and the cards, and the gap between the checkbox and the content inside each card.
Space prop
heex
<.checkbox_card name="" space="extra_small">
<:checkbox value="starter" title="Starter Plan"></:checkbox>
</.checkbox_card>
<.checkbox_card name="" space="small">
<:checkbox value="starter" title="Starter Plan"></:checkbox>
</.checkbox_card>
<.checkbox_card name="" space="medium">
<:checkbox value="starter" title="Starter Plan"></:checkbox>
</.checkbox_card>
<.checkbox_card name="" space="large">
<:checkbox value="starter" title="Starter Plan"></:checkbox>
</.checkbox_card>
<.checkbox_card name="" space="extra_large">
<:checkbox value="starter" title="Starter Plan"></:checkbox>
</.checkbox_card>Padding prop
The padding prop offers values such as "extra_small", "small", "medium", "large", and "extra_large". These values control the padding around the content inside the checkbox cards.
Padding prop
heex
<.checkbox_card name="" padding="extra_small">
<:checkbox value="starter" title="Starter Plan"></:checkbox>
</.checkbox_card>
<.checkbox_card name="" padding="small">
<:checkbox value="starter" title="Starter Plan"></:checkbox>
</.checkbox_card>
<.checkbox_card name="" padding="medium">
<:checkbox value="starter" title="Starter Plan"></:checkbox>
</.checkbox_card>
<.checkbox_card name="" padding="large">
<:checkbox value="starter" title="Starter Plan"></:checkbox>
</.checkbox_card>
<.checkbox_card name="" padding="extra_large">
<:checkbox value="starter" title="Starter Plan"></:checkbox>
</.checkbox_card>Size prop
The size prop offers values such as "extra_small", "small", "medium", "large", and "extra_large". These values set the text size of the cards, the size of the icons and the text size of the description.
Size prop
heex
<.checkbox_card name="" size="extra_small">
<:checkbox value="starter" title="Starter Plan"></:checkbox>
</.checkbox_card>
<.checkbox_card name="" size="small">
<:checkbox value="starter" title="Starter Plan"></:checkbox>
</.checkbox_card>
<.checkbox_card name="" size="medium">
<:checkbox value="starter" title="Starter Plan"></:checkbox>
</.checkbox_card>
<.checkbox_card name="" size="large">
<:checkbox value="starter" title="Starter Plan"></:checkbox>
</.checkbox_card>
<.checkbox_card name="" size="extra_large">
<:checkbox value="starter" title="Starter Plan"></:checkbox>
</.checkbox_card>Cols prop
The cols prop of the checkbox card component sets the number of columns of the grid that holds the cards. The values range from one to twelve. one shows the cards in a single column and two in two columns. From three on, the grid has two columns on small screens and the chosen number of columns from the md breakpoint. Any other string is used as the grid classes, for example cols="grid-cols-1 md:grid-cols-3".
Cols prop
heex
<.checkbox_card name="" cols="one">
<:checkbox value="starter" title="Starter Plan"></:checkbox>
</.checkbox_card>
<.checkbox_card name="" cols="two">
<:checkbox value="starter" title="Starter Plan"></:checkbox>
</.checkbox_card>
<.checkbox_card name="" cols="three">
<:checkbox value="starter" title="Starter Plan"></:checkbox>
</.checkbox_card>
<.checkbox_card name="" cols="four">
<:checkbox value="starter" title="Starter Plan"></:checkbox>
</.checkbox_card>
<.checkbox_card name="" cols="five">
<:checkbox value="starter" title="Starter Plan"></:checkbox>
</.checkbox_card>
<.checkbox_card name="" cols="six">
<:checkbox value="starter" title="Starter Plan"></:checkbox>
</.checkbox_card>
<.checkbox_card name="" cols="seven">
<:checkbox value="starter" title="Starter Plan"></:checkbox>
</.checkbox_card>
<.checkbox_card name="" cols="eight">
<:checkbox value="starter" title="Starter Plan"></:checkbox>
</.checkbox_card>
<.checkbox_card name="" cols="nine">
<:checkbox value="starter" title="Starter Plan"></:checkbox>
</.checkbox_card>
<.checkbox_card name="" cols="ten">
<:checkbox value="starter" title="Starter Plan"></:checkbox>
</.checkbox_card>
<.checkbox_card name="" cols="eleven">
<:checkbox value="starter" title="Starter Plan"></:checkbox>
</.checkbox_card>
<.checkbox_card name="" cols="twelve">
<:checkbox value="starter" title="Starter Plan"></:checkbox>
</.checkbox_card>Cols gap prop
The cols gap prop in the checkbox card component sets the space between the cards of the grid. It offers various values like extra_small, small, medium, large, and extra_large.
Cols gap prop
heex
<.checkbox_card name="" cols_gap="extra_small">
<:checkbox value="starter" title="Starter Plan"></:checkbox>
</.checkbox_card>
<.checkbox_card name="" cols_gap="small">
<:checkbox value="starter" title="Starter Plan"></:checkbox>
</.checkbox_card>
<.checkbox_card name="" cols_gap="medium">
<:checkbox value="starter" title="Starter Plan"></:checkbox>
</.checkbox_card>
<.checkbox_card name="" cols_gap="large">
<:checkbox value="starter" title="Starter Plan"></:checkbox>
</.checkbox_card>
<.checkbox_card name="" cols_gap="extra_large">
<:checkbox value="starter" title="Starter Plan"></:checkbox>
</.checkbox_card>Show checkbox prop
The show checkbox prop is a boolean value that controls the visibility of checkbox buttons within checkbox cards. When set to true, checkbox buttons are displayed; when false, they remain hidden.
Show checkbox prop
heex
<.checkbox_card name="" show_checkbox>
<:checkbox value="starter" title="Starter Plan"></:checkbox>
</.checkbox_card>Reverse prop
The reverse prop in checkbox cards allows you to change the direction and order of content within the card, letting you swap the position of elements like title, description, and checkbox buttons.
Reverse prop
heex
<.checkbox_card name="" show_checkbox reverse>
<:checkbox value="starter" title="Starter Plan"></:checkbox>
</.checkbox_card>checkbox slot
The checkbox slot defines one card of the group. Each slot needs a value. The optional attributes are checked, icon, title and description, with icon_class, title_class, description_class, content_class and card_content_class to style each part. The inner content of the slot is shown under the description.
checkbox slot
heex
<!--All the props of checkbox slot-->
<.checkbox_card name="" id="" class="text-center">
<:checkbox value="checked" checked></:checkbox>
<!--Use hero icons-->
<:checkbox value="icon" icon=""></:checkbox>
<:checkbox value="icon-class" icon_class=""></:checkbox>
<:checkbox value="title" title="This is a title" title_class=""></:checkbox>
<:checkbox value="content-class" content_class="text-lg"></:checkbox>
<:checkbox value="description" description="This is a description" description_class=""></:checkbox>
<:checkbox value="card-content-class" card_content_class=""></:checkbox>
<:checkbox value="custom">
<div class="flex flex-col justify-center items-center gap-2 text-md">
<.icon name="hero-home" class="size-5" />
<div>Custom content</div>
</div>
</:checkbox>
</.checkbox_card>Real world example
Real world example
Attributes
| Name | Type | Default | Values | Required | Description |
|---|---|---|---|---|---|
id
|
string
| — | — | No | A unique identifier is used to manage state and interaction |
class
|
any
| — | — | No | Custom CSS class for additional styling |
color
|
string
|
natural
|
basenaturalprimarysecondarysuccesswarningdangerinfosilvermiscdarkwhitedawn
| No | Determines color theme |
variant
|
string
|
base
|
defaultoutlineshadowborderedbase
| No | Determines variant theme |
border
|
string
|
extra_small
| — | No | Determines border style |
rounded
|
string
|
medium
|
extra_smallsmallmediumlargeextra_largenone
| No | Radius size |
padding
|
string
|
small
|
extra_smallsmallmediumlargeextra_large
| No | Padding size |
space
|
string
|
small
|
extra_smallsmallmediumlargeextra_largenone
| No | Determines space between elements |
cols
|
string
|
one
| — | No | Determines cols of elements |
cols_gap
|
string
|
small
| — | No | Determines gap between elements |
label_class
|
string
| — | — | No | Custom CSS class for the label styling |
reverse
|
boolean
|
false
| — | No | Switches the order of the element and label |
show_checkbox
|
boolean
|
false
| — | No | Boolean to show and hide checkbox |
label
|
string
| — | — | No | Specifies text for the label |
description
|
string
| — | — | No | Determines a short description |
error_icon_class
|
string
| — | — | No | Custom classes for error Icon |
content_wrapper_class
|
string
| — | — | No | Custom classes for content wrapper |
description_wrapper_class
|
string
| — | — | No | Custom classes for description wrapper |
description_class
|
string
| — | — | No | Custom classes for description |
checkbox_wrapper_class
|
string
| — | — | No | Custom classes for checkbox main wrapper |
size
|
string
|
small
|
extra_smallsmallmediumlargeextra_large
| No | Determines the overall size of the elements, including padding, font size, and other items |
error_icon
|
string
| — | — | No | Icon to be displayed alongside error messages |
errors
|
list
|
[]
| — | No | List of error messages to be displayed |
name
|
any
| — | — | No | Name of input |
value
|
any
| — | — | No | Value of input |
rest
|
global
| — | — | No | Global attributes can define defaults which are merged with attributes provided by the caller |
field
|
Phoenix.HTML.FormField
| — | — | No | a form field struct retrieved from the form |
Slots
| Name | Required | Description |
|---|---|---|
checkbox
| Yes | — |
inner_block
| No | — |
Attributes of the checkbox slot
| Name | Type | Default | Values | Required | Description |
|---|---|---|---|---|---|
value
|
string
| — | — | Yes | — |
checked
|
boolean
| — | — | No | — |
icon
|
string
| — | — | No | Icon displayed alongside of a checkbox |
icon_class
|
string
| — | — | No | Determines custom class for the icon |
content_class
|
string
| — | — | No | Determines custom class for the content |
description_class
|
string
| — | — | No | Determines custom class for the description |
title_class
|
string
| — | — | No | Determines custom class for the title |
card_content_class
|
string
| — | — | No | Determines custom class for the card content |
title
|
string
| — | — | No | — |
description
|
string
| — | — | No | — |
Options
Each option takes one or more of its values, separated by commas.
| Option | Values |
|---|---|
--variant
|
defaultoutlineshadowborderedbase
|
--color
|
basenaturalprimarysecondarysuccesswarningdangerinfosilvermiscdarkwhitedawn
|
--size
|
extra_smallsmallmediumlargeextra_large
|
--space
|
extra_smallsmallmediumlargeextra_largenone
|
--padding
|
extra_smallsmallmediumlargeextra_large
|
--rounded
|
extra_smallsmallmediumlargeextra_largenone
|
--module
| A module name of your own |
What it generates
Functions
checkbox_card
Helpers
checkbox_card_check/3
Generated with it
icon
Command
mix mishka.ui.gen.component checkbox_card