A control that allows the user to toggle between checked and not checked.
import { Checkbox, CheckboxControl, CheckboxLabel, } from "@repo/tailwindcss/ui/checkbox"; const CheckboxDemo = () => { return ( <Checkbox class="flex items-center space-x-2"> <CheckboxControl /> <CheckboxLabel class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"> Accept terms and conditions </CheckboxLabel> </Checkbox> ); }; export default CheckboxDemo;
npx shadcn-solid@latest add checkbox
npm install @kobalte/core
import { cn } from "@/libs/cn"; import type { CheckboxControlProps } from "@kobalte/core/checkbox"; import { Checkbox as CheckboxPrimitive } from "@kobalte/core/checkbox"; import type { PolymorphicProps } from "@kobalte/core/polymorphic"; import type { ValidComponent, VoidProps } from "solid-js"; import { splitProps } from "solid-js"; export const CheckboxLabel = CheckboxPrimitive.Label; export const Checkbox = CheckboxPrimitive; export const CheckboxErrorMessage = CheckboxPrimitive.ErrorMessage; export const CheckboxDescription = CheckboxPrimitive.Description; type checkboxControlProps<T extends ValidComponent = "div"> = VoidProps< CheckboxControlProps<T> & { class?: string } >; export const CheckboxControl = <T extends ValidComponent = "div">( props: PolymorphicProps<T, checkboxControlProps<T>>, ) => { const [local, rest] = splitProps(props as checkboxControlProps, [ "class", "children", ]); return ( <> <CheckboxPrimitive.Input class="[&:focus-visible+div]:outline-none [&:focus-visible+div]:ring-[1.5px] [&:focus-visible+div]:ring-ring [&:focus-visible+div]:ring-offset-2 [&:focus-visible+div]:ring-offset-background" /> <CheckboxPrimitive.Control class={cn( "h-4 w-4 shrink-0 rounded-sm border border-primary shadow transition-shadow focus-visible:outline-none focus-visible:ring-[1.5px] focus-visible:ring-ring data-[disabled]:cursor-not-allowed data-[checked]:bg-primary data-[checked]:text-primary-foreground data-[disabled]:opacity-50", local.class, )} {...rest} > <CheckboxPrimitive.Indicator class="flex items-center justify-center text-current"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="h-4 w-4" > <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m5 12l5 5L20 7" /> <title>Checkbox</title> </svg> </CheckboxPrimitive.Indicator> </CheckboxPrimitive.Control> </> ); };
import { cn } from "@/libs/cn"; import type { CheckboxControlProps } from "@kobalte/core/checkbox"; import { Checkbox as CheckboxPrimitive } from "@kobalte/core/checkbox"; import type { PolymorphicProps } from "@kobalte/core/polymorphic"; import type { ValidComponent, VoidProps } from "solid-js"; import { splitProps } from "solid-js"; export const CheckboxLabel = CheckboxPrimitive.Label; export const Checkbox = CheckboxPrimitive; export const CheckboxErrorMessage = CheckboxPrimitive.ErrorMessage; export const CheckboxDescription = CheckboxPrimitive.Description; type checkboxControlProps<T extends ValidComponent = "div"> = VoidProps< CheckboxControlProps<T> & { class?: string } >; export const CheckboxControl = <T extends ValidComponent = "div">( props: PolymorphicProps<T, checkboxControlProps<T>>, ) => { const [local, rest] = splitProps(props as checkboxControlProps, [ "class", "children", ]); return ( <> <CheckboxPrimitive.Input class="[&:focus-visible+div]:(outline-none ring-1.5 ring-ring ring-offset-2 ring-offset-background)" /> <CheckboxPrimitive.Control class={cn( "h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:(outline-none ring-1.5 ring-ring) data-[disabled]:(cursor-not-allowed opacity-50) data-[checked]:(bg-primary text-primary-foreground) transition-shadow", local.class, )} {...rest} > <CheckboxPrimitive.Indicator class="flex items-center justify-center text-current"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="h-4 w-4" > <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m5 12l5 5L20 7" /> <title>Checkbox</title> </svg> </CheckboxPrimitive.Indicator> </CheckboxPrimitive.Control> </> ); };
import { Checkbox, CheckboxControl } from "@/components/ui/checkbox";
<Checkbox> <CheckboxControl /> </Checkbox>
import { Checkbox, CheckboxControl, CheckboxDescription, CheckboxLabel, } from "@repo/tailwindcss/ui/checkbox"; const CheckboxWithTextDemo = () => { return ( <Checkbox class="flex items-start space-x-2"> <CheckboxControl /> <div class="grid gap-1.5 leading-none"> <CheckboxLabel class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"> Accept terms and conditions </CheckboxLabel> <CheckboxDescription class="text-sm text-muted-foreground"> You agree to our Terms of Service and Privacy Policy. </CheckboxDescription> </div> </Checkbox> ); }; export default CheckboxWithTextDemo;
import { Checkbox, CheckboxControl, CheckboxLabel, } from "@repo/tailwindcss/ui/checkbox"; const CheckboxDisabledDemo = () => { return ( <Checkbox class="flex items-center space-x-2" disabled> <CheckboxControl /> <CheckboxLabel class="data-[disabled]:(cursor-not-allowed opacity-70) text-sm font-medium leading-none"> Accept terms and conditions </CheckboxLabel> </Checkbox> ); }; export default CheckboxDisabledDemo;