Radio group

TS

import { … } from "@fungi.computer/caps/components/radio-group";

Hero

TSX

import {
  RadioGroup,
  RadioGroupItem,
} from "@fungi.computer/caps/components/radio-group";

export default function Hero() {
  return (
    <RadioGroup defaultValue="basket" name="gear">
      <label className="flex items-center gap-2">
        <RadioGroupItem value="basket" />
        <span className="text-sm">Basket</span>
      </label>
      <label className="flex items-center gap-2">
        <RadioGroupItem value="backpack" />
        <span className="text-sm">Backpack</span>
      </label>
      <label className="flex items-center gap-2">
        <RadioGroupItem value="cart" />
        <span className="text-sm">Cart</span>
      </label>
    </RadioGroup>
  );
}

Cards

TSX

import {
  RadioGroup,
  RadioGroupCard,
} from "@fungi.computer/caps/components/radio-group";

export default function Cards() {
  return (
    <RadioGroup defaultValue="weekly" name="plan">
      <RadioGroupCard
        description="One trip report a week"
        meta="Free"
        title="Weekly digest"
        value="weekly"
      />
      <RadioGroupCard
        description="Live alerts for nearby finds"
        meta="$4/mo"
        title="Realtime alerts"
        value="realtime"
      />
    </RadioGroup>
  );
}

Interactive

TSX

import { useState } from "react";
import {
  RadioGroup,
  RadioGroupItem,
} from "@fungi.computer/caps/components/radio-group";

export default function Interactive() {
  const [value, setValue] = useState("fresh");
  return (
    <div className="flex flex-col gap-2">
      <RadioGroup
        onValueChange={setValue}
        orientation="horizontal"
        value={value}
      >
        <label className="flex items-center gap-2">
          <RadioGroupItem value="fresh" />
          <span className="text-sm">Fresh</span>
        </label>
        <label className="flex items-center gap-2">
          <RadioGroupItem value="dried" />
          <span className="text-sm">Dried</span>
        </label>
        <label className="flex items-center gap-2">
          <RadioGroupItem disabled value="frozen" />
          <span className="text-sm">Frozen (unavailable)</span>
        </label>
      </RadioGroup>
      <p className="text-xs text-base-content">Storing: {value}</p>
    </div>
  );
}

Props

RadioGroupProps

Prop	Type	Description
children	ReactNode
defaultValue?	string
name?	string
onValueChange()?	(value) => void	Called after the selected radio value changes.
orientation?	"horizontal" | "vertical"
value?	string

• childrenReactNode
• defaultValue?string
• name?string
• onValueChange()?(value) => void

  Called after the selected radio value changes.

• orientation?"horizontal" | "vertical"
• value?string

RadioGroupItemProps

Prop	Type	Description
value	string
indicator?	ReactNode	Replaces the bead while the native input continues to own selection.

• valuestring
• indicator?ReactNode

  Replaces the bead while the native input continues to own selection.

RadioGroupCardProps

Prop	Type	Description
title	ReactNode
description?	ReactNode
meta?	ReactNode	A short readout on the card's trailing edge, such as a price or size.

• titleReactNode
• description?ReactNode
• meta?ReactNode

  A short readout on the card's trailing edge, such as a price or size.

Full types: API reference.