# Invalid / required

> Checkbox with an inline error message that appears when the form is submitted without checking it.

A shadcn/ui block from the [@flx](https://ui.flexnative.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/flx/checkbox-11).

- Page, with a live preview: https://shadcn.exchange/r/flx/checkbox-11
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/flx/checkbox-11-light-e705f1488ba7808e.png
- Registry item: https://ui.flexnative.com/r/checkbox-11.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://ui.flexnative.com/r/checkbox-11.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `sonner`
- Registry items: `checkbox`, `field`, `button`

## Files

### `registry/patterns/checkbox/checkbox-11.tsx`

```tsx
'use client'

import { Button } from '@/components/ui/button'
import { Checkbox } from '@/components/ui/checkbox'
import {
  Field,
  FieldContent,
  FieldError,
  FieldLabel,
} from '@/components/ui/field'
import { toast } from 'sonner'
import { useState } from 'react'

export function Checkbox11() {
  const [accepted, setAccepted] = useState(false)
  const [invalid, setInvalid] = useState(false)

  function onSubmit(event: React.FormEvent) {
    event.preventDefault()
    if (!accepted) {
      setInvalid(true)
      return
    }
    setInvalid(false)
    toast.success('Terms accepted')
  }

  return (
    <form onSubmit={onSubmit} className="flex w-full max-w-sm flex-col gap-4">
      <Field orientation="horizontal" data-invalid={invalid}>
        <Checkbox
          id="checkbox-11-terms"
          aria-invalid={invalid}
          checked={accepted}
          onCheckedChange={(value) => {
            const next = value === true
            setAccepted(next)
            if (next) setInvalid(false)
          }}
        />
        <FieldContent>
          <FieldLabel htmlFor="checkbox-11-terms">
            I agree to the terms and conditions
          </FieldLabel>
          {invalid && (
            <FieldError>You must accept the terms to continue.</FieldError>
          )}
        </FieldContent>
      </Field>
      <Button type="submit" size="sm" className="self-start">
        Continue
      </Button>
    </form>
  )
}
```