MaterialM - ReactJS Tailwind

Checkbox Label

Checkbox With Label

import  { useState } from "react";
import { Checkbox, Field, Label } from "@headlessui/react";


const WithLabelCode = () => {
  const [enabled, setEnabled] = useState(false);
  const [enabled1, setEnabled1] = useState(false);
  return (
    <>
    <div className="mt-4">
      <div className="flex flex-col gap-3">
          <div>
            <Field className="flex items-center gap-3">
              <Checkbox
                checked={enabled}
                onChange={setEnabled}
                className="group block ui-checkbox"
              >
                <svg
                  className="stroke-white opacity-0 group-data-checked:opacity-100 rounded"
                  viewBox="0 0 14 14"
                  fill="none"
                  height={15}
                >
                  <path
                    d="M3 8L6 11L11 3.5"
                    strokeWidth={2}
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  />
                </svg>
              </Checkbox>
              <Label className="cursor-pointer">Checkbox With Label</Label>
            </Field>
          </div>
          <div>
            <Field className="flex items-center gap-3">
              <Checkbox
                checked={enabled1}
                onChange={setEnabled1}
                className="group block ui-checkbox"
              >
                <svg
                  className="stroke-white opacity-0 group-data-checked:opacity-100 rounded"
                  viewBox="0 0 14 14"
                  fill="none"
                  height={15}
                >
                  <path
                    d="M3 8L6 11L11 3.5"
                    strokeWidth={2}
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  />
                </svg>
              </Checkbox>
              <Label className="cursor-pointer">Checkbox With Label</Label>
            </Field>
          </div>
        </div>
    </div>
    </>
  );
};

export default WithLabelCode;

With Discription

Enable beta features

This will give you early access to new features we're developing.

import { Checkbox, Description, Field, Label } from "@headlessui/react";
import { useState } from "react";


const WithDescriptionCode = () => {
  const [enabled, setEnabled] = useState(false);
  return (
    <>
    <div className="mt-4">
      <Field className="flex gap-3">
          <Checkbox
                checked={enabled}
                onChange={setEnabled}
                className="group block ui-checkbox"
              >
                <svg
                  className="stroke-white opacity-0 group-data-checked:opacity-100 rounded"
                  viewBox="0 0 14 14"
                  fill="none"
                  height={15}
                >
                  <path
                    d="M3 8L6 11L11 3.5"
                    strokeWidth={2}
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  />
                </svg>
              </Checkbox>
            <div>
              <Label>Enable beta features</Label>
              <Description>
                This will give you early access to new features we're
                developing.
              </Description>
            </div>
          </Field>
    </div>
    </>
  )
}

export default WithDescriptionCode

Disable Checkbox

Enable beta features

import { useState } from "react";
import { Checkbox, Field, Label } from "@headlessui/react";

const DisableCheckCode = () => {
    const [enabled, setEnabled] = useState(false);
  return (
    <>
    <div className="mt-4">
      <div className="flex flex-col gap-3">
          <div>
            <Field disabled className="flex items-center gap-3">
              <Checkbox
                checked={enabled}
                onChange={setEnabled}
                className="group block size-4 rounded border bg-white data-checked:bg-blue-500 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-checked:data-disabled:bg-gray-500"
              >
                <svg
                  className="stroke-white opacity-0 group-data-checked:opacity-100"
                  viewBox="0 0 14 14"
                  fill="none"
                >
                  <path
                    d="M3 8L6 11L11 3.5"
                    strokeWidth={2}
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  />
                </svg>
              </Checkbox>
              <Label className="data-disabled:opacity-50">
                Enable beta features
              </Label>
            </Field>
          </div>
          <div>
            <Field disabled className="flex items-center gap-3">
              <Checkbox
                checked={enabled}
                onChange={setEnabled}
                className="group block size-4 rounded border bg-white data-checked:bg-blue-500 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-checked:data-disabled:bg-gray-500"
              >
                <svg
                  className="stroke-white opacity-0 group-data-checked:opacity-100"
                  viewBox="0 0 14 14"
                  fill="none"
                >
                  <path
                    d="M3 8L6 11L11 3.5"
                    strokeWidth={2}
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  />
                </svg>
              </Checkbox>
              <Label className="data-disabled:opacity-50">
                Enable beta features
              </Label>
            </Field>
          </div>
        </div>
    </div>
    </>
  )
}

export default DisableCheckCode

With HTML Forms

import { Checkbox, Field, Label } from "@headlessui/react";
import { useState } from "react";


const UsingHtmlFormCode = () => {
  const [enabled, setEnabled] = useState(false);
  return (
    <>
    <div className="mt-4">
      <form action="/accounts" method="post">
          <Field className="flex items-center gap-3">
            <Checkbox
              checked={enabled}
              onChange={setEnabled}
              name="terms-of-service"
              className="group block ui-checkbox"
            >
              <svg
                className="stroke-white opacity-0 group-data-checked:opacity-100"
                viewBox="0 0 14 14"
                fill="none"
                height={15}
              >
                <path
                  d="M3 8L6 11L11 3.5"
                  strokeWidth={2}
                  strokeLinecap="round"
                  strokeLinejoin="round"
                />
              </svg>
            </Checkbox>
            <Label className="cursor-pointer">Agree to terms and conditions</Label>
          </Field>
          <div className="flex gap-3 mt-4">
          <button className="ui-button bg-primary justify-center">Submit</button>
          <button className="ui-button bg-error justify-center">Cancel</button>
          </div>
        </form>
    </div>
    </>
  )
}

export default UsingHtmlFormCode

Using as Uncontrolled

import { Checkbox, Field, Label } from "@headlessui/react";


const UsingUncontrolledCode = () => {
  return (
    <>
    <div className="mt-4">
      <form action="/accounts" method="post">
          <Field className="flex items-center gap-3">
            <Checkbox
              defaultChecked={true}
              name="terms-of-service"
              className="group block ui-checkbox"
            >
              <svg
                className="stroke-white opacity-0 group-data-checked:opacity-100"
                viewBox="0 0 14 14"
                fill="none"
              >
                <path
                  d="M3 8L6 11L11 3.5"
                  strokeWidth={2}
                  strokeLinecap="round"
                  strokeLinejoin="round"
                />
              </svg>
            </Checkbox>
            <Label className="cursor-pointer">
              Agree to terms and conditions
            </Label>
          </Field>
          <div className="flex gap-3 mt-4">
            <button className="ui-button bg-primary justify-center">
              Submit
            </button>
            <button className="ui-button bg-error justify-center">
              Cancel
            </button>
          </div>
        </form>
    </div>
    </>
  )
}

export default UsingUncontrolledCode

Transitions Checkbox

Checkbox With Transitoin

import { Checkbox, Field, Label } from "@headlessui/react";
import { useState } from "react";


const TransitionCheckCode = () => {
  const [enabled, setEnabled] = useState(false);
  const [enabled1, setEnabled1] = useState(false);
  const [enabled2, setEnabled2] = useState(false);
  return (
    <>
    <div className="mt-4">
      <div className="flex flex-col gap-3">
          <div>
            <Field className="flex items-center gap-3">
              <Checkbox
                checked={enabled}
                onChange={setEnabled}
                className="group block ui-checkbox"
              >
                <svg
                  className="stroke-white opacity-0 transition group-data-checked:opacity-100"
                  viewBox="0 0 14 14"
                  fill="none"
                  height={15}
                >
                  <path
                    d="M3 8L6 11L11 3.5"
                    strokeWidth={2}
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  />
                </svg>
              </Checkbox>
              <Label className="cursor-pointer">Checkbox With Transitoin</Label>
            </Field>
          </div>
          <div>
            <Field className="flex items-center gap-3">
              <Checkbox
                checked={enabled1}
                onChange={setEnabled1}
                className="group block ui-checkbox"
              >
                <svg
                  className="stroke-white opacity-0 transition group-data-checked:opacity-100"
                  viewBox="0 0 14 14"
                  fill="none"
                  height={15}
                >
                  <path
                    d="M3 8L6 11L11 3.5"
                    strokeWidth={2}
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  />
                </svg>
              </Checkbox>
              <Label className="cursor-pointer">Checkbox With Transitoin</Label>
            </Field>
          </div>
          <div>
            <Field className="flex items-center gap-3">
              <Checkbox
                checked={enabled2}
                onChange={setEnabled2}
                className="group block ui-checkbox"
              >
                <svg
                  className="stroke-white opacity-0 transition group-data-checked:opacity-100"
                  viewBox="0 0 14 14"
                  fill="none"
                  height={15}
                >
                  <path
                    d="M3 8L6 11L11 3.5"
                    strokeWidth={2}
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  />
                </svg>
              </Checkbox>
              <Label className="cursor-pointer">Checkbox With Transitoin</Label>
            </Field>
          </div>
        </div>
    </div>
    </>
  )
}

export default TransitionCheckCode

Render As a Div Elements

Checkbox With Transitoin

Render Props

Each component also exposes information about its current state via render props that you can use to conditionally apply different styles or render different content.

Headless Ui Elements

Headless Form Elements

Chat Application

eCommerce App

Notes App

Calendar App

Contact Application

Tickets App

Email App

Blog App

Chat Application

eCommerce App

Notes App

Calendar App

Contact Application

Tickets App

Email App

Blog App

Headless Ui Elements

Headless Form Elements

Checkbox Label

Sample Code

With Discription

Sample Code

Disable Checkbox

Sample Code

With HTML Forms

Sample Code

Using as Uncontrolled

Sample Code

Transitions Checkbox

Sample Code

Render As a Div Elements

Render Props