Form Radio card - Chelekom Phoenix & LiveView component

Overview of Radio card component

Mishka Chelekom Radio 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 radio options with richer visual presentation than traditional radio inputs.

Base variant

8-core CPU

32 GB RAM

6-core CPU

24 GB RAM

4-core CPU

16 GB RAM

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

Default variant

8-core CPU

32 GB RAM

6-core CPU

24 GB RAM

4-core CPU

16 GB RAM

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

Outline variant

8-core CPU

32 GB RAM

6-core CPU

24 GB RAM

4-core CPU

16 GB RAM

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

Shadow variant

8-core CPU

32 GB RAM

6-core CPU

24 GB RAM

4-core CPU

16 GB RAM

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

Bordered variant

8-core CPU

32 GB RAM

6-core CPU

24 GB RAM

4-core CPU

16 GB RAM

<.radio_card name="" variant="bordered" color="natural"></.radio_card>
<.radio_card name="" variant="bordered" color="primary"></.radio_card>
<.radio_card name="" variant="bordered" color="secondary"></.radio_card>
<.radio_card name="" variant="bordered" color="success"></.radio_card>
<.radio_card name="" variant="bordered" color="danger"></.radio_card>
<.radio_card name="" variant="bordered" color="warning"></.radio_card>
<.radio_card name="" variant="bordered" color="misc"></.radio_card>
<.radio_card name="" variant="bordered" color="dawn"></.radio_card>
<.radio_card name="" variant="bordered" color="silver"></.radio_card>
<.radio_card name="" variant="bordered" color="info"></.radio_card>
<.radio_card name="" variant="bordered" color="white"></.radio_card>
<.radio_card name="" variant="bordered" color="dark"></.radio_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

<.radio_card name="" rounded="extra_small" ></.radio_card>
<.radio_card name="" rounded="small" ></.radio_card>
<.radio_card name="" rounded="medium" ></.radio_card>
<.radio_card name="" rounded="large" ></.radio_card>
<.radio_card name="" rounded="extra_large" ></.radio_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

<.radio_card name="" border="extra_small" ></.radio_card>
<.radio_card name="" border="small" ></.radio_card>
<.radio_card name="" border="medium" ></.radio_card>
<.radio_card name="" border="large" ></.radio_card>
<.radio_card name="" border="extra_large" ></.radio_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 radio cards.

Starter Plan

Perfect for personal blogs

Pro Plan

Ideal for small businesses

Premium Plan

Best for large enterprises

<.radio_card name="" space="extra_small" ></.radio_card>
<.radio_card name="" space="small" ></.radio_card>
<.radio_card name="" space="medium" ></.radio_card>
<.radio_card name="" space="large" ></.radio_card>
<.radio_card name="" space="extra_large" ></.radio_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 radio cards.

Starter Plan

Perfect for personal blogs

Pro Plan

Ideal for small businesses

Premium Plan

Best for large enterprises

<.radio_card name="" padding="extra_small" ></.radio_card>
<.radio_card name="" padding="small" ></.radio_card>
<.radio_card name="" padding="medium" ></.radio_card>
<.radio_card name="" padding="large" ></.radio_card>
<.radio_card name="" padding="extra_large" ></.radio_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 radio cards.

Starter Plan

Perfect for personal blogs

Pro Plan

Ideal for small businesses

Premium Plan

Best for large enterprises

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

Cols prop

The cols prop in the Phoenix radio 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

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

Cols gap prop

The cols gap prop in the radio 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

<.radio_card cols_gap="extra_small"></.radio_card>
<.radio_card cols_gap="small"></.radio_card>
<.radio_card cols_gap="medium"></.radio_card>
<.radio_card cols_gap="large"></.radio_card>
<.radio_card cols_gap="extra_large"></.radio_card>

Show radio prop

The show radio prop is a boolean value that controls the visibility of radio buttons within radio cards. When set to true, radio buttons are displayed; when false, they remain hidden.

Starter Plan

Pro Plan

Premium Plan

<.radio_card show_radio></.radio_card>

Reverse prop

The reverse prop in radio 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 radio buttons.

Starter Plan

Pro Plan

Premium Plan

<.radio_card show_radio reverse></.radio_card>

Radio slot

The radio slot in the radio card component allows you to define individual radio options with their associated content. Each radio 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 radio option.

Package Storage

Office Space

Global Network

Custom Settings

Developer Tools

Access development tools and APIs for building applications

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

Real world example

Full Name

Select your area of expertise

Frontend

Backend

Designer

What is your hobbies?

Reading

Programming

Photography

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").
label_class	string	No	Custom CSS class for the label styling.
reverse	boolean	No	Switches the order of the element and label (default is false).
show_radio	boolean	No	Boolean to show and hide radio (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.
radio	slot	Yes	The radio input slot.
value	string	Yes	Value of the radio slot.
checked	boolean	No	Specifies if the radio slot is checked by default.
icon	string	No	Icon displayed alongside the radio slot.
icon_class	string	No	Custom class for the radio slot icon.
content_class	string	No	Custom class for the radio slot content.
title	string	No	Title of the radio slot.
description	string	No	Description of the radio slot.

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	radio_card	Yes
`--module`	string	Something	NO

Mishka

Radio Card

Overview of Radio card component

Choose a Server

Filter

Familiarity with Phoenix LiveView

Base variant

Default variant

Outline variant

Shadow variant

Bordered variant

Rounded prop

Border prop

Space prop

Padding prop

Size prop

Cols prop

Cols gap prop

Show radio prop

Reverse prop

Radio slot

Real world example

Full Name

Select your area of expertise

What is your hobbies?

Do you accept terms and conditions?

Radio Field Component Props

RadioCard CLI Arguments