Checkbox

A checkbox input with support for checked, indeterminate, and disabled states across multiple variants.

Playground

Controls

Variant

Size

Checked

Indeterminate

Disabled

Required

Label

Label Position

Name

Value

Labels

Theme

HTMLReact

ShareCopy

Usage

<lt-checkbox label="Accept terms and conditions"></lt-checkbox>
<lt-checkbox label="Enable notifications" variant="success" checked></lt-checkbox>
<lt-checkbox label="Unavailable option" disabled></lt-checkbox>

<lt-checkbox id="terms" label="Accept terms and conditions"></lt-checkbox>

<script>
document.getElementById('terms').addEventListener('change', (e) => {
  console.log('checked:', e.detail.checked);
});
</script>

import { Checkbox } from '@latty-ds/react';

<Checkbox label="Accept terms and conditions" />
<Checkbox label="Enable notifications" variant="success" checked />
<Checkbox label="Unavailable option" disabled />

<Checkbox
label="Accept terms and conditions"
onChange={(e) => console.log('checked:', e.detail.checked)}
/>

<script setup>
import { ref } from 'vue'
const accepted = ref(false)
</script>

<template>
<lt-checkbox label="Accept terms and conditions"></lt-checkbox>
<lt-checkbox label="Enable notifications" variant="success" checked></lt-checkbox>
<lt-checkbox label="Unavailable option" disabled></lt-checkbox>

<lt-checkbox
label="Accept terms and conditions"
@change="(e) => accepted = e.detail.checked"></lt-checkbox>

</template>

API