Components
Loading preview...
Here is Checkbox component
@ShadcnStudio
npx shadcn@latest add https://21st.dev/r/ShadcnStudio/checkbox-1'use client'
import { useState } from 'react'
import { Badge } from '@/components/ui/badge'
import { Checkbox } from '@/components/ui/checkbox'
const snacks = ['Burger', 'Pizza', 'Drinks']
const CheckboxBadgeDemo = () => {
const [selected, setSelected] = useState<string[]>(['Burger', 'Pizza'])
return (
<div className='flex items-center gap-2'>
{snacks.map(label => (
<Badge key={label} variant='secondary' className='relative gap-2 px-3 py-1.5'>
<Checkbox
id={label}
checked={selected.includes(label)}
onCheckedChange={checked =>
setSelected(checked ? [...selected, label] : selected.filter(item => item !== label))
}
className='data-[state=unchecked]:hidden'
/>
<label htmlFor={label} className='cursor-pointer select-none after:absolute after:inset-0'>
{label}
</label>
</Badge>
))}
</div>
)
}
export default CheckboxBadgeDemo