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 DisabledDemo() {
const [value3, setValue3] = useState<string>("");
const [value4, setValue4] = useState<string[]>([]);
return (
<div className="flex flex-col gap-4 w-3/4">
<ChoiceboxGroup
direction="row"
disabled
label="Choicebox group disabled"
onChange={setValue3}
showLabel
type="radio"
value={value3}
>
<ChoiceboxGroup.Item
description="Free for two weeks"
title="Pro Trial"
value="trial"
/>
<ChoiceboxGroup.Item
description="Get started now"
title="Pro"
value="pro"
/>
</ChoiceboxGroup>
<ChoiceboxGroup
direction="row"
label="Single input disabled"
onChange={setValue4}
showLabel
type="checkbox"
value={value4}
>
<ChoiceboxGroup.Item
description="Free for two weeks"
disabled
title="Pro Trial"
value="trial"
/>
<ChoiceboxGroup.Item
description="Get started now"
title="Pro"
value="pro"
/>
</ChoiceboxGroup>
</div>
);
}