Checkbox

---
import { Checkbox } from '@santi020k/lumen-astro'
---

<div style="display: grid; gap: 0.5rem;">
  <label>
    <Checkbox name="updates" /> Email me product updates
  </label>
  <label>
    <Checkbox checked name="terms" /> Accept terms (checked)
  </label>
  <label>
    <Checkbox id="ex-checkbox-indeterminate" name="permissions" /> Some permissions selected
  </label>
  <label>
    <Checkbox disabled name="legacy" /> Legacy option (disabled)
  </label>
</div>

<script>
  const checkbox = document.querySelector<HTMLInputElement>('#ex-checkbox-indeterminate')

  if (checkbox) {
    checkbox.indeterminate = true
  }
</script>

import { Checkbox } from '@santi020k/lumen-react'

export const Example = () => (
  <>
    <div style={{ display: 'grid', gap: '0.5rem' }}>
      <label>
        <Checkbox name="updates" /> Email me product updates
      </label>
      <label>
        <Checkbox defaultChecked name="terms" /> Accept terms (checked)
      </label>
      <label>
        <Checkbox id="ex-checkbox-indeterminate" name="permissions" /> Some permissions selected
      </label>
      <label>
        <Checkbox disabled name="legacy" /> Legacy option (disabled)
      </label>
    </div>

    <script>
      const checkbox = document.querySelector<HTMLInputElement>('#ex-checkbox-indeterminate')

      if (checkbox) {
        checkbox.indeterminate = true
      }
    </script>
  </>
)

<script type="module">
  import { defineLumenElements } from '@santi020k/lumen-elements/define'

  defineLumenElements()
</script>

<div style="display: grid; gap: 0.5rem;">
  <label>
    <lumen-checkbox name="updates"></lumen-checkbox> Email me product updates
  </label>
  <label>
    <lumen-checkbox checked name="terms"></lumen-checkbox> Accept terms (checked)
  </label>
  <label>
    <lumen-checkbox id="ex-checkbox-indeterminate" name="permissions"></lumen-checkbox> Some permissions selected
  </label>
  <label>
    <lumen-checkbox disabled name="legacy"></lumen-checkbox> Legacy option (disabled)
  </label>
</div>

<script>
  const checkbox = document.querySelector<HTMLInputElement>('#ex-checkbox-indeterminate')

  if (checkbox) {
    checkbox.indeterminate = true
  }
</script>