Icon radio

TS

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

Hero

TSX

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

export default function Hero() {
  return (
    <RadioGroup defaultValue="basket" name="gear" orientation="horizontal">
      <IconRadio
        caption="Basket"
        icon={<span aria-hidden="true">🧺</span>}
        label="Basket"
        value="basket"
      />
      <IconRadio
        caption="Backpack"
        icon={<span aria-hidden="true">🎒</span>}
        label="Backpack"
        value="backpack"
      />
      <IconRadio
        caption="Cart"
        icon={<span aria-hidden="true">🛒</span>}
        label="Cart"
        value="cart"
      />
    </RadioGroup>
  );
}

Interactive

TSX

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

export default function Interactive() {
  const [value, setValue] = useState("basket");
  return (
    <div className="flex flex-col gap-2">
      <RadioGroup
        onValueChange={setValue}
        orientation="horizontal"
        value={value}
      >
        <IconRadio
          caption="Basket"
          icon={<span aria-hidden="true">🧺</span>}
          label="Basket"
          value="basket"
        />
        <IconRadio
          caption="Backpack"
          icon={<span aria-hidden="true">🎒</span>}
          label="Backpack"
          value="backpack"
        />
      </RadioGroup>
      <p className="text-xs text-base-content">Carrying: {value}</p>
    </div>
  );
}

Props

IconRadioProps

Prop	Type	Description
label	string
icon	ReactNode
caption?	string	A short visible legend; it does not replace the accessible label.

• labelstring
• iconReactNode
• caption?string

  A short visible legend; it does not replace the accessible label.

Full types: API reference.