Headless Form Checkbox

Checkbox

Home
Checkbox

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>
      <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 { useState } from 'react'
import { Checkbox, Description, Field, Label } from '@headlessui/react'

const WithDescriptionCode = () => {
  const [enabled, setEnabled] = useState(false)

  return (
    <div>
      <div>
        <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>
    </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>
      <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 { useState } from 'react'
import { Checkbox, Field, Label } from '@headlessui/react'

const UsingHtmlFormCode = () => {
  const [enabled, setEnabled] = useState(false)

  return (
    <div>
      <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>
      <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 { useState } from 'react'
import { Checkbox, Field, Label } from '@headlessui/react'

const TransitionCheckCode = () => {
  const [enabled, setEnabled] = useState(false)
  const [enabled1, setEnabled1] = useState(false)
  const [enabled2, setEnabled2] = useState(false)

  return (
    <div>
      <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.

HOME

APPS

UI ELEMENTS

FORM ELEMENTS

PAGES

WIDGETS

TABLES

CHARTS

ICONS

AUTH

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

HOME

APPS

UI ELEMENTS

FORM ELEMENTS

PAGES

WIDGETS

TABLES

CHARTS

ICONS

AUTH

Checkbox

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