Components/Selectable Card

Search documentation

Jump to any guide or component.

↑↓ move · Enter open · Esc close

Forms · SelectableCard

SSR NativeAccessible

Selectable Card

Turns a rich card into a native radio or checkbox choice.

Live previewv0.1.4
Astro
---
import { SelectableCard } from '@charvesta/cetha';
---

<SelectableCard name="plan" value="pro" title="Pro" description="For growing teams" checked />

API reference

PropTypeDefaultDescription
name*stringChoice group name.
value*stringSubmitted value.
title*stringVisible choice label.
type'radio' | 'checkbox''radio'Native input type.
classstringAdditional classes forwarded to the rendered element.

Accessibility

Uses a native input inside a fully clickable label.