Checkbox

Checkbox

The Checkbox component allows users to select or deselect an option. It can be used for binary choices, settings, preferences, and form inputs.

import Checkbox from "rocksolidjs/Checkbox";
import Label from "rocksolidjs/Label";

export default function Example() {
  return (
    <div class="flex items-center gap-1">
      <Checkbox id="notifications" />
      <Label for="notifications">
        Enable notifications
      </Label>
    </div>
  );
}

Examples

Controlled

Use checked together with onChange when the Checkbox state needs to be controlled by the parent component.

import { createSignal } from "solid-js";
import Checkbox from "rocksolidjs/Checkbox";

export default function Example() {
  const [checked, setChecked] = createSignal(false);

  return (
    <Checkbox
      checked={checked()}
      onChange={(_, value) => setChecked(value)}
    />
  );
}

Default Checked

Use the defaultChecked prop to initialize it as selected while allowing the component to manage its state internally.

import Checkbox from "rocksolidjs/Checkbox";

export default function Example() {
  return (
    <div class="flex gap-4">
      <Checkbox defaultChecked />
    </div>
  );
}

Colors

Use the color prop to communicate the semantic meaning of the Checkbox.

import Checkbox from "rocksolidjs/Checkbox";

export default function Example() {
  return (
    <div class="flex gap-4">
      <Checkbox color="default" defaultChecked />
      <Checkbox color="success" defaultChecked />
      <Checkbox color="warning" defaultChecked />
      <Checkbox color="info" defaultChecked />
      <Checkbox color="error" defaultChecked />
    </div>
  );
}

Size

Use the size prop to control the size of the Checkbox.

import Checkbox from "rocksolidjs/Checkbox";

export default function Example() {
  return (
    <div class="flex flex-col gap-4">
      <div class="flex items-center gap-4">
        <Checkbox size="small" />
        <Checkbox size="medium" />
        <Checkbox size="large" />
      </div>
      <div class="flex items-center gap-4">
        <Checkbox size="small" defaultChecked />
        <Checkbox size="medium" defaultChecked />
        <Checkbox size="large" defaultChecked />
      </div>
    </div>
  );
}

Disabled

Use the disabled prop to prevent the Checkbox from being changed.

import Checkbox from "rocksolidjs/Checkbox";

export default function Example() {
  return (
    <div class="flex gap-4">
      <Checkbox disabled />
      <Checkbox disabled defaultChecked />
    </div>
  );
}

Icons

Use the checkedIcon and uncheckedIcon props to customize the icons displayed when the checkbox is checked or unchecked.

import type { ComponentProps } from "solid-js";
import Checkbox from "rocksolidjs/Checkbox";

export default function Example() {
  return (
    <Checkbox
      checkedIcon={<CheckedIcon class="text-red-600 dark:text-red-400" />}
      uncheckedIcon={<UncheckedIcon />}
    />
  );
}

const UncheckedIcon = (
  props: ComponentProps<"svg">,
) => (
  <svg
    {...props}
    aria-hidden={true}
    xmlns="http://www.w3.org/2000/svg"
    width="1em"
    height="1em"
    viewBox="0 0 24 24"
  >
    <path
      d="M0 0h24v24H0z"
      fill="none"
    />
    <path
      fill="currentColor"
      d="M11.29 20.66c.2.2.45.29.71.29s.51-.1.71-.29l7.5-7.5c2.35-2.35 2.35-6.05 0-8.41c-2.3-2.28-5.85-2.35-8.21-.2c-2.36-2.15-5.91-2.09-8.21.2c-2.35 2.36-2.35 6.06 0 8.41zM5.21 6.16C6 5.38 7 4.99 8.01 4.99s2.01.39 2.79 1.17l.5.5c.39.39 1.02.39 1.41 0l.5-.5c1.56-1.56 4.02-1.56 5.59 0c1.56 1.57 1.56 4.02 0 5.58l-6.79 6.79l-6.79-6.79a3.91 3.91 0 0 1 0-5.58Z"
    />
  </svg>
);

const CheckedIcon = (
  props: ComponentProps<"svg">,
) => (
  <svg
    {...props}
    aria-hidden={true}
    xmlns="http://www.w3.org/2000/svg"
    width="1em"
    height="1em"
    viewBox="0 0 24 24"
  >
    <path
      d="M0 0h24v24H0z"
      fill="none"
    />
    <path
      fill="currentColor"
      d="M11.29 20.69c.2.2.45.29.71.29s.51-.1.71-.29l7.5-7.5c2.35-2.35 2.35-6.05 0-8.41c-2.29-2.29-5.84-2.35-8.21-.2c-2.36-2.15-5.91-2.09-8.21.2c-2.35 2.36-2.35 6.06 0 8.41z"
    />
  </svg>
);

Customization

Use the slotProps.base to add custom styles to the Checkbox.

import Checkbox from "rocksolidjs/Checkbox";

export default function Example() {
  return (
    <Checkbox
      defaultChecked
      slotProps={{
        base: {
          class: `
            text-purple-600
            dark:text-purple-400
            hover:text-purple-700
            dark:hover:text-purple-300
          `,
        },
      }}
    />
  );
}

Accessibility

  • Use a meaningful label for every Checkbox.
  • Associate the Checkbox with its label using id and the corresponding label relationship when necessary.
  • Do not rely on color alone to communicate the Checkbox state.
  • Ensure the Checkbox has sufficient contrast against its background.
  • Keep the Checkbox keyboard accessible.
  • Use the disabled state when an option cannot be changed.
  • For groups of related choices, provide a clear group label or description.

API

Checkbox

The Checkbox component supports controlled and uncontrolled states, semantic colors, disabled states, custom classes, and input slot customization.

Prop Type Required Default Description
checked boolean No — Controls whether the Checkbox is checked.
checkedIcon JSXElement No — Custom icon displayed when the checkbox is checked.
class string No — Adds a custom CSS class to the Checkbox.
color "default" | "success" | "warning" | "info" | "error" No "default" Sets the semantic color of the Checkbox.
defaultChecked boolean No false Sets the initial checked state for an uncontrolled Checkbox.
disabled boolean No false Disables the Checkbox and prevents user interaction.
id string No — Sets the id attribute of the underlying input element.
onChange (event: Event, checked: boolean) => void No — Called when the checked state changes. Provides the event and new checked state.
size "small" | "medium" | "large" No "medium" Sets the size of the Checkbox.
slotProps { base?: object } No — Provides props to customize the Checkbox slots.
  • base — Props for the Checkbox base slot.
uncheckedIcon JSXElement No — Custom icon displayed when the checkbox is unchecked.
  • Radio — Use Radio when users should select exactly one option from a group.
  • Switch — Use Switch for toggling a setting or preference on or off.