# Checkbox: Form

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

Example: https://hextaui.com/docs/checkbox/examples/form
Component docs: https://hextaui.com/docs/checkbox.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/checkbox-form.json
```

This adds `components/examples/checkbox/form.tsx` with the Checkbox component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/checkbox/form.tsx"
"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>
  )
}
```

## Props in this example

### Checkbox

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `defaultChecked` | `boolean` | `false` |  |
| `required` | `boolean` | `false` |  |
| `name` | `string` | – | Submitted with the form when ticked. |
| `value` | `string` | – | Identifies the box inside a group and is what the form submits. Falls back to name, then “on”. |

## More Checkbox examples

- [States](https://hextaui.com/docs/checkbox/examples/states.md)
- [Select all](https://hextaui.com/docs/checkbox/examples/select-all.md)
- [Nested groups](https://hextaui.com/docs/checkbox/examples/nested-groups.md)
- [Controlled](https://hextaui.com/docs/checkbox/examples/controlled.md)
- [Sibling label](https://hextaui.com/docs/checkbox/examples/sibling-label.md)
- [Cards](https://hextaui.com/docs/checkbox/examples/cards.md)
- [Long content](https://hextaui.com/docs/checkbox/examples/long-content.md)
- [Right to left](https://hextaui.com/docs/checkbox/examples/rtl.md)