registry/ui/checkbox.tsx
import type { FC, JSX } from 'hono/jsx'
import { cn } from '@/lib/utils'
type CheckboxProps = Omit<JSX.IntrinsicElements['input'], 'type'>
export const Checkbox: FC<CheckboxProps> = ({
class: className,
...props
}) => (
<input
type="checkbox"
data-slot="checkbox"
class={cn(
'size-4 shrink-0 appearance-none rounded-[4px] border border-input bg-background',
'checked:border-primary checked:bg-primary',
"checked:bg-[url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%2220%206%209%2017%204%2012%22%2F%3E%3C%2Fsvg%3E')]",
'checked:bg-[length:14px_14px] checked:bg-center checked:bg-no-repeat',
'focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/20 outline-none',
'disabled:cursor-not-allowed disabled:opacity-50',
'transition-colors cursor-pointer',
className
)}
{...props}
/>
)
Installation
1
Initialize your project
First time only. Sets up config and installs base dependencies.
npx @kiwa-ui/cli init2
Add the component
This will install the component and any dependencies it needs.
npx @kiwa-ui/cli add checkbox1
Add the source file
Add this file to your project.
registry/ui/checkbox.tsx
import type { FC, JSX } from 'hono/jsx'
import { cn } from '@/lib/utils'
type CheckboxProps = Omit<JSX.IntrinsicElements['input'], 'type'>
export const Checkbox: FC<CheckboxProps> = ({
class: className,
...props
}) => (
<input
type="checkbox"
data-slot="checkbox"
class={cn(
'size-4 shrink-0 appearance-none rounded-[4px] border border-input bg-background',
'checked:border-primary checked:bg-primary',
"checked:bg-[url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%2220%206%209%2017%204%2012%22%2F%3E%3C%2Fsvg%3E')]",
'checked:bg-[length:14px_14px] checked:bg-center checked:bg-no-repeat',
'focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/20 outline-none',
'disabled:cursor-not-allowed disabled:opacity-50',
'transition-colors cursor-pointer',
className
)}
{...props}
/>
)
Usage
import { Checkbox } from '@/components/ui/checkbox'
import { Label } from '@/components/ui/label'
<div class='flex items-center gap-2'>
<Checkbox id='terms' />
<Label for='terms'>Accept terms and conditions</Label>
</div>