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>
      <div className="flex w-full grow shrink-0 basis-0 flex-wrap items-start gap-2">
        <RadioCardGroup.RadioCard
          disabled={false}
          hideRadio={false}
          value="505f7f2d"
        />
        <RadioCardGroup.RadioCard
          disabled={false}
          hideRadio={false}
          value="4aa63019"
        />
        <RadioCardGroup.RadioCard value="f6d80daa" />
      </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
Hnadler 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