Radio Card
v0.0.10
v0.0.10StableComponentStatelessApache-2.0
Installation
mix mishka.ui.gen.component radio_card
Source
View Source
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.
Overview of Radio card component
Choose a Server
Filter
Familiarity with Phoenix LiveView
Base variant
Base variant
heex
<.radio_card name="cpu" id="cpu">
<:radio value="cpu-8" title="8-core CPU" description="32 GB RAM"></:radio>
<:radio value="cpu-6" title="6-core CPU" description="24 GB RAM"></:radio>
<:radio value="cpu-4" title="4-core CPU" description="16 GB RAM"></:radio>
</.radio_card>Default variant
Default variant
heex
<.radio_card name="" variant="default" color="natural">
<:radio value="starter" title="Starter Plan"></:radio>
</.radio_card>
<.radio_card name="" variant="default" color="primary">
<:radio value="starter" title="Starter Plan"></:radio>
</.radio_card>
<.radio_card name="" variant="default" color="secondary">
<:radio value="starter" title="Starter Plan"></:radio>
</.radio_card>
<.radio_card name="" variant="default" color="success">
<:radio value="starter" title="Starter Plan"></:radio>
</.radio_card>
<.radio_card name="" variant="default" color="danger">
<:radio value="starter" title="Starter Plan"></:radio>
</.radio_card>
<.radio_card name="" variant="default" color="warning">
<:radio value="starter" title="Starter Plan"></:radio>
</.radio_card>
<.radio_card name="" variant="default" color="misc">
<:radio value="starter" title="Starter Plan"></:radio>
</.radio_card>
<.radio_card name="" variant="default" color="dawn">
<:radio value="starter" title="Starter Plan"></:radio>
</.radio_card>
<.radio_card name="" variant="default" color="silver">
<:radio value="starter" title="Starter Plan"></:radio>
</.radio_card>
<.radio_card name="" variant="default" color="info">
<:radio value="starter" title="Starter Plan"></:radio>
</.radio_card>
<.radio_card name="" variant="default" color="dark">
<:radio value="starter" title="Starter Plan"></:radio>
</.radio_card>
<.radio_card name="" variant="default" color="white">
<:radio value="starter" title="Starter Plan"></:radio>
</.radio_card>Outline variant
Outline variant
heex
<.radio_card name="" variant="outline" color="natural">
<:radio value="starter" title="Starter Plan"></:radio>
</.radio_card>
<.radio_card name="" variant="outline" color="primary">
<:radio value="starter" title="Starter Plan"></:radio>
</.radio_card>
<.radio_card name="" variant="outline" color="secondary">
<:radio value="starter" title="Starter Plan"></:radio>
</.radio_card>
<.radio_card name="" variant="outline" color="success">
<:radio value="starter" title="Starter Plan"></:radio>
</.radio_card>
<.radio_card name="" variant="outline" color="danger">
<:radio value="starter" title="Starter Plan"></:radio>
</.radio_card>
<.radio_card name="" variant="outline" color="warning">
<:radio value="starter" title="Starter Plan"></:radio>
</.radio_card>
<.radio_card name="" variant="outline" color="misc">
<:radio value="starter" title="Starter Plan"></:radio>
</.radio_card>
<.radio_card name="" variant="outline" color="dawn">
<:radio value="starter" title="Starter Plan"></:radio>
</.radio_card>
<.radio_card name="" variant="outline" color="silver">
<:radio value="starter" title="Starter Plan"></:radio>
</.radio_card>
<.radio_card name="" variant="outline" color="info">
<:radio value="starter" title="Starter Plan"></:radio>
</.radio_card>Shadow variant
Shadow variant
heex
<.radio_card name="" variant="shadow" color="natural">
<:radio value="starter" title="Starter Plan"></:radio>
</.radio_card>
<.radio_card name="" variant="shadow" color="primary">
<:radio value="starter" title="Starter Plan"></:radio>
</.radio_card>
<.radio_card name="" variant="shadow" color="secondary">
<:radio value="starter" title="Starter Plan"></:radio>
</.radio_card>
<.radio_card name="" variant="shadow" color="success">
<:radio value="starter" title="Starter Plan"></:radio>
</.radio_card>
<.radio_card name="" variant="shadow" color="danger">
<:radio value="starter" title="Starter Plan"></:radio>
</.radio_card>
<.radio_card name="" variant="shadow" color="warning">
<:radio value="starter" title="Starter Plan"></:radio>
</.radio_card>
<.radio_card name="" variant="shadow" color="misc">
<:radio value="starter" title="Starter Plan"></:radio>
</.radio_card>
<.radio_card name="" variant="shadow" color="dawn">
<:radio value="starter" title="Starter Plan"></:radio>
</.radio_card>
<.radio_card name="" variant="shadow" color="silver">
<:radio value="starter" title="Starter Plan"></:radio>
</.radio_card>
<.radio_card name="" variant="shadow" color="info">
<:radio value="starter" title="Starter Plan"></:radio>
</.radio_card>Bordered variant
Bordered variant
heex
<.radio_card name="" variant="bordered" color="natural">
<:radio value="starter" title="Starter Plan"></:radio>
</.radio_card>
<.radio_card name="" variant="bordered" color="primary">
<:radio value="starter" title="Starter Plan"></:radio>
</.radio_card>
<.radio_card name="" variant="bordered" color="secondary">
<:radio value="starter" title="Starter Plan"></:radio>
</.radio_card>
<.radio_card name="" variant="bordered" color="success">
<:radio value="starter" title="Starter Plan"></:radio>
</.radio_card>
<.radio_card name="" variant="bordered" color="danger">
<:radio value="starter" title="Starter Plan"></:radio>
</.radio_card>
<.radio_card name="" variant="bordered" color="warning">
<:radio value="starter" title="Starter Plan"></:radio>
</.radio_card>
<.radio_card name="" variant="bordered" color="misc">
<:radio value="starter" title="Starter Plan"></:radio>
</.radio_card>
<.radio_card name="" variant="bordered" color="dawn">
<:radio value="starter" title="Starter Plan"></:radio>
</.radio_card>
<.radio_card name="" variant="bordered" color="silver">
<:radio value="starter" title="Starter Plan"></:radio>
</.radio_card>
<.radio_card name="" variant="bordered" color="info">
<:radio value="starter" title="Starter Plan"></:radio>
</.radio_card>
<.radio_card name="" variant="bordered" color="white">
<:radio value="starter" title="Starter Plan"></:radio>
</.radio_card>
<.radio_card name="" variant="bordered" color="dark">
<:radio value="starter" title="Starter Plan"></:radio>
</.radio_card>Label prop
You can use the label prop to add custom title text above the radio card group.
Label prop
heex
<.radio_card name="" label="This is label of this group">
<:radio value="starter" title="Starter Plan"></:radio>
</.radio_card>Description prop
The description prop allows you to add explanatory text below the label for additional context about the radio card group.
Description prop
Choose your hosting plan based on your website's needs and expected traffic volume
heex
<.radio_card name="" description="This is a description">
<:radio value="starter" title="Starter Plan"></:radio>
</.radio_card>Rounded prop
The rounded prop offers values like "extra_small", "small", "medium", "large", and "extra_large".
Rounded prop
heex
<.radio_card name="" rounded="extra_small">
<:radio value="starter" title="Starter Plan"></:radio>
</.radio_card>
<.radio_card name="" rounded="small">
<:radio value="starter" title="Starter Plan"></:radio>
</.radio_card>
<.radio_card name="" rounded="medium">
<:radio value="starter" title="Starter Plan"></:radio>
</.radio_card>
<.radio_card name="" rounded="large">
<:radio value="starter" title="Starter Plan"></:radio>
</.radio_card>
<.radio_card name="" rounded="extra_large">
<:radio value="starter" title="Starter Plan"></:radio>
</.radio_card>Border prop
The border prop offers values like "extra_small", "small", "medium", "large", and "extra_large".
Border prop
heex
<.radio_card name="" border="extra_small">
<:radio value="starter" title="Starter Plan"></:radio>
</.radio_card>
<.radio_card name="" border="small">
<:radio value="starter" title="Starter Plan"></:radio>
</.radio_card>
<.radio_card name="" border="medium">
<:radio value="starter" title="Starter Plan"></:radio>
</.radio_card>
<.radio_card name="" border="large">
<:radio value="starter" title="Starter Plan"></:radio>
</.radio_card>
<.radio_card name="" border="extra_large">
<:radio value="starter" title="Starter Plan"></:radio>
</.radio_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 radio and the content inside each card.
Space prop
heex
<.radio_card name="" space="extra_small">
<:radio value="starter" title="Starter Plan"></:radio>
</.radio_card>
<.radio_card name="" space="small">
<:radio value="starter" title="Starter Plan"></:radio>
</.radio_card>
<.radio_card name="" space="medium">
<:radio value="starter" title="Starter Plan"></:radio>
</.radio_card>
<.radio_card name="" space="large">
<:radio value="starter" title="Starter Plan"></:radio>
</.radio_card>
<.radio_card name="" space="extra_large">
<:radio value="starter" title="Starter Plan"></:radio>
</.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.
Padding prop
heex
<.radio_card name="" padding="extra_small">
<:radio value="starter" title="Starter Plan"></:radio>
</.radio_card>
<.radio_card name="" padding="small">
<:radio value="starter" title="Starter Plan"></:radio>
</.radio_card>
<.radio_card name="" padding="medium">
<:radio value="starter" title="Starter Plan"></:radio>
</.radio_card>
<.radio_card name="" padding="large">
<:radio value="starter" title="Starter Plan"></:radio>
</.radio_card>
<.radio_card name="" padding="extra_large">
<:radio value="starter" title="Starter Plan"></:radio>
</.radio_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
<.radio_card name="" size="extra_small">
<:radio value="starter" title="Starter Plan"></:radio>
</.radio_card>
<.radio_card name="" size="small">
<:radio value="starter" title="Starter Plan"></:radio>
</.radio_card>
<.radio_card name="" size="medium">
<:radio value="starter" title="Starter Plan"></:radio>
</.radio_card>
<.radio_card name="" size="large">
<:radio value="starter" title="Starter Plan"></:radio>
</.radio_card>
<.radio_card name="" size="extra_large">
<:radio value="starter" title="Starter Plan"></:radio>
</.radio_card>Cols prop
The cols prop of the radio 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
<.radio_card name="" cols="one">
<:radio value="starter" title="Starter Plan"></:radio>
</.radio_card>
<.radio_card name="" cols="two">
<:radio value="starter" title="Starter Plan"></:radio>
</.radio_card>
<.radio_card name="" cols="three">
<:radio value="starter" title="Starter Plan"></:radio>
</.radio_card>
<.radio_card name="" cols="four">
<:radio value="starter" title="Starter Plan"></:radio>
</.radio_card>
<.radio_card name="" cols="five">
<:radio value="starter" title="Starter Plan"></:radio>
</.radio_card>
<.radio_card name="" cols="six">
<:radio value="starter" title="Starter Plan"></:radio>
</.radio_card>
<.radio_card name="" cols="seven">
<:radio value="starter" title="Starter Plan"></:radio>
</.radio_card>
<.radio_card name="" cols="eight">
<:radio value="starter" title="Starter Plan"></:radio>
</.radio_card>
<.radio_card name="" cols="nine">
<:radio value="starter" title="Starter Plan"></:radio>
</.radio_card>
<.radio_card name="" cols="ten">
<:radio value="starter" title="Starter Plan"></:radio>
</.radio_card>
<.radio_card name="" cols="eleven">
<:radio value="starter" title="Starter Plan"></:radio>
</.radio_card>
<.radio_card name="" cols="twelve">
<:radio value="starter" title="Starter Plan"></:radio>
</.radio_card>Cols gap prop
The cols gap prop in the radio 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
<.radio_card name="" cols_gap="extra_small">
<:radio value="starter" title="Starter Plan"></:radio>
</.radio_card>
<.radio_card name="" cols_gap="small">
<:radio value="starter" title="Starter Plan"></:radio>
</.radio_card>
<.radio_card name="" cols_gap="medium">
<:radio value="starter" title="Starter Plan"></:radio>
</.radio_card>
<.radio_card name="" cols_gap="large">
<:radio value="starter" title="Starter Plan"></:radio>
</.radio_card>
<.radio_card name="" cols_gap="extra_large">
<:radio value="starter" title="Starter Plan"></:radio>
</.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.
Show radio prop
heex
<.radio_card name="" show_radio>
<:radio value="starter" title="Starter Plan"></: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.
Reverse prop
heex
<.radio_card name="" show_radio reverse>
<:radio value="starter" title="Starter Plan"></:radio>
</.radio_card>Radio slot
The radio 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_wrapper_class, content_class, card_label_class, radio_wrapper_class and radio_input_class to style each part. The inner content of the slot is shown under the description.
Radio slot
heex
<!--All the props of radio slot-->
<.radio_card name="" id="" class="text-center">
<:radio value="checked" checked></:radio>
<!--Use hero icons-->
<:radio value="icon" icon=""></:radio>
<:radio value="icon-class" icon_class=""></:radio>
<:radio value="title" title="This is a title" title_class=""></:radio>
<:radio value="content-class" content_class="text-lg"></:radio>
<:radio value="content-wrapper-class" content_wrapper_class=""></:radio>
<:radio value="description" description="This is a description" description_class=""></:radio>
<:radio value="card-label-class" card_label_class=""></:radio>
<:radio value="radio-wrapper-class" radio_wrapper_class=""></:radio>
<:radio value="radio-input-class" radio_input_class=""></:radio>
<:radio 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>
</:radio>
</.radio_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_radio
|
boolean
|
false
| — | No | Boolean to show and hide radio |
label
|
string
| — | — | No | Specifies text for the label |
description
|
string
| — | — | No | Determines a short description |
wrapper_class
|
string
| — | — | No | Custom CSS class for the wrapper |
field_label_wrapper
|
string
| — | — | No | Custom CSS class for the field label wrapper |
description_class
|
string
|
text-[12px]
| — | No | Custom CSS class for the description |
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 |
|---|---|---|
radio
| Yes | — |
inner_block
| No | — |
Attributes of the radio slot
| Name | Type | Default | Values | Required | Description |
|---|---|---|---|---|---|
value
|
string
| — | — | Yes | — |
checked
|
boolean
| — | — | No | — |
icon
|
string
| — | — | No | Icon displayed alongside of a radio |
title
|
string
| — | — | No | — |
icon_class
|
string
| — | — | No | Determines custom class for the icon |
radio_wrapper_class
|
string
| — | — | No | Custom CSS class for the wrapper of radio |
description_class
|
string
| — | — | No | Determines custom class for the description |
title_class
|
string
| — | — | No | Determines custom class for the title |
description
|
string
| — | — | No | — |
card_label_class
|
string
| — | — | No | Custom CSS class for the wrapper of card label |
content_class
|
string
| — | — | No | Determines custom class for the content |
content_wrapper_class
|
string
| — | — | No | Determines custom class for the content wrapper |
radio_input_class
|
string
| — | — | No | Custom CSS class for styling the radio input |
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
radio_card
Helpers
radio_card_check/3
Generated with it
icon
Command
mix mishka.ui.gen.component radio_card