A larger form of Radio or Checkbox, where the user has a larger tap target and more details.
import React, { useState } from "react";
import { ChoiceboxGroup } from "@/components/ui/choicebox";
import { Badge } from "@/components/ui/badge";
export const SingleSelect = () => {
const [value1, setValue1] = useState<string>("trial");
return (
<div className="flex flex-col gap-2 w-[60%]">
<div className="font-bold text-xl dark:text-white">Single-select</div>
<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>
);
};
export const MultiSelect = () => {
const [value2, setValue2] = useState<string[]>([]);
return (
<div className="flex flex-col gap-2 w-[60%]">
<div className="font-bold text-xl dark:text-white">Multi-select</div>
<ChoiceboxGroup
direction="row"
label="select a plan"
onChange={setValue2}
type="checkbox"
value={value2}
>
<ChoiceboxGroup.Item
description="Free for two weeks"
title="Pro Trial"
value="trial"
/>
<ChoiceboxGroup.Item
description="Get started now"
title="Pro"
value="pro"
/>
</ChoiceboxGroup>
</div>
);
};
export const Disabled = () => {
const [value3, setValue3] = useState<string>("");
const [value4, setValue4] = useState<string[]>([]);
return (
<div className="flex flex-col gap-4 w-[60%]">
<div className="font-bold text-xl dark:text-white">Disabled</div>
<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>
);
};
export const CustomContent = () => {
const [value5, setValue5] = useState<string>("trial");
return (
<div className="flex flex-col gap-2 w-[60%]">
<div className="font-bold text-xl dark:text-white">Custom content</div>
<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.