Components
Loading preview...
A larger form of Radio or Checkbox, where the user has a larger tap target and more details.
@shugar
npx shadcn@latest add https://21st.dev/r/shugar/choicebox-1import { useState } from "react";
import { ChoiceboxGroup } from "@/components/ui/choicebox-1";
import { Badge } from "@/components/ui/badge-1";
export default function CustomContentDemo() {
const [value5, setValue5] = useState<string>("trial");
return (
<div className="w-3/4">
<ChoiceboxGroup
direction="row"
label="select a plan"
onChange={setValue5}
type="radio"
value={value5}
>
<ChoiceboxGroup.Item
description="Free for two weeks"
title="Pro Trial"
value="trial"
>
<div className="flex justify-center p-2">
<Badge variant="trial">Trial</Badge>
</div>
</ChoiceboxGroup.Item>
<ChoiceboxGroup.Item
description="Get started now"
title="Pro"
value="pro"
>
<div className="flex justify-center p-2">
<Badge variant="blue">Pro</Badge>
</div>
</ChoiceboxGroup.Item>
</ChoiceboxGroup>
</div>
);
}