Checkbox

<label class="zui-checkbox">
<input type="checkbox" checked />
Accept terms
</label>

import { Checkbox } from '@mrmartineau/zui/react'

<Checkbox defaultChecked>Accept terms</Checkbox>

---
import { Checkbox } from '@mrmartineau/zui/astro'
---

<Checkbox checked>Accept terms</Checkbox>

import { Checkbox } from '@mrmartineau/zui/solid'

<Checkbox defaultChecked>Accept terms</Checkbox>

<script lang="ts">
import { Checkbox } from '@mrmartineau/zui/svelte'
let accepted = $state(true)
</script>

<Checkbox bind:checked={accepted}>Accept terms</Checkbox>

<template>
<Checkbox checked>Accept terms</Checkbox>
</template>

<script setup>
import { Checkbox } from '@mrmartineau/zui/vue'
</script>

<fieldset class="zui-field-set">
<legend class="zui-field-legend">Interests</legend>
<div class="zui-checkbox-list">
  <label class="zui-checkbox">
    <input type="checkbox" checked />
    Music
  </label>
  <label class="zui-checkbox">
    <input type="checkbox" />
    Sports
  </label>
  <label class="zui-checkbox">
    <input type="checkbox" checked />
    Travel
  </label>
  <label class="zui-checkbox">
    <input type="checkbox" />
    Reading
  </label>
</div>
</fieldset>

import { Checkbox, FieldSet, FieldLegend } from '@mrmartineau/zui/react'

<FieldSet>
<FieldLegend>Interests</FieldLegend>
<div className="zui-checkbox-list">
  <Checkbox defaultChecked>Music</Checkbox>
  <Checkbox>Sports</Checkbox>
  <Checkbox defaultChecked>Travel</Checkbox>
  <Checkbox>Reading</Checkbox>
</div>
</FieldSet>

---
import { Checkbox, FieldSet, FieldLegend } from '@mrmartineau/zui/astro'
---

<FieldSet>
<FieldLegend>Interests</FieldLegend>
<div class="zui-checkbox-list">
  <Checkbox checked>Music</Checkbox>
  <Checkbox>Sports</Checkbox>
  <Checkbox checked>Travel</Checkbox>
  <Checkbox>Reading</Checkbox>
</div>
</FieldSet>

import { Checkbox, FieldSet, FieldLegend } from '@mrmartineau/zui/solid'

<FieldSet>
<FieldLegend>Interests</FieldLegend>
<div class="zui-checkbox-list">
  <Checkbox defaultChecked>Music</Checkbox>
  <Checkbox>Sports</Checkbox>
  <Checkbox defaultChecked>Travel</Checkbox>
  <Checkbox>Reading</Checkbox>
</div>
</FieldSet>

<script lang="ts">
import { Checkbox, FieldSet, FieldLegend } from '@mrmartineau/zui/svelte'
let music = $state(true)
let sports = $state(false)
let travel = $state(true)
let reading = $state(false)
</script>

<FieldSet>
<FieldLegend>Interests</FieldLegend>
<div class="zui-checkbox-list">
  <Checkbox bind:checked={music}>Music</Checkbox>
  <Checkbox bind:checked={sports}>Sports</Checkbox>
  <Checkbox bind:checked={travel}>Travel</Checkbox>
  <Checkbox bind:checked={reading}>Reading</Checkbox>
</div>
</FieldSet>

<template>
<FieldSet>
<FieldLegend>Interests</FieldLegend>
<div class="zui-checkbox-list">
  <Checkbox checked>Music</Checkbox>
  <Checkbox>Sports</Checkbox>
  <Checkbox checked>Travel</Checkbox>
  <Checkbox>Reading</Checkbox>
</div>
</FieldSet>
</template>

<script setup>
import { Checkbox, FieldSet, FieldLegend } from '@mrmartineau/zui/vue'
</script>

<label class="zui-checkbox">
<input type="checkbox" disabled checked />
Disabled checked
</label>
<label class="zui-checkbox">
<input type="checkbox" disabled />
Disabled unchecked
</label>

import { Checkbox } from '@mrmartineau/zui/react'

<Checkbox disabled defaultChecked>Disabled checked</Checkbox>
<Checkbox disabled>Disabled unchecked</Checkbox>

---
import { Checkbox } from '@mrmartineau/zui/astro'
---

<Checkbox disabled checked>Disabled checked</Checkbox>
<Checkbox disabled>Disabled unchecked</Checkbox>

import { Checkbox } from '@mrmartineau/zui/solid'

<Checkbox disabled defaultChecked>Disabled checked</Checkbox>
<Checkbox disabled>Disabled unchecked</Checkbox>

<script lang="ts">
import { Checkbox } from '@mrmartineau/zui/svelte'
</script>

<Checkbox disabled checked>Disabled checked</Checkbox>
<Checkbox disabled>Disabled unchecked</Checkbox>

<template>
<Checkbox disabled checked>Disabled checked</Checkbox>
<Checkbox disabled>Disabled unchecked</Checkbox>
</template>

<script setup>
import { Checkbox } from '@mrmartineau/zui/vue'
</script>

<div class="zui-squircle-all">
<label class="zui-checkbox">
  <input type="checkbox" checked />
  Squircle checkbox
</label>
</div>

import { Checkbox } from '@mrmartineau/zui/react'

<div className="zui-squircle-all">
<Checkbox defaultChecked>Squircle checkbox</Checkbox>
</div>

---
import { Checkbox } from '@mrmartineau/zui/astro'
---

<div class="zui-squircle-all">
<Checkbox checked>Squircle checkbox</Checkbox>
</div>

import { Checkbox } from '@mrmartineau/zui/solid'

<div class="zui-squircle-all">
<Checkbox defaultChecked>Squircle checkbox</Checkbox>
</div>

<script lang="ts">
import { Checkbox } from '@mrmartineau/zui/svelte'
let checked = $state(true)
</script>

<div class="zui-squircle-all">
<Checkbox bind:checked={checked}>Squircle checkbox</Checkbox>
</div>

<template>
<div class="zui-squircle-all">
  <Checkbox checked>Squircle checkbox</Checkbox>
</div>
</template>

<script setup>
import { Checkbox } from '@mrmartineau/zui/vue'
</script>