A larger form of Radio or Checkbox, where the user has a larger tap target and more details.
import { 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> ); }
Part of Geist — browse the full library on 21st.dev.