Skip to content
Paramanu v0.1.0-alpha.0

Checkbox Card

The Checkbox Card renders a checkbox inside a card layout, providing a more visual selection experience than a standard checkbox.

Basic Usage

import { ChkCard } from "@paramanu/forms-react"


export default function App() {
  return <ChkCard>Option A</ChkCard>
}
<label class="pm-chk-card pm-chk-card--md">
  <input type="checkbox" class="pm-chk-card__input" />
  <div class="pm-chk-card__content">Option A</div>
</label>

Checked

import { ChkCard } from "@paramanu/forms-react"


export default function App() {
  return <ChkCard checked>Selected</ChkCard>
}
<label class="pm-chk-card pm-chk-card--md pm-chk-card--checked">
  <input type="checkbox" class="pm-chk-card__input" checked />
  <div class="pm-chk-card__content">Selected</div>
</label>