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";
export default function DefaultDemo() {
const [value1, setValue1] = useState<string>("trial");
return (
<div className="w-3/4">
<ChoiceboxGroup
direction="row"
label="select a plan"
onChange={setValue1}
type="radio"
value={value1}
>
<ChoiceboxGroup.Item
description="Free for two weeks"
title="Pro Trial"
value="trial"
/>
<ChoiceboxGroup.Item
description="Get started now"
title="Pro"
value="pro"
/>
</ChoiceboxGroup>
</div>
);
}