pages/packages/ui/src/components/base/Checkbox.vue

<template>
  <div
    class="checkbox-outer button-within"
    :class="{ disabled }"
    role="presentation"
    @click="toggle"
  >
    <button
      class="checkbox border-none"
      role="checkbox"
      :disabled="disabled"
      :class="{ checked: modelValue, collapsing: collapsingToggleStyle }"
      :aria-label="description"
      :aria-checked="modelValue"
    >
      <MinusIcon v-if="indeterminate" aria-hidden="true" />
      <CheckIcon v-else-if="modelValue && !collapsingToggleStyle" aria-hidden="true" />
      <DropdownIcon v-else-if="collapsingToggleStyle" aria-hidden="true" />
    </button>
    <!-- aria-hidden is set so screenreaders only use the <button>'s aria-label -->
    <p v-if="label" aria-hidden="true" class="checkbox-label">
      {{ label }}
    </p>
    <slot v-else />
  </div>
</template>
<script setup lang="ts">
import { CheckIcon, DropdownIcon, MinusIcon } from '@modrinth/assets'

const emit = defineEmits<{
  'update:modelValue': [boolean]
}>()

const props = withDefaults(
  defineProps<{
    label?: string
    disabled?: boolean
    description?: string
    modelValue: boolean
    clickEvent?: () => void
    collapsingToggleStyle?: boolean
    indeterminate?: boolean
  }>(),
  {
    label: '',
    disabled: false,
    description: '',
    modelValue: false,
    clickEvent: () => {},
    collapsingToggleStyle: false,
    indeterminate: false,
  },
)

function toggle() {
  if (!props.disabled) {
    emit('update:modelValue', !props.modelValue)
  }
}
</script>

<style lang="scss" scoped>
.checkbox-outer {
  display: flex;
  align-items: center;
  cursor: pointer;

  p {
    user-select: none;
    padding: 0.2rem 0;
    margin: 0;
  }

  &.disabled {
    cursor: not-allowed;
  }
}

.checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;

  min-width: 1rem;
  min-height: 1rem;

  padding: 0;
  margin: 0 0.5rem 0 0;

  color: var(--color-contrast);
  background-color: var(--color-button-bg);
  border-radius: var(--radius-xs);
  box-shadow:
    var(--shadow-inset-sm),
    0 0 0 0 transparent;

  &.checked {
    background-color: var(--color-brand);

    svg {
      color: var(--color-accent-contrast);
    }
  }

  svg {
    color: var(--color-secondary);
    stroke-width: 0.2rem;
    height: 0.8rem;
    width: 0.8rem;
    flex-shrink: 0;
  }

  &.collapsing {
    background-color: transparent !important;
    box-shadow: none;

    svg {
      color: inherit;
      height: 1rem;
      width: 1rem;
      transition: transform 0.25s ease-in-out;

      @media (prefers-reduced-motion) {
        transition: none !important;
      }
    }

    &.checked {
      svg {
        transform: rotate(180deg);
      }
    }
  }

  &:disabled {
    box-shadow: none;
    cursor: not-allowed;
  }
}

.checkbox-label {
  color: var(--color-base);
}
</style>