Radio Card Group

A group of options where no more than one option can be selected at a time.
Properties
No properties to configure
Example
Source Code
Installation
"use client";

import React from "react";
import { RadioCardGroup } from "@/subframe/components/RadioCardGroup";

function RadioCardGroupExample() {
  return (
    <RadioCardGroup value="" onValueChange={(value: string) => {}}>
      <div className="flex grow shrink-0 basis-0 flex-wrap items-start gap-2">
        <RadioCardGroup.RadioCard
          disabled={false}
          hideRadio={false}
          value="cc27b826"
        />
        <RadioCardGroup.RadioCard
          disabled={false}
          hideRadio={false}
          value="6b3f35c7"
        />
        <RadioCardGroup.RadioCard value="70f704a4" />
      </div>
    </RadioCardGroup>
  );
}

export default RadioCardGroupExample;

Props

Radio Card Group
Radio Card
Prop
Type
Default
Additional info
children
React.ReactNode
value
string
Currently selected value.
onValueChange
(value: string) => void
Handler called when a different option is selected.

Examples

Basics

Each card component needs a value prop to represent the value of the option. Use value and onValueChange props on the group component to control the selected state.

Disabled