Checkbox

Accept terms and conditions󰆘Enable notificationsReceive updates about releases󰆘CircularDisabled

Import

import { Checkbox } from "@pelagornis/page/components";

Example

The preview above renders this file. Copy it into src/components/ to start from it.

src/components/CheckboxExample.tsx

import { useState } from "react";
import { Checkbox, Stack } from "@pelagornis/page/components";

export default function CheckboxDemo() {
  const [notify, setNotify] = useState(true);

  return (
    <Stack gap="sizeSmall">
      <Checkbox label="Accept terms and conditions" />
      <Checkbox
        label="Enable notifications"
        description="Receive updates about releases"
        checked={notify}
        onChange={(event) => setNotify(event.target.checked)}
      />
      <Checkbox variant="circular" label="Circular" defaultChecked />
      <Checkbox label="Disabled" disabled />
    </Stack>
  );
}

Use in MDX

Checkbox can be written straight in an .mdx page. Import it below the frontmatter. It renders on the server, so no client directive is needed.

src/content/docs/example.mdx

---
title: Example
---

import { Checkbox } from "@pelagornis/page/components";

<Checkbox label="Accept terms" description="Required to continue" />

Use in Markdoc

pageMarkdoc() registers a checkbox tag for this component. Add the preset once in markdoc.config.mjs (see Use in Markdoc), then write the tag in any .mdoc page.

src/content/docs/example.mdoc

{% checkbox label="Accept terms" description="Required to continue" /%}

Attributes use the same names and values as the React props.

Variants

Values the component accepts for each variant prop.

Prop	Values
variant	default circular

Anatomy

Parts of the component and the data-refineui role each one renders.

Part	Role
root	checkbox

Keyboard

Keys the component handles when it has focus.

Key	Action
Space	activate

Reference

• RefineUI · Checkbox for design guidance and token detail.
• Use in MDX and Use in Markdoc for the general rules.