Checkbox and Radio Card Variants
This release introduces card variants for Checkbox and Radio components, providing an alternative layout for selection controls. These variants maintain the same component API as their standard counterparts while offering enhanced visual presentation.
To use the card variant, simply add the variant="card" attribute to any of the following components:
<.checkbox variant="card">
<.checkbox_group variant="card">
<.radio_group variant="card">
By default, the card variants hide their input controls for a cleaner appearance. You can display these controls by setting the
control
attribute to either "left"
or "right", determining their position within the card.
The card variants support custom content through their respective slots (<:checkbox> and <:radio>), enabling various layout and styling possibilities. Here are two examples demonstrating custom implementations:
Select the tags you want to apply to your project
The same customization options are available for radio buttons:
I've also added a new comprehensive form layout example that showcases these new card variants in action: Job Application form example →
Also, check the checkbox docs → and the radio docs → for more details.