104Get started
HextaUI

Checkbox: Form

A hidden input submits name and value like a native checkbox, and required blocks submit until it is ticked.

Nothing submitted yet.
"use client"

import * as React from "react"

import { Button } from "@/components/ui/button"
import { Checkbox } from "@/components/ui/checkbox"

export function CheckboxForm() {
  const [submitted, setSubmitted] = React.useState<string>()

  return (
    <form
      className="flex flex-col items-start gap-3 text-sm"
      onSubmit={(event) => {
        event.preventDefault()
        const data = new FormData(event.currentTarget)
        setSubmitted(JSON.stringify(Object.fromEntries(data.entries())))
      }}
    >
      <label className="flex items-center gap-3">
        <Checkbox name="terms" required />I agree to the terms
      </label>
      <label className="flex items-center gap-3">
        <Checkbox name="newsletter" value="weekly" defaultChecked />
        Weekly newsletter
      </label>
      <Button type="submit" size="sm">
        Submit
      </Button>
      <output className="text-muted-foreground">
        {submitted ?? "Nothing submitted yet."}
      </output>
    </form>
  )
}

Add this example

This adds the example as components/examples/checkbox/form.tsx, together with the Checkbox component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/checkbox-form.json

To add only the component, follow the Checkbox installation.

Props in this example

The Checkbox props this example sets, from the API reference.

Checkbox

PropTypeDefault
defaultChecked
booleanfalse
required
booleanfalse
nameSubmitted with the form when ticked.
string–
valueIdentifies the box inside a group and is what the form submits. Falls back to name, then “on”.
string–

Every prop is in the Checkbox API reference.

More Checkbox examples

See them all, with keyboard support and accessibility notes, on the Checkbox page.

Related components