A radio group component that displays radios as interactive cards, with support for various sizes, variants, and colors.
Examples
<.radio_cards_root default_value="1" columns="3">
<.radio_cards_item value="1">
<.flex direction="column" width="100%">
<.text weight="bold">A1 Keyboard</.text>
<.text>US Layout</.text>
</.flex>
</.radio_cards_item>
<.radio_cards_item value="2">
<.flex direction="column" width="100%">
<.text weight="bold">Pro Mouse</.text>
<.text>Zero-lag wireless</.text>
</.flex>
</.radio_cards_item>
</.radio_cards_root>Root Props
size- Cards size: "1", "2", "3" (default: "2")variant- Visual variant: "surface", "classic" (default: "surface")color- Color theme from accent color palette (default: none)high_contrast- Increase color contrast (default: false)columns- Number of columns: "1"-"9" or CSS value (responsive supported)gap- Gap between cards (responsive supported)default_value- Initial checked value- Plus margin props (m, mx, my, mt, mr, mb, ml) for spacing control
Item Props
value- Value for this radio item (required)disabled- Whether this item is disabled
Summary
Functions
Individual radio card item. Must be used within radio_cards_root.
Root container for radio cards. Renders as a grid with radio card items.
Functions
Individual radio card item. Must be used within radio_cards_root.
Attributes
value(:string) (required) - Value for this radio item.disabled(:boolean) - Whether this item is disabled. Defaults tofalse.class(:string) - Additional CSS classes. Defaults tonil.style(:string) - Defaults to"".- Global attributes are accepted. Additional attributes.
Slots
inner_block(required)
Root container for radio cards. Renders as a grid with radio card items.
Attributes
color(:string) - Color utility class string. One of: gray, gold, bronze, brown, yellow, amber, orange, tomato, red, ruby, crimson, pink, plum, purple, violet, iris, indigo, blue, cyan, teal, jade, green, grass, lime, mint, sky. Must be one of"gray","gold","bronze","brown","yellow","amber","orange","tomato","red","ruby","crimson","pink","plum","purple","violet","iris","indigo","blue","cyan","teal","jade","green","grass","lime","mint", or"sky".high_contrast(:boolean) - Whether to increase color contrast with the background.m(:any) - Margin utility class string or map. Example:1or%{xs: '1', sm: '2'}.mx(:any) - Margin utility class string or map. Example:1or%{xs: '1', sm: '2'}.my(:any) - Margin utility class string or map. Example:1or%{xs: '1', sm: '2'}.mt(:any) - Margin utility class string or map. Example:1or%{xs: '1', sm: '2'}.mr(:any) - Margin utility class string or map. Example:1or%{xs: '1', sm: '2'}.mb(:any) - Margin utility class string or map. Example:1or%{xs: '1', sm: '2'}.ml(:any) - Margin utility class string or map. Example:1or%{xs: '1', sm: '2'}.gap(:string) - Gap utility class (0-9, -1 to -9). Must be one of"0","1","2","3","4","5","6","7","8","9","-1","-2","-3","-4","-5","-6","-7","-8", or"-9".gap_y(:string) - Column gap utility class (0-9, -1 to -9). Must be one of"0","1","2","3","4","5","6","7","8","9","-1","-2","-3","-4","-5","-6","-7","-8", or"-9".gap_x(:string) - Row gap utility class (0-9, -1 to -9). Must be one of"0","1","2","3","4","5","6","7","8","9","-1","-2","-3","-4","-5","-6","-7","-8", or"-9".size(:string) - Cards size from 1 to 3. Controls overall dimensions and spacing. Defaults to"2". Must be one of"1","2", or"3".variant(:string) - Visual style variant. One of 'surface' or 'classic'. Defaults to"surface". Must be one of"surface", or"classic".columns(:any) - Number of columns: 1-9 or CSS value. Responsive supported.default_value(:string) - Initial checked value. Defaults tonil.class(:string) - Additional CSS classes to add to the element. Defaults tonil.style(:string) - Defaults to"".- Global attributes are accepted. Global attributes. Supports all globals plus:
["id", "dir", "name"].
Slots
inner_block(required)