HiddenInput is a utility for implementing custom radio and checkbox selection while keeping the native input hidden. It's automatically integrated with FormControl, CheckboxGroup and RadioGroup components to handle the selection state and provide the correct accessibility attributes. All you have to do is to wrap it with a component like Card and make it a label.
"use client";
import {
RadioGroup,
Text,
View,
FormControl,
Card,
HiddenInput,
Icon,
Placeholder,
} from "reshaped";
import { useState } from "react";
import { CreditCardIcon, BanknoteIcon, LandmarkIcon } from "lucide-react";
export default () => {
const [value, setValue] = useState("0");
return (
<View>
<FormControl>
<FormControl.Label>Label</FormControl.Label>
<RadioGroup
name="example"
value={value}
onChange={(args) => setValue(args.value)}
>
<View direction="row" gap={4} align="stretch">
{["0", "1"].map((item) => (
<View.Item grow key={item}>
<Card as="label" selected={value === item}>
<HiddenInput type="radio" value={item} />
<Placeholder />
</Card>
</View.Item>
))}
</View>
</RadioGroup>
</FormControl>
</View>
);
}