Skip to main content
Glama
checkbox.tsx2.24 kB
'use client'; import * as CheckboxPrimitive from '@radix-ui/react-checkbox'; import { cva, type VariantProps } from 'class-variance-authority'; import { CheckIcon, MinusIcon } from 'lucide-react'; import * as React from 'react'; import { cn } from '@/lib/utils'; const checkboxVariants = cva( 'peer border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50', { variants: { variant: { primary: 'data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground data-[state=indeterminate]:border-primary', secondary: 'data-[state=checked]:bg-secondary data-[state=checked]:text-secondary-foreground dark:data-[state=checked]:bg-secondary data-[state=checked]:border-secondary data-[state=indeterminate]:bg-secondary data-[state=indeterminate]:text-secondary-foreground data-[state=indeterminate]:border-secondary', }, }, defaultVariants: { variant: 'primary', }, }, ); interface CheckboxProps extends React.ComponentProps<typeof CheckboxPrimitive.Root>, VariantProps<typeof checkboxVariants> {} function Checkbox({ className, variant, checked, ...props }: CheckboxProps) { return ( <CheckboxPrimitive.Root data-slot="checkbox" checked={checked} className={cn(checkboxVariants({ variant }), className)} {...props} > <CheckboxPrimitive.Indicator data-slot="checkbox-indicator" className="grid place-content-center text-current transition-none" > {checked === 'indeterminate' ? ( <MinusIcon className="size-3.5" /> ) : ( <CheckIcon className="size-3.5" /> )} </CheckboxPrimitive.Indicator> </CheckboxPrimitive.Root> ); } export { Checkbox, checkboxVariants }; export type { CheckboxProps };

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/activepieces/activepieces'

If you have feedback or need assistance with the MCP directory API, please join our Discord server