Checkbox Card

New version v0.0.8 🚀

Form checkbox card component for Phoenix LiveView forms. Features customizable styles, multiple variants, responsive design, and supports both single and group selections.

Installation:

mix mishka.ui.gen.component checkbox_card

Source: View Source

Package: Mishka Chelekom

Tags:

Component Stateless

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.

Base variant

8-core CPU

32 GB RAM

6-core CPU

24 GB RAM

4-core CPU

16 GB RAM

<.checkbox_card name="id="uniqu_naem"" id="uniqu_id">
  <:checkbox value="" title="8-core CPU" description="32 GB RAM"></:checkbox>
  <:checkbox value="" title="6-core CPU" description="24 GB RAM"></:checkbox>
  <:checkbox value="" title="4-core CPU" description="16 GB RAM"></:checkbox>
</.checkbox_card>

Default variant

8-core CPU

32 GB RAM

6-core CPU

24 GB RAM

4-core CPU

16 GB RAM

<.checkbox_card name="" variant="default" color="natural"></.checkbox_card>
<.checkbox_card name="" variant="default" color="primary"></.checkbox_card>
<.checkbox_card name="" variant="default" color="secondary"></.checkbox_card>
<.checkbox_card name="" variant="default" color="success"></.checkbox_card>
<.checkbox_card name="" variant="default" color="danger"></.checkbox_card>
<.checkbox_card name="" variant="default" color="warning"></.checkbox_card>
<.checkbox_card name="" variant="default" color="misc"></.checkbox_card>
<.checkbox_card name="" variant="default" color="dawn"></.checkbox_card>
<.checkbox_card name="" variant="default" color="silver"></.checkbox_card>
<.checkbox_card name="" variant="default" color="info"></.checkbox_card>
<.checkbox_card name="" variant="default" color="dark"></.checkbox_card>
<.checkbox_card name="" variant="default" color="white"></.checkbox_card>

Outline variant

8-core CPU

32 GB RAM

6-core CPU

24 GB RAM

4-core CPU

16 GB RAM

<.checkbox_card name="" variant="outline" color="natural"></.checkbox_card>
<.checkbox_card name="" variant="outline" color="primary"></.checkbox_card>
<.checkbox_card name="" variant="outline" color="secondary"></.checkbox_card>
<.checkbox_card name="" variant="outline" color="success"></.checkbox_card>
<.checkbox_card name="" variant="outline" color="danger"></.checkbox_card>
<.checkbox_card name="" variant="outline" color="warning"></.checkbox_card>
<.checkbox_card name="" variant="outline" color="misc"></.checkbox_card>
<.checkbox_card name="" variant="outline" color="dawn"></.checkbox_card>
<.checkbox_card name="" variant="outline" color="silver"></.checkbox_card>
<.checkbox_card name="" variant="outline" color="info"></.checkbox_card>

Shadow variant

8-core CPU

32 GB RAM

6-core CPU

24 GB RAM

4-core CPU

16 GB RAM

<.checkbox_card name="" variant="shadow" color="natural"></.checkbox_card>
<.checkbox_card name="" variant="shadow" color="primary"></.checkbox_card>
<.checkbox_card name="" variant="shadow" color="secondary"></.checkbox_card>
<.checkbox_card name="" variant="shadow" color="success"></.checkbox_card>
<.checkbox_card name="" variant="shadow" color="danger"></.checkbox_card>
<.checkbox_card name="" variant="shadow" color="warning"></.checkbox_card>
<.checkbox_card name="" variant="shadow" color="misc"></.checkbox_card>
<.checkbox_card name="" variant="shadow" color="dawn"></.checkbox_card>
<.checkbox_card name="" variant="shadow" color="silver"></.checkbox_card>
<.checkbox_card name="" variant="shadow" color="info"></.checkbox_card>

Bordered variant

8-core CPU

32 GB RAM

6-core CPU

24 GB RAM

4-core CPU

16 GB RAM

<.checkbox_card name="" variant="bordered" color="natural"></.checkbox_card>
<.checkbox_card name="" variant="bordered" color="primary"></.checkbox_card>
<.checkbox_card name="" variant="bordered" color="secondary"></.checkbox_card>
<.checkbox_card name="" variant="bordered" color="success"></.checkbox_card>
<.checkbox_card name="" variant="bordered" color="danger"></.checkbox_card>
<.checkbox_card name="" variant="bordered" color="warning"></.checkbox_card>
<.checkbox_card name="" variant="bordered" color="misc"></.checkbox_card>
<.checkbox_card name="" variant="bordered" color="dawn"></.checkbox_card>
<.checkbox_card name="" variant="bordered" color="silver"></.checkbox_card>
<.checkbox_card name="" variant="bordered" color="info"></.checkbox_card>
<.checkbox_card name="" variant="bordered" color="white"></.checkbox_card>
<.checkbox_card name="" variant="bordered" color="dark"></.checkbox_card>

Label prop

You can use the label prop to add custom title text above the checkbox card group.

Select Your Hosting Plan

Starter Plan

Perfect for personal blogs

Pro Plan

Ideal for small businesses

Premium Plan

Best for large enterprises

<.checkbox_card label="This is label of this group"></.checkbox_card>

Description prop

The description prop allows you to add explanatory text below the label for additional context about the checkbox card group.

Choose your hosting plan based on your website's needs and expected traffic volume

Starter Plan

Perfect for personal blogs

Pro Plan

Ideal for small businesses

Premium Plan

Best for large enterprises

<.checkbox_card description="This is a description"></.checkbox_card>

Rounded prop

The rounded prop offers values like "extra_small", "small", "medium", "large", and "extra_large".

Starter Plan

Perfect for personal blogs

Pro Plan

Ideal for small businesses

Premium Plan

Best for large enterprises

<.checkbox_card name="" rounded="extra_small" ></.checkbox_card>
<.checkbox_card name="" rounded="small" ></.checkbox_card>
<.checkbox_card name="" rounded="medium" ></.checkbox_card>
<.checkbox_card name="" rounded="large" ></.checkbox_card>
<.checkbox_card name="" rounded="extra_large" ></.checkbox_card>

Border prop

The border prop offers values like "extra_small", "small", "medium", "large", and "extra_large".

Starter Plan

Perfect for personal blogs

Pro Plan

Ideal for small businesses

Premium Plan

Best for large enterprises

<.checkbox_card name="" border="extra_small" ></.checkbox_card>
<.checkbox_card name="" border="small" ></.checkbox_card>
<.checkbox_card name="" border="medium" ></.checkbox_card>
<.checkbox_card name="" border="large" ></.checkbox_card>
<.checkbox_card name="" border="extra_large" ></.checkbox_card>

Space prop

The space prop offers values such as "extra_small", "small", "medium", "large", and "extra_large". These values control the vertical spacing between elements within the checkbox cards.

Starter Plan

Perfect for personal blogs

Pro Plan

Ideal for small businesses

Premium Plan

Best for large enterprises

<.checkbox_card name="" space="extra_small" ></.checkbox_card>
<.checkbox_card name="" space="small" ></.checkbox_card>
<.checkbox_card name="" space="medium" ></.checkbox_card>
<.checkbox_card name="" space="large" ></.checkbox_card>
<.checkbox_card name="" space="extra_large" ></.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.

Starter Plan

Perfect for personal blogs

Pro Plan

Ideal for small businesses

Premium Plan

Best for large enterprises

<.checkbox_card name="" padding="extra_small" ></.checkbox_card>
<.checkbox_card name="" padding="small" ></.checkbox_card>
<.checkbox_card name="" padding="medium" ></.checkbox_card>
<.checkbox_card name="" padding="large" ></.checkbox_card>
<.checkbox_card name="" padding="extra_large" ></.checkbox_card>

Size prop

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

Starter Plan

Perfect for personal blogs

Pro Plan

Ideal for small businesses

Premium Plan

Best for large enterprises

<.checkbox_card name="" size="extra_small" ></.checkbox_card>
<.checkbox_card name="" size="small" ></.checkbox_card>
<.checkbox_card name="" size="medium" ></.checkbox_card>
<.checkbox_card name="" size="large" ></.checkbox_card>
<.checkbox_card name="" size="extra_large" ></.checkbox_card>

Cols prop

The cols prop in the Phoenix checkbox card component allows you to define the number of columns used to display media items. The values range from one to twelve, giving you flexibility to control how many columns appear in the grid. For example, setting it to one will display all items in a single column, while two will divide the items into two columns. As the number increases, more columns are introduced, such as three, four, or even up to twelve. When necessary, the columns can also adapt for different screen breakpoints, with values like md allowing for a responsive design that adjusts according to screen width.

Starter Plan

Pro Plan

Premium Plan

<.checkbox_card cols="one"></.checkbox_card>
<.checkbox_card cols="two"></.checkbox_card>
<.checkbox_card cols="three"></.checkbox_card>
<.checkbox_card cols="four"></.checkbox_card>
<.checkbox_card cols="five"></.checkbox_card>
<.checkbox_card cols="six"></.checkbox_card>
<.checkbox_card cols="seven"></.checkbox_card>
<.checkbox_card cols="eight"></.checkbox_card>
<.checkbox_card cols="nine"></.checkbox_card>
<.checkbox_card cols="ten"></.checkbox_card>
<.checkbox_card cols="eleven"></.checkbox_card>
<.checkbox_card cols="twelve"></.checkbox_card>

Cols gap prop

The cols gap prop in the checkbox card component controls the spacing between media items within the grid layout. It offers various values like extra_small, small, medium, large, and extra_large.

Starter Plan

Pro Plan

Premium Plan

<.checkbox_card cols_gap="extra_small"></.checkbox_card>
<.checkbox_card cols_gap="small"></.checkbox_card>
<.checkbox_card cols_gap="medium"></.checkbox_card>
<.checkbox_card cols_gap="large"></.checkbox_card>
<.checkbox_card cols_gap="extra_large"></.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.

Starter Plan

Pro Plan

Premium Plan

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

Starter Plan

Pro Plan

Premium Plan

<.checkbox_card show_checkbox reverse></.checkbox_card>

checkbox slot

The checkbox slot in the checkbox card component allows you to define individual checkbox options with their associated content. Each checkbox slot requires a value and can include optional attributes like an icon, title, and description. The slot supports customization through icon_class, icon, value, checked, title, description and content_class properties for fine-tuned styling of each checkbox option.

Package Storage

Office Space

Global Network

Custom Settings

Developer Tools

Access development tools and APIs for building applications

<!--All the props of checkbox slot-->
<.checkbox_card name="" id="" class="text-center">
  <:checkbox value="" checked></:checkbox>
  <!--Use hero icons-->
  <:checkbox icon=""></:checkbox>
  <:checkbox icon_class=""></:checkbox>
  <:checkbox title="This is a title"></:checkbox>
  <:checkbox content_class="text-lg"></:checkbox>
  <:checkbox description="This is a description"></:checkbox>
  <:checkbox>
    <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

Full Name

Select your area of expertise

Frontend

Backend

Designer

What is your hobbies?

Reading

Programming

Photography

Do you accept terms and conditions?

checkbox Field Component Props

Name	Type	Required	Description
id	string	No	A unique identifier used to manage state and interaction.
class	string	No	Custom CSS class for additional styling.
color	string	No	Determines color theme (default is "natural").
variant	string	No	Determines variant theme (default is "base").
border	string	No	Determines border style (default is "extra_small").
rounded	string	No	Radius size (default is "medium").
padding	string	No	Padding size (default is "small").
space	string	No	Space between elements (default is "small").
cols	string	No	Determines columns of elements (default is "one").
cols_gap	string	No	Determines gap between elements (default is "small").
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.
reverse	boolean	No	Switches the order of the element and label (default is false).
show_checkbox	boolean	No	Boolean to show and hide checkbox (default is false).
size	string	No	Determines the overall size of the elements, including padding, font size, and other items (default is "small").
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 the input.
value	any	No	Value of the input.
field	Phoenix.HTML.FormField	No	A form field struct retrieved from the form.
checkbox	slot	Yes	The checkbox input slot.
value	string	Yes	Value of the checkbox slot.
checked	boolean	No	Specifies if the checkbox slot is checked by default.
icon	string	No	Icon displayed alongside the checkbox slot.
icon_class	string	No	Custom class for the checkbox slot icon.
description_class	string	No	Determines custom class for the description of checkbox slot
title_class	string	No	Determines custom class for the title of checkbox slot
card_content_class	string	No	Determines custom class for the card content of checkbox slot
content_class	string	No	Custom class for the checkbox slot content.
title	string	No	Title of the checkbox slot.
description	string	No	Description of the checkbox slot.

CheckboxCard CLI Arguments

Name	Type	Options	Recommended?
`--variant`	string	default - outline - shadow - bordered - base	Yes
`--color`	string	base - natural - primary - secondary - success - warning - danger - info - silver - misc - dark - white - dawn	Yes
`--size`	string	extra_small - small - medium - large - extra_large	Yes
`--space`	string	extra_small - small - medium - large - extra_large - none	Yes
`--padding`	string	extra_small - small - medium - large - extra_large	Yes
`--rounded`	string	extra_small - small - medium - large - extra_large	Yes
`--only`	string	checkbox_card	Yes
`--module`	string	Something	NO

Mishka

Checkbox Card

Overview of checkbox card component

Choose Options

Choose Platform

Familiarity with Phoenix LiveView

Base variant

Default variant

Outline variant

Shadow variant

Bordered variant

Label prop

Description prop

Rounded prop

Border prop

Space prop

Padding prop

Size prop

Cols prop

Cols gap prop

Show checkbox prop

Reverse prop

checkbox slot

Real world example

Full Name

Select your area of expertise

What is your hobbies?

Do you accept terms and conditions?

checkbox Field Component Props

CheckboxCard CLI Arguments