Checkbox

#Basic usage

Ship the registerOutline the storyArchived

checkbox/basic.vue

<script setup lang="ts">
import { check } from "@bysages/icons";
import { Checkbox, Icon } from "@bysages/vue";
</script>

<template>
  <div class="grid gap-3 w-full">
    <Checkbox.Root default-checked>
      <Checkbox.Control>
        <Checkbox.Indicator>
          <Icon :glyph="check" />
        </Checkbox.Indicator>
      </Checkbox.Control>
      <Checkbox.Label>Ship the register</Checkbox.Label>
      <Checkbox.HiddenInput />
    </Checkbox.Root>
    <Checkbox.Root>
      <Checkbox.Control>
        <Checkbox.Indicator>
          <Icon :glyph="check" />
        </Checkbox.Indicator>
      </Checkbox.Control>
      <Checkbox.Label>Outline the story</Checkbox.Label>
      <Checkbox.HiddenInput />
    </Checkbox.Root>
    <Checkbox.Root disabled>
      <Checkbox.Control>
        <Checkbox.Indicator>
          <Icon :glyph="check" />
        </Checkbox.Indicator>
      </Checkbox.Control>
      <Checkbox.Label>Archived</Checkbox.Label>
      <Checkbox.HiddenInput />
    </Checkbox.Root>
  </div>
</template>

#Props

#Control

A styled part — no props of its own; it takes the anatomy's shared styling.

#GroupProvider

Prop	Type	Default	Description
`value`	`UnwrapRef<UseCheckboxGroupReturn>`		—

#Group

Prop	Type	Description
`defaultValue`	`string[]`	The initial value of `value` when uncontrolled
`disabled`	`boolean`	If `true`, the checkbox group is disabled
`invalid`	`boolean`	If `true`, the checkbox group is invalid
`maxSelectedValues`	`number`	The maximum number of selected values
`modelValue`	`string[]`	The controlled value of the checkbox group
`name`	`string`	The name of the input fields in the checkbox group (Useful for form submission).
`readOnly`	`boolean`	If `true`, the checkbox group is read-only

#HiddenInput

A styled part — no props of its own; it takes the anatomy's shared styling.

#Indicator

Prop	Type	Default	Description
`indeterminate`	`boolean`		—

#Label

A styled part — no props of its own; it takes the anatomy's shared styling.

#Root

Prop	Type	Default	Description
`size`	`String as PropType<"sm" \| "md" \| "lg">`	`"md"`	One rung for the control's box: the tick scales with it.
`checked`	`checkbox.CheckedState`		The controlled checked state of the checkbox
`defaultChecked`	`checkbox.CheckedState`		The initial checked state of the checkbox when rendered. Use when you don't need to control the checked state of the checkbox.
`disabled`	`boolean`		Whether the checkbox is disabled
`form`	`string`		The id of the form that the checkbox belongs to.
`id`	`string`		The unique identifier of the machine.
`ids`	`Partial<{ root: string; hiddenInput: string; control: string; label: string; }>`		The ids of the elements in the checkbox. Useful for composition.
`invalid`	`boolean`		Whether the checkbox is invalid
`name`	`string`		The name of the input field in a checkbox. Useful for form submission.
`readOnly`	`boolean`		Whether the checkbox is read-only
`required`	`boolean`		Whether the checkbox is required
`value`	`string`	`"on"`	The value of checkbox input. Useful for form submission.