RadioCard

Clickable card that acts as a radio button. The entire card surface is the click target. Use inside a RadioGroup root. Good for plan selectors, mode pickers, or any choice with rich visual context.

Usage

import { RadioGroup, RadioCard } from "nosible-ux"

export default function Example() {
  return (
    <RadioGroup defaultValue="standard">
      <RadioCard value="standard">Standard alerts</RadioCard>
      <RadioCard value="priority">Priority signals only</RadioCard>
    </RadioGroup>
  )
}

Examples

Plan picker

Accessibility

Inherits radio semantics from its RadioGroup context. The full card area is the interactive target. Selected state is indicated visually with a Neo Green border and programmatically via aria-checked.

Props