<.box max_width="600px">
<.checkbox_cards_root id="checkbox-cards-hero" default_value={["1"]} columns="3">
<.checkbox_cards_item value="1">
<.flex direction="column" width="100%">
<.text weight="bold">A1 Keyboard</.text>
<.text>US Layout</.text>
</.flex>
</.checkbox_cards_item>
<.checkbox_cards_item value="2">
<.flex direction="column" width="100%">
<.text weight="bold">Pro Mouse</.text>
<.text>Zero-lag wireless</.text>
</.flex>
</.checkbox_cards_item>
<.checkbox_cards_item value="3">
<.flex direction="column" width="100%">
<.text weight="bold">Lightning Mat</.text>
<.text>Wireless charging</.text>
</.flex>
</.checkbox_cards_item>
</.checkbox_cards_root>
</.box>API Reference
This component is based on the div element and supports common margin props.
Root
| Prop | Type | Default | Description |
|---|---|---|---|
class
|
string
|
nil
|
Additional CSS classes to add to the element. |
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. |
columns
|
any
|
—
|
Number of columns: 1-9 or CSS value. Responsive supported. |
default_value
|
list
|
[]
|
Initial checked values as list of strings. |
disabled
|
boolean
|
false
|
|
gap
|
string
|
—
|
Gap utility class (0-9, -1 to -9) |
gap_x
|
string
|
—
|
Row gap utility class (0-9, -1 to -9) |
gap_y
|
string
|
—
|
Column gap utility class (0-9, -1 to -9) |
high_contrast
|
boolean
|
—
|
Whether to increase color contrast with the background. |
id
|
string
|
nil
|
|
m
|
any
|
—
|
Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}` |
mb
|
any
|
—
|
Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}` |
ml
|
any
|
—
|
Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}` |
mr
|
any
|
—
|
Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}` |
mt
|
any
|
—
|
Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}` |
mx
|
any
|
—
|
Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}` |
my
|
any
|
—
|
Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}` |
name
|
string
|
nil
|
|
on_value_change
|
string
|
nil
|
|
required
|
boolean
|
false
|
|
size
|
string
|
"2"
|
Cards size from 1 to 3. Controls overall dimensions and spacing. |
style
|
string
|
""
|
|
value
|
list
|
nil
|
Controlled checked values as list of strings. |
variant
|
string
|
"surface"
|
Visual style variant. One of 'surface' or 'classic'. |
class
Additional CSS classes to add to the element.
Type
string
Default
nil
color
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.
Type
string
Default
—
columns
Number of columns: 1-9 or CSS value. Responsive supported.
Type
any
Default
—
default_value
Initial checked values as list of strings.
Type
list
Default
[]
disabled
Type
boolean
Default
false
gap
Gap utility class (0-9, -1 to -9)
Type
string
Default
—
gap_x
Row gap utility class (0-9, -1 to -9)
Type
string
Default
—
gap_y
Column gap utility class (0-9, -1 to -9)
Type
string
Default
—
high_contrast
Whether to increase color contrast with the background.
Type
boolean
Default
—
id
Type
string
Default
nil
m
Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type
any
Default
—
mb
Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type
any
Default
—
ml
Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type
any
Default
—
mr
Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type
any
Default
—
mt
Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type
any
Default
—
mx
Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type
any
Default
—
my
Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type
any
Default
—
name
Type
string
Default
nil
on_value_change
Type
string
Default
nil
required
Type
boolean
Default
false
size
Cards size from 1 to 3. Controls overall dimensions and spacing.
Type
string
Default
"2"
style
Type
string
Default
""
value
Controlled checked values as list of strings.
Type
list
Default
nil
variant
Visual style variant. One of 'surface' or 'classic'.
Type
string
Default
"surface"
Item
An item in the group that can be checked.
| Prop | Type | Default | Description |
|---|---|---|---|
checked
|
boolean
|
false
|
|
class
|
string
|
nil
|
Additional CSS classes. |
disabled
|
boolean
|
false
|
Whether this item is disabled. |
high_contrast
|
boolean
|
—
|
Whether to increase color contrast with the background. |
id
|
string
|
nil
|
|
size
|
string
|
"2"
|
|
style
|
string
|
""
|
|
value
|
string
|
—
|
Value for this checkbox item. |
checked
Type
boolean
Default
false
class
Additional CSS classes.
Type
string
Default
nil
disabled
Whether this item is disabled.
Type
boolean
Default
false
high_contrast
Whether to increase color contrast with the background.
Type
boolean
Default
—
id
Type
string
Default
nil
size
Type
string
Default
"2"
style
Type
string
Default
""
value
Value for this checkbox item.
Type
string
Default
—
Examples
Size
Use the size prop to control the size.
<.flex align="center" gap="3">
<.checkbox_cards_root id="checkbox-cards-size-1" default_value={["1"]} size="1">
<.checkbox_cards_item value="1">Agree to Terms</.checkbox_cards_item>
</.checkbox_cards_root>
<.checkbox_cards_root id="checkbox-cards-size-2" default_value={["1"]} size="2">
<.checkbox_cards_item value="1">Agree to Terms</.checkbox_cards_item>
</.checkbox_cards_root>
<.checkbox_cards_root id="checkbox-cards-size-3" default_value={["1"]} size="3">
<.checkbox_cards_item value="1">Agree to Terms</.checkbox_cards_item>
</.checkbox_cards_root>
</.flex>Variant
Use the variant prop to control the visual style.
<.flex direction="column" gap="3" max_width="200px">
<.checkbox_cards_root
id="checkbox-cards-variant-surface"
default_value={["1"]}
variant="surface"
>
<.checkbox_cards_item value="1">Agree to Terms</.checkbox_cards_item>
</.checkbox_cards_root>
<.checkbox_cards_root
id="checkbox-cards-variant-classic"
default_value={["1"]}
variant="classic"
>
<.checkbox_cards_item value="1">Agree to Terms</.checkbox_cards_item>
</.checkbox_cards_root>
</.flex>Color
Use the color prop to assign a specific accent color.
<.flex direction="column" gap="3" max_width="200px">
<.checkbox_cards_root id="checkbox-cards-color-indigo" default_value={["1"]} color="indigo">
<.checkbox_cards_item value="1">Agree to Terms</.checkbox_cards_item>
</.checkbox_cards_root>
<.checkbox_cards_root id="checkbox-cards-color-cyan" default_value={["1"]} color="cyan">
<.checkbox_cards_item value="1">Agree to Terms</.checkbox_cards_item>
</.checkbox_cards_root>
<.checkbox_cards_root id="checkbox-cards-color-orange" default_value={["1"]} color="orange">
<.checkbox_cards_item value="1">Agree to Terms</.checkbox_cards_item>
</.checkbox_cards_root>
<.checkbox_cards_root id="checkbox-cards-color-crimson" default_value={["1"]} color="crimson">
<.checkbox_cards_item value="1">Agree to Terms</.checkbox_cards_item>
</.checkbox_cards_root>
</.flex>High-contrast
Use the high_contrast prop to increase color contrast with the background.
<.grid columns="2" gap="3" display="inline-grid">
<.checkbox_cards_root id="checkbox-cards-hc-indigo" default_value={["1"]} color="indigo">
<.checkbox_cards_item value="1">Agree to Terms</.checkbox_cards_item>
</.checkbox_cards_root>
<.checkbox_cards_root
id="checkbox-cards-hc-indigo-contrast"
default_value={["1"]}
color="indigo"
high_contrast
>
<.checkbox_cards_item value="1">Agree to Terms</.checkbox_cards_item>
</.checkbox_cards_root>
<.checkbox_cards_root id="checkbox-cards-hc-cyan" default_value={["1"]} color="cyan">
<.checkbox_cards_item value="1">Agree to Terms</.checkbox_cards_item>
</.checkbox_cards_root>
<.checkbox_cards_root
id="checkbox-cards-hc-cyan-contrast"
default_value={["1"]}
color="cyan"
high_contrast
>
<.checkbox_cards_item value="1">Agree to Terms</.checkbox_cards_item>
</.checkbox_cards_root>
<.checkbox_cards_root id="checkbox-cards-hc-orange" default_value={["1"]} color="orange">
<.checkbox_cards_item value="1">Agree to Terms</.checkbox_cards_item>
</.checkbox_cards_root>
<.checkbox_cards_root
id="checkbox-cards-hc-orange-contrast"
default_value={["1"]}
color="orange"
high_contrast
>
<.checkbox_cards_item value="1">Agree to Terms</.checkbox_cards_item>
</.checkbox_cards_root>
<.checkbox_cards_root id="checkbox-cards-hc-crimson" default_value={["1"]} color="crimson">
<.checkbox_cards_item value="1">Agree to Terms</.checkbox_cards_item>
</.checkbox_cards_root>
<.checkbox_cards_root
id="checkbox-cards-hc-crimson-contrast"
default_value={["1"]}
color="crimson"
high_contrast
>
<.checkbox_cards_item value="1">Agree to Terms</.checkbox_cards_item>
</.checkbox_cards_root>
</.grid>Disabled
<.flex direction="column" gap="4" max_width="450px">
<.checkbox_cards_root id="checkbox-cards-disabled-on" columns="2" default_value={["2"]}>
<.checkbox_cards_item value="1">Off</.checkbox_cards_item>
<.checkbox_cards_item value="2">On</.checkbox_cards_item>
</.checkbox_cards_root>
<.checkbox_cards_root id="checkbox-cards-disabled-all" columns="2" default_value={["2"]}>
<.checkbox_cards_item value="1" disabled>Off</.checkbox_cards_item>
<.checkbox_cards_item value="2" disabled>On</.checkbox_cards_item>
</.checkbox_cards_root>
</.flex>