Solid UI Neobrutalism

1
import { Checkbox } from "~/components/ui/checkbox";
2
import { Label } from "~/components/ui/label";
3

4
export default function CheckboxDemo() {
5
  return (
6
    <div class="flex flex-col gap-6">
7
      <div class="flex items-center gap-3">
8
        <Checkbox id="terms" />
9
        <Label for="terms">Accept terms and conditions</Label>
10
      </div>
11
      <div class="flex items-start gap-3">
12
        <Checkbox id="terms-2" defaultChecked />
13
        <div class="grid gap-2">
14
          <Label for="terms-2">Accept terms and conditions</Label>
15
          <p class="text-sm text-muted-foreground">
16
            By clicking this checkbox, you agree to the terms and conditions.
17
          </p>
18
        </div>
19
      </div>
20
      <div class="flex items-start gap-3">
21
        <Checkbox id="toggle" disabled />
22
        <Label for="toggle">Enable notifications</Label>
23
      </div>
24
      <Label class="hover:bg-accent/50 flex items-start gap-3 rounded-lg border p-3 has-[[aria-checked=true]]:border-blue-600 has-[[aria-checked=true]]:bg-blue-50 dark:has-[[aria-checked=true]]:border-blue-900 dark:has-[[aria-checked=true]]:bg-blue-950">
25
        <Checkbox
26
          id="toggle-2"
27
          defaultChecked
28
          class="data-[state=checked]:border-blue-600 data-[state=checked]:bg-blue-600 data-[state=checked]:text-white dark:data-[state=checked]:border-blue-700 dark:data-[state=checked]:bg-blue-700"
29
        />
30
        <div class="grid gap-1.5 font-normal">
31
          <p class="text-sm leading-none font-medium">Enable notifications</p>
32
          <p class="text-sm text-muted-foreground">
33
            You can enable or disable notifications at any time.
34
          </p>
35
        </div>
36
      </Label>
37
    </div>
38
  );
39
}

Installation#

Install the following dependencies

Copy and paste the following code into your project

1
import type { PolymorphicProps } from "@kobalte/core/polymorphic";
2
import type { ValidComponent } from "solid-js";
3

4
import { Match, splitProps, Switch } from "solid-js";
5
import * as CheckboxPrimitive from "@kobalte/core/checkbox";
6
import CheckIcon from "lucide-solid/icons/check";
7
import MinusIcon from "lucide-solid/icons/minus";
8

9
import { cn } from "~/lib/utils";
10

11
type CheckboxRootProps<T extends ValidComponent = "div"> =
12
  CheckboxPrimitive.CheckboxRootProps<T> & { class?: string | undefined };
13

14
const Checkbox = <T extends ValidComponent = "div">(
15
  props: PolymorphicProps<T, CheckboxRootProps<T>>,
16
) => {
17
  const [local, others] = splitProps(props as CheckboxRootProps, [
18
    "class",
19
    "id",
20
  ]);
21
  return (
22
    <CheckboxPrimitive.Root
23
      data-slot="checkbox"
24
      class={cn("items-top group relative flex space-x-2", local.class)}
25
      {...others}
26
    >
27
      <CheckboxPrimitive.Input
28
        data-slot="checkbox-input"
29
        class="peer"
30
        id={local.id}
31
      />
32
      <CheckboxPrimitive.Control
33
        data-slot="checkbox-control"
34
        class="size-4 shrink-0 rounded-sm border-2 border-border ring-offset-background peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2 peer-focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[indeterminate]:border-none data-[indeterminate]:bg-foreground! data-[indeterminate]:text-background! ui-checked:border-none ui-checked:bg-primary ui-checked:text-background"
35
      >
36
        <CheckboxPrimitive.Indicator data-slot="checkbox-indicator">
37
          <Switch>
38
            <Match when={!others.indeterminate}>
39
              <CheckIcon class="size-4" />
40
            </Match>
41
            <Match when={others.indeterminate}>
42
              <MinusIcon class="size-4" />
43
            </Match>
44
          </Switch>
45
        </CheckboxPrimitive.Indicator>
46
      </CheckboxPrimitive.Control>
47
    </CheckboxPrimitive.Root>
48
  );
49
};
50

51
export { Checkbox };

Update the import paths to match your project setup.

Usage#

1
import { Checkbox } from "~/components/ui/checkbox";

1
<div class="flex items-center space-x-2">
2
  <Checkbox id="terms" />
3
  <label for="terms">Accept terms and conditions</label>
4
</div>