React Mantine Checkbox Example

In this tutorial, we will see how to use Checkbox component in react mantine. We will create checkbox sizes with icons, checkbox label links, checkbox groups using react mantine.

Install & Setup Vite + React + Typescript + Mantine UI

React Mantine UI Checkbox Example

1. react mantine Checkbox component with left and right side.

import { Checkbox } from "@mantine/core";
export default function App() {
  return (
    <>
      <Checkbox label="I agree to sell my privacy" mb={20} />
      <Checkbox labelPosition="left" label="I agree to sell my privacy" />
    </>
  );
}

mantine checkbox component with left and right side

2. react mantine Checkbox component with States with Checked checkbox, Disabled checkbox, Disabled checked checkbox, Disabled indeterminate checkbox.

import { Checkbox, Stack } from "@mantine/core";

export default function App() {
  return (
    <>
      <Stack spacing="sm">
        <Checkbox checked={false} label="Default checkbox" />
        <Checkbox
          checked={false}
          indeterminate
          label="Indeterminate checkbox"
        />
        <Checkbox
          checked
          indeterminate
          label="Indeterminate checked checkbox"
        />
        <Checkbox checked label="Checked checkbox" />
        <Checkbox disabled label="Disabled checkbox" />
        <Checkbox disabled checked label="Disabled checked checkbox" />
        <Checkbox
          disabled
          indeterminate
          label="Disabled indeterminate checkbox"
        />
      </Stack>
    </>
  );
}

mantine checkbox component with state

3. react mantine Checkbox component sizes xs, sm, md, lg, xl.

import { Checkbox, Stack } from "@mantine/core";

export default function App() {
  return (
    <>
      <Stack spacing="sm">
        <Checkbox size="xs" />
        <Checkbox size="sm" />
        <Checkbox size="md" />
        <Checkbox size="lg" />
        <Checkbox size="xl" />
      </Stack>
    </>
  );
}

mantine checkbox component sizes xs, sm, md, lg, xl

4. react mantine Checkbox label with link.

import { Anchor, Checkbox } from "@mantine/core";

export default function App() {
  return (
    <Checkbox
      label={
        <>
          Accepts{" "}
          <Anchor size="sm" href="https://mantine.dev" target="_blank">
            terms and conditions
          </Anchor>
        </>
      }
    />
  );
}

5. react mantine Checkbox.Group component.

import { Checkbox, Container } from "@mantine/core";

export default function App() {
  return (
    <>
      <Container size="xs">
        <Checkbox.Group
          defaultValue={["react"]}
          label="Select your favorite framework/library"
          description="This is anonymous"
          withAsterisk
        >
          <Checkbox value="react" label="React" />
          <Checkbox value="svelte" label="Svelte" />
          <Checkbox value="ng" label="Angular" />
          <Checkbox value="vue" label="Vue" />
        </Checkbox.Group>
      </Container>
    </>
  );
}

mantine checkbox group component

6. react mantine Controlled Checkbox.Group.

import { useState } from "react";
import { Checkbox } from "@mantine/core";

export default function App() {
  const [value, setValue] = useState<string[]>([]);
  return (
    <>
      <Checkbox.Group value={value} onChange={setValue}>
        <Checkbox value="react" label="React" />
        <Checkbox value="svelte" label="Svelte" />
      </Checkbox.Group>
    </>
  );
}