Skip to main content
Browse docs

Marwes documentation

Checkbox

Native checkbox family with one CheckboxField component, two field-level compositions, and shared React/Vue contracts for component and grouped multi-select behavior.

What this family solves

Native checkbox family with one CheckboxField component, two field-level compositions, and shared React/Vue contracts for component and grouped multi-select behavior.

Use when

  • The UI needs one or more native checkbox controls with optional description or error support.
  • The product wants the canonical labeled path for a single checkbox or a multi-select checkbox group without rebuilding the field wiring manually.
  • The team wants React and Vue checkbox behavior to stay aligned through one core recipe, shared field helpers, and shared contract files.

Avoid when

  • A switch, radio group, or always-on content toggle would be the more honest interaction model.
  • The layout only needs a decorative checkmark treatment and does not represent a real form control.
  • The team expects a purpose-wrapper or semantic-metadata layer that the current CheckboxField family does not ship.

Public imports

Choose an adapter in the verified examples. The inventory below reflects each framework package exactly.

React — @marwes-ui/react

Components

CheckboxField, CheckboxGroupField

Types

CheckboxFieldProps, CheckboxGroupFieldOption, CheckboxGroupFieldProps

Vue — @marwes-ui/vue

Components

CheckboxField, CheckboxGroupField

Types

CheckboxFieldProps, CheckboxGroupFieldOption, CheckboxGroupFieldProps

Svelte — @marwes-ui/svelte

Components

CheckboxField, CheckboxGroupField

Types

CheckboxFieldProps, CheckboxGroupFieldOption, CheckboxGroupFieldProps

Verified minimal examples

These examples come from the same fixtures verified by the repository checks.

React

import { CheckboxField, CheckboxGroupField } from "@marwes-ui/react"
import { useState } from "react"

export function Example() {
  const [checked, setChecked] = useState(false)
  const [values, setValues] = useState<string[]>(["1"])

  return (
    <>
      <CheckboxField label="Label" checkbox={{ checked, onCheckedChange: setChecked }} />
      <CheckboxGroupField
        label="Group label"
        options={[
          { value: "1", label: "Label" },
          { value: "2", label: "Label" },
          { value: "3", label: "Label" },
        ]}
        value={values}
        onChange={setValues}
      />
    </>
  )
}

Vue

<script setup lang="ts">
import { ref } from "vue"
import { CheckboxField, CheckboxGroupField } from "@marwes-ui/vue"

const checked = ref(false)
const values = ref<string[]>(["1"])
</script>

<template>
  <CheckboxField
    label="Label"
    :checkbox="{ checked, onCheckedChange: (v) => (checked = v) }"
  />
  <CheckboxGroupField
    label="Group label"
    :options="[
      { value: '1', label: 'Label' },
      { value: '2', label: 'Label' },
      { value: '3', label: 'Label' },
    ]"
    v-model="values"
  />
</template>

Svelte

<script lang="ts">
  import { CheckboxField, CheckboxGroupField } from "@marwes-ui/svelte"

  let checked = $state(false)
  let groupOne = $state(true)
  let groupTwo = $state(false)
  let groupThree = $state(false)
</script>

<CheckboxField
  label="Label"
  bind:checked
/>
<CheckboxGroupField label="Group label" description="Select all that apply">
  <CheckboxField label="First option" bind:checked={groupOne} />
  <CheckboxField label="Second option" bind:checked={groupTwo} />
  <CheckboxField label="Third option" bind:checked={groupThree} />
</CheckboxGroupField>

Accessibility requirements

  • Indeterminate state: Verify indeterminate select-all checkboxes announce their mixed state correctly.
  • Group and item labeling: Keep individual checkbox labels distinct from the surrounding group label in CheckboxGroupField.
  • Connected field wiring: Use the public Field component so labels, helper text, errors, and invalid state stay connected.
  • Manual review boundary: Product-level judgment about when a select-all checkbox should become indeterminate and whether that behavior stays truthful in real flows.
  • Manual review 2: Real browser review for focus visibility and appearance consistency because the family resets native checkbox appearance heavily in CSS.
  • Manual review 3: Whether label, helper text, and error wording stay clear when groups get long or validation messages become more complex.

Theming

Checkbox uses Marwes preset CSS and theme variables. Customize it through the theme passed to MarwesProvider; do not add a second component stylesheet. See the theming guide for configuration and token details.

Resources