Checkbox with label and description

<script setup lang="ts">
import { Checkbox } from "@/components/ui/checkbox"
import { Field, FieldContent, FieldDescription, FieldLabel } from "@/components/ui/field"
</script>

<template>
  <Field orientation="horizontal" class="w-auto max-w-xs">
    <Checkbox id="terms-2" :default-value="true" />
    <FieldContent>
      <FieldLabel for="terms-2">Accept terms and conditions</FieldLabel>
      <FieldDescription>
        This checkbox is used to accept the terms and conditions.
      </FieldDescription>
    </FieldContent>
  </Field>
</template>