diff --git a/app/components/Checkbox/Base.vue b/app/components/Checkbox/Base.vue
new file mode 100644
index 000000000..d415f1b5f
--- /dev/null
+++ b/app/components/Checkbox/Base.vue
@@ -0,0 +1,69 @@
+<script setup lang="ts">
+const model = defineModel<boolean>()
+
+const props = withDefaults(
+  defineProps<{
+    disabled?: boolean
+    size?: 'small' | 'medium'
+    hideRadio?: boolean
+    value: string
+
+    indeterminate?: boolean
+
+    variant?: 'default' | 'tag'
+
+    hideCheckbox?: boolean
+
+    /**
+     * type should never be used, because this will always be a radio button.
+     *
+     * If you want a link use `TagLink` instead.
+     *  */
+    type?: never
+  }>(),
+  {
+    size: 'medium',
+    variant: 'default',
+  },
+)
+
+const el = useTemplateRef('el')
+
+defineExpose({
+  focus: () => el.value?.focus(),
+  getBoundingClientRect: () => el.value?.getBoundingClientRect(),
+})
+
+const uid = useId()
+const internalId = `checkbox-${uid}`
+</script>
+
+<template>
+  <label
+    :htmlFor="internalId"
+    class="text-fg-muted hover:(text-fg) inline-flex items-center font-mono rounded transition-colors duration-200 has-checked:(hover:(text-fg)) has-disabled:(opacity-50 pointer-events-none)"
+    :class="{
+      'bg-bg-muted hover:(bg-fg/10)': variant === 'tag',
+      'has-checked:(bg-fg/20 text-fg)': variant === 'tag' && !hideCheckbox,
+      'has-checked:(bg-fg text-bg)': variant === 'tag' && hideCheckbox,
+      'has-checked:(text-fg)': variant !== 'tag',
+      'text-sm': size === 'medium',
+      'text-xs': size === 'small',
+      'px-4 py-2': size === 'medium' && variant === 'tag',
+      'px-2 py-0.5': size === 'small' && variant === 'tag',
+    }"
+  >
+    <input
+      type="checkbox"
+      :value="props.value"
+      :checked="model"
+      :id="internalId"
+      :disabled="props.disabled ? true : undefined"
+      @change="$emit('update:modelValue', !model)"
+      :indeterminate="props.indeterminate"
+      class="size-[1em] bg-bg-muted border-border rounded disabled:opacity-50 me-1"
+      :class="{ 'sr-only': hideCheckbox }"
+    />
+    <slot />
+  </label>
+</template>
diff --git a/app/components/ColumnPicker.vue b/app/components/ColumnPicker.vue
index 7dfe611c1..e2347c1be 100644
--- a/app/components/ColumnPicker.vue
+++ b/app/components/ColumnPicker.vue
@@ -101,20 +101,18 @@ function handleReset() {
             <label
               v-for="column in toggleableColumns"
               :key="column.id"
-              class="flex gap-2 items-center px-3 py-2 transition-colors duration-200"
-              :class="column.disabled ? 'opacity-50 cursor-not-allowed' : 'hover:bg-bg-muted'"
+              class="flex gap-2 items-center px-3 py-2"
             >
-              <input
-                type="checkbox"
-                :checked="column.visible"
+              <CheckboxBase
+                :model-value="column.visible"
                 :disabled="column.disabled"
+                :value="column.id"
                 :aria-describedby="column.disabled ? `${column.id}-disabled-reason` : undefined"
-                class="w-4 h-4 accent-fg bg-bg-muted border-border rounded disabled:opacity-50"
-                @change="!column.disabled && emit('toggle', column.id)"
-              />
-              <span class="text-sm text-fg-muted font-mono flex-1">
+                class="w-full"
+                @update:modelValue="emit('toggle', column.id)"
+              >
                 {{ getColumnLabel(column.id) }}
-              </span>
+              </CheckboxBase>
               <TooltipApp
                 v-if="column.disabled"
                 :id="`${column.id}-disabled-reason`"
@@ -129,8 +127,8 @@ function handleReset() {
             </label>
           </div>
 
-          <div class="border-t border-border py-1">
-            <ButtonBase @click="handleReset">
+          <div class="border-t border-border p-1">
+            <ButtonBase @click="handleReset" class="w-full">
               {{ $t('filters.columns.reset') }}
             </ButtonBase>
           </div>
diff --git a/app/components/Compare/FacetSelector.vue b/app/components/Compare/FacetSelector.vue
index f8f39aee7..101ea87af 100644
--- a/app/components/Compare/FacetSelector.vue
+++ b/app/components/Compare/FacetSelector.vue
@@ -25,72 +25,41 @@ function isCategoryNoneSelected(category: string): boolean {
 </script>
 
 <template>
-  <div class="space-y-3" role="group" :aria-label="$t('compare.facets.group_label')">
+  <div class="space-y-6" role="group" :aria-label="$t('compare.facets.group_label')">
     <div v-for="category in categoryOrder" :key="category">
-      <!-- Category header with all/none buttons -->
-      <div class="flex items-center gap-2 mb-2">
-        <span class="text-3xs text-fg-subtle uppercase tracking-wider">
-          {{ getCategoryLabel(category) }}
-        </span>
-        <!-- TODO: These should be radios, since they are mutually exclusive, and currently this behavior is faked with buttons -->
-        <ButtonBase
-          :aria-label="
-            $t('compare.facets.select_category', { category: getCategoryLabel(category) })
-          "
-          :aria-pressed="isCategoryAllSelected(category)"
-          :disabled="isCategoryAllSelected(category)"
-          @click="selectCategory(category)"
-          size="small"
-        >
-          {{ $t('compare.facets.all') }}
-        </ButtonBase>
-        <span class="text-2xs text-fg-muted/40">/</span>
-        <ButtonBase
-          :aria-label="
-            $t('compare.facets.deselect_category', { category: getCategoryLabel(category) })
-          "
-          :aria-pressed="isCategoryNoneSelected(category)"
-          :disabled="isCategoryNoneSelected(category)"
-          @click="deselectCategory(category)"
-          size="small"
-        >
-          {{ $t('compare.facets.none') }}
-        </ButtonBase>
-      </div>
+      <CheckboxBase
+        :aria-label="$t('compare.facets.select_category', { category: getCategoryLabel(category) })"
+        :model-value="isCategoryAllSelected(category)"
+        :value="category"
+        @update:model-value="
+          isCategoryAllSelected(category) ? deselectCategory(category) : selectCategory(category)
+        "
+        :indeterminate="!isCategoryAllSelected(category) && !isCategoryNoneSelected(category)"
+        class="uppercase tracking-widest mb-2"
+      >
+        {{ getCategoryLabel(category) }}
+      </CheckboxBase>
 
       <!-- Facet buttons -->
       <div class="flex items-center gap-1.5 flex-wrap" role="group">
         <!-- TODO: These should be checkboxes -->
-        <ButtonBase
+        <CheckboxBase
           v-for="facet in facetsByCategory[category]"
           :key="facet.id"
           size="small"
+          variant="tag"
+          hide-checkbox
           :title="facet.comingSoon ? $t('compare.facets.coming_soon') : facet.description"
           :disabled="facet.comingSoon"
-          :aria-pressed="isFacetSelected(facet.id)"
-          :aria-label="facet.label"
-          class="gap-1 px-1.5 rounded transition-colors focus-visible:outline-accent/70"
-          :class="
-            facet.comingSoon
-              ? 'text-fg-subtle/50 bg-bg-subtle border-border-subtle cursor-not-allowed'
-              : isFacetSelected(facet.id)
-                ? 'text-fg-muted bg-bg-muted'
-                : 'text-fg-subtle bg-bg-subtle border-border-subtle hover:text-fg-muted hover:border-border'
-          "
-          @click="!facet.comingSoon && toggleFacet(facet.id)"
-          :classicon="
-            facet.comingSoon
-              ? undefined
-              : isFacetSelected(facet.id)
-                ? 'i-lucide:check'
-                : 'i-lucide:plus'
-          "
+          :model-value="isFacetSelected(facet.id)"
+          :value="facet.id"
+          @update:model-value="!facet.comingSoon && toggleFacet(facet.id)"
         >
           {{ facet.label }}
           <span v-if="facet.comingSoon" class="text-4xs"
             >({{ $t('compare.facets.coming_soon') }})</span
           >
-        </ButtonBase>
+        </CheckboxBase>
       </div>
     </div>
   </div>
diff --git a/app/components/Filter/Chips.vue b/app/components/Filter/Chips.vue
index 6279da858..e426affcb 100644
--- a/app/components/Filter/Chips.vue
+++ b/app/components/Filter/Chips.vue
@@ -19,25 +19,19 @@ const emit = defineEmits<{
         <span class="max-w-32 truncate">{{
           Array.isArray(chip.value) ? chip.value.join(', ') : chip.value
         }}</span>
-        <button
-          type="button"
-          class="flex items-center p-1 -m-1 hover:text-fg rounded-full transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
+        <ButtonBase
           :aria-label="$t('filters.remove_filter', { label: chip.label })"
+          size="small"
           @click="emit('remove', chip)"
         >
           <span class="i-lucide:x w-3 h-3" aria-hidden="true" />
-        </button>
+        </ButtonBase>
       </TagStatic>
     </TransitionGroup>
 
-    <button
-      v-if="chips.length > 1"
-      type="button"
-      class="text-sm p-0.5 text-fg-muted hover:text-fg underline transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-2"
-      @click="emit('clearAll')"
-    >
+    <ButtonBase v-if="chips.length > 1" type="button" size="small" @click="emit('clearAll')">
       {{ $t('filters.clear_all') }}
-    </button>
+    </ButtonBase>
   </div>
 </template>
 
diff --git a/app/components/Filter/Panel.vue b/app/components/Filter/Panel.vue
index 788403ad3..611f4fa71 100644
--- a/app/components/Filter/Panel.vue
+++ b/app/components/Filter/Panel.vue
@@ -216,27 +216,17 @@ const hasActiveFilters = computed(() => !!filterSummary.value)
               {{ $t('filters.search') }}
             </label>
             <!-- Search scope toggle -->
-            <div
-              class="inline-flex rounded-md border border-border p-0.5 bg-bg"
-              role="group"
-              :aria-label="$t('filters.search_scope')"
-            >
-              <button
+            <div class="inline-flex gap-x-4" role="group" :aria-label="$t('filters.search_scope')">
+              <RadioBase
                 v-for="scope in SEARCH_SCOPE_VALUES"
                 :key="scope"
-                type="button"
-                class="px-2 py-0.5 text-xs font-mono rounded-sm transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
-                :class="
-                  filters.searchScope === scope
-                    ? 'bg-bg-muted text-fg'
-                    : 'text-fg-muted hover:text-fg'
-                "
-                :aria-pressed="filters.searchScope === scope"
+                :value="scope"
+                :model-value="filters.searchScope"
                 :title="getScopeDescriptionKey(scope)"
-                @click="emit('update:searchScope', scope)"
+                @update:model-value="emit('update:searchScope', scope)"
               >
                 {{ getScopeLabelKey(scope) }}
-              </button>
+              </RadioBase>
             </div>
           </div>
           <InputBase
@@ -257,20 +247,21 @@ const hasActiveFilters = computed(() => !!filterSummary.value)
             {{ $t('filters.weekly_downloads') }}
           </legend>
           <div
-            class="flex flex-wrap gap-2"
+            class="flex flex-wrap gap-8"
             role="radiogroup"
             :aria-label="$t('filters.weekly_downloads')"
           >
-            <TagRadioButton
+            <RadioBase
               v-for="range in DOWNLOAD_RANGES"
               :key="range.value"
               :model-value="filters.downloadRange"
               :value="range.value"
               @update:modelValue="emit('update:downloadRange', $event as DownloadRange)"
               name="range"
+              size="small"
             >
               {{ getDownloadRangeLabelKey(range.value) }}
-            </TagRadioButton>
+            </RadioBase>
           </div>
         </fieldset>
 
@@ -280,20 +271,21 @@ const hasActiveFilters = computed(() => !!filterSummary.value)
             {{ $t('filters.updated_within') }}
           </legend>
           <div
-            class="flex flex-wrap gap-2"
+            class="flex flex-wrap gap-8"
             role="radiogroup"
             :aria-label="$t('filters.updated_within')"
           >
-            <TagRadioButton
+            <RadioBase
               v-for="option in UPDATED_WITHIN_OPTIONS"
               :key="option.value"
               :model-value="filters.updatedWithin"
               :value="option.value"
               name="updatedWithin"
               @update:modelValue="emit('update:updatedWithin', $event as UpdatedWithin)"
+              size="small"
             >
               {{ getUpdatedWithinLabelKey(option.value) }}
-            </TagRadioButton>
+            </RadioBase>
           </div>
         </fieldset>
 
@@ -305,17 +297,18 @@ const hasActiveFilters = computed(() => !!filterSummary.value)
               {{ $t('filters.columns.coming_soon') }}
             </span>
           </legend>
-          <div class="flex flex-wrap gap-2" role="radiogroup" :aria-label="$t('filters.security')">
-            <TagRadioButton
+          <div class="flex flex-wrap gap-8" role="radiogroup" :aria-label="$t('filters.security')">
+            <RadioBase
               v-for="security in SECURITY_FILTER_VALUES"
               :key="security"
               disabled
               :model-value="filters.security"
               :value="security"
               name="security"
+              size="small"
             >
               {{ getSecurityLabelKey(security) }}
-            </TagRadioButton>
+            </RadioBase>
           </div>
         </fieldset>
 
@@ -325,23 +318,21 @@ const hasActiveFilters = computed(() => !!filterSummary.value)
             {{ $t('filters.keywords') }}
           </legend>
           <div class="flex flex-wrap gap-1.5" role="group" :aria-label="$t('filters.keywords')">
-            <ButtonBase
+            <CheckboxBase
               v-for="keyword in displayedKeywords"
               :key="keyword"
               size="small"
-              :aria-pressed="filters.keywords.includes(keyword)"
-              @click="emit('toggleKeyword', keyword)"
+              variant="tag"
+              hide-checkbox
+              :v-model="filters.keywords.includes(keyword)"
+              @update:modelValue="emit('toggleKeyword', keyword)"
+              :value="keyword"
             >
               {{ keyword }}
-            </ButtonBase>
-            <button
-              v-if="hasMoreKeywords"
-              type="button"
-              class="text-xs text-fg-subtle self-center font-mono hover:text-fg transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
-              @click="showAllKeywords = true"
-            >
+            </CheckboxBase>
+            <ButtonBase v-if="hasMoreKeywords" size="small" @click="showAllKeywords = true">
               {{ $t('filters.more_keywords', { count: (availableKeywords?.length ?? 0) - 20 }) }}
-            </button>
+            </ButtonBase>
           </div>
         </fieldset>
       </div>
diff --git a/app/components/Package/Card.vue b/app/components/Package/Card.vue
index 12d25268b..a83e4c999 100644
--- a/app/components/Package/Card.vue
+++ b/app/components/Package/Card.vue
@@ -167,16 +167,19 @@ const numberFormatter = useNumberFormatter()
       class="relative z-10 flex flex-wrap gap-1.5 mt-3 pt-3 border-t border-border list-none m-0 p-0 pointer-events-none items-center"
     >
       <li v-for="keyword in result.package.keywords.slice(0, 5)" :key="keyword">
-        <ButtonBase
+        <CheckboxBase
           class="pointer-events-auto"
+          :key="keyword"
+          variant="tag"
+          hide-checkbox
           size="small"
-          :aria-pressed="props.filters?.keywords.includes(keyword)"
+          :model-value="props.filters?.keywords.includes(keyword)"
           :title="`Filter by ${keyword}`"
-          :data-result-index="index"
-          @click.stop="emit('clickKeyword', keyword)"
+          @update:modelValue="emit('clickKeyword', keyword)"
+          :value="keyword"
         >
           {{ keyword }}
-        </ButtonBase>
+        </CheckboxBase>
       </li>
       <li>
         <span
diff --git a/app/components/Package/TableRow.vue b/app/components/Package/TableRow.vue
index 017d1b289..e193d35a9 100644
--- a/app/components/Package/TableRow.vue
+++ b/app/components/Package/TableRow.vue
@@ -130,17 +130,19 @@ const allMaintainersText = computed(() => {
         class="relative z-10 flex flex-wrap gap-1 justify-end"
         :aria-label="$t('package.card.keywords')"
       >
-        <ButtonBase
+        <CheckboxBase
           v-for="keyword in pkg.keywords.slice(0, 3)"
           :key="keyword"
+          variant="tag"
+          hide-checkbox
           size="small"
-          :aria-pressed="props.filters?.keywords.includes(keyword)"
+          :model-value="props.filters?.keywords.includes(keyword)"
           :title="`Filter by ${keyword}`"
-          @click.stop="emit('clickKeyword', keyword)"
-          :class="{ 'group-hover:bg-bg-elevated': !props.filters?.keywords.includes(keyword) }"
+          @update:modelValue="emit('clickKeyword', keyword)"
+          :value="keyword"
         >
           {{ keyword }}
-        </ButtonBase>
+        </CheckboxBase>
         <span
           v-if="pkg.keywords.length > 3"
           class="text-fg-subtle text-xs"
diff --git a/app/components/Package/VersionDistribution.vue b/app/components/Package/VersionDistribution.vue
index 7513f6e4b..e00de239d 100644
--- a/app/components/Package/VersionDistribution.vue
+++ b/app/components/Package/VersionDistribution.vue
@@ -285,20 +285,6 @@ const xAxisLabels = computed(() => {
   return chartDataset.value.map(item => item.name)
 })
 
-// Handle keyboard navigation for semver group toggle
-function handleGroupingKeydown(event: KeyboardEvent) {
-  if (pending.value) return
-  if (event.key === 'Enter' || event.key === ' ') {
-    event.preventDefault()
-    // Toggle between major and minor
-    groupingMode.value = groupingMode.value === 'major' ? 'minor' : 'major'
-  } else if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
-    event.preventDefault()
-    // Arrow keys also toggle
-    groupingMode.value = groupingMode.value === 'major' ? 'minor' : 'major'
-  }
-}
-
 // Calculate last week date range (matches npm's "last-week" API)
 const startDate = computed(() => {
   const today = new Date()
@@ -326,48 +312,29 @@ const endDate = computed(() => {
     :aria-busy="pending ? 'true' : 'false'"
   >
     <div class="w-full mb-4 flex flex-col gap-3">
-      <div class="flex flex-col sm:flex-row gap-3 sm:gap-2 sm:items-end">
+      <div class="flex flex-col sm:flex-row gap-3 sm:gap-4 sm:items-start">
         <div class="flex flex-col gap-1 w-fit sm:shrink-0">
           <label class="text-3xs font-mono text-fg-subtle tracking-wide uppercase">
             {{ $t('package.versions.distribution_title') }}
           </label>
-          <div
-            class="flex items-center bg-bg-subtle border border-border rounded-md"
-            role="group"
-            :aria-label="$t('package.versions.distribution_title')"
-            tabindex="0"
-            @keydown="handleGroupingKeydown"
-          >
-            <button
-              type="button"
-              :class="[
-                'px-4 py-1.75 font-mono text-sm transition-colors rounded-s-md',
-                groupingMode === 'major'
-                  ? 'bg-accent text-bg font-medium'
-                  : 'text-fg-subtle hover:text-fg hover:bg-bg-subtle/50',
-              ]"
-              :aria-pressed="groupingMode === 'major'"
+          <div class="flex flex-col">
+            <RadioBase
+              :model-value="groupingMode"
+              :value="'major'"
               :disabled="pending"
-              tabindex="-1"
-              @click="groupingMode = 'major'"
+              @update:modelValue="groupingMode = 'major'"
             >
               {{ $t('package.versions.grouping_major') }}
-            </button>
-            <button
-              type="button"
-              :class="[
-                'px-4 py-1.75 font-mono text-sm transition-colors rounded-e-md border-is border-border',
-                groupingMode === 'minor'
-                  ? 'bg-accent text-bg font-medium'
-                  : 'text-fg-subtle hover:text-fg hover:bg-bg-subtle/50',
-              ]"
-              :aria-pressed="groupingMode === 'minor'"
+            </RadioBase>
+            <RadioBase
+              :model-value="groupingMode"
+              :value="'minor'"
               :disabled="pending"
-              tabindex="-1"
               @click="groupingMode = 'minor'"
+              @update:model-value="groupingMode = 'minor'"
             >
               {{ $t('package.versions.grouping_minor') }}
-            </button>
+            </RadioBase>
           </div>
         </div>
 
diff --git a/app/components/Radio/Base.vue b/app/components/Radio/Base.vue
new file mode 100644
index 000000000..46d3d33d8
--- /dev/null
+++ b/app/components/Radio/Base.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+const model = defineModel<string>()
+
+const props = withDefaults(
+  defineProps<{
+    disabled?: boolean
+    size?: 'small' | 'medium'
+    hideRadio?: boolean
+    value: string
+
+    /**
+     * type should never be used, because this will always be a radio button.
+     *
+     * If you want a link use `TagLink` instead.
+     *  */
+    type?: never
+
+    /** Shouldn't try to set `checked` explicitly, is handled internally */
+    checked?: never
+  }>(),
+  {
+    size: 'medium',
+  },
+)
+
+const el = useTemplateRef('el')
+
+defineExpose({
+  focus: () => el.value?.focus(),
+  getBoundingClientRect: () => el.value?.getBoundingClientRect(),
+})
+
+const uid = useId()
+const internalId = `${model.value}-${uid}`
+const checked = computed(() => model.value === props.value)
+
+/** Todo: This shouldn't be necessary, but using v-model on `input type=radio` doesn't work as expected in Vue */
+const onChange = () => {
+  model.value = props.value
+}
+</script>
+
+<template>
+  <label
+    class="text-fg-muted hover:(text-fg) inline-flex items-center font-mono rounded transition-colors duration-200 has-checked:(text-fg hover:(text-fg)) has-disabled:(opacity-50 pointer-events-none) before:content-['']"
+    :class="{
+      'text-sm': size === 'medium',
+      'text-xs': size === 'small',
+    }"
+    :htmlFor="internalId"
+  >
+    <input
+      type="radio"
+      :id="internalId"
+      :value="props.value"
+      :checked="checked"
+      :disabled="props.disabled ? true : undefined"
+      @change="onChange"
+      class="me-1"
+    />
+    <slot />
+  </label>
+</template>
diff --git a/app/components/Tag/RadioButton.vue b/app/components/Tag/RadioButton.vue
deleted file mode 100644
index aa3778cbd..000000000
--- a/app/components/Tag/RadioButton.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<script setup lang="ts">
-const model = defineModel<string>()
-
-const props = defineProps<{
-  disabled?: boolean
-  /**
-   * type should never be used, because this will always be a radio button.
-   *
-   * If you want a link use `TagLink` instead.
-   *  */
-  type?: never
-
-  /** Shouldn't try to set `checked` explicitly, is handled internally */
-  checked?: never
-  value: string
-}>()
-
-const uid = useId()
-const internalId = `${model.value}-${uid}`
-const checked = computed(() => model.value === props.value)
-/** Todo: This shouldn't be necessary, but using v-model on `input type=radio` doesn't work as expected in Vue */
-const onChange = () => {
-  model.value = props.value
-}
-</script>
-
-<template>
-  <div>
-    <input
-      type="radio"
-      :id="internalId"
-      :value="props.value"
-      :checked="checked"
-      :disabled="props.disabled ? true : undefined"
-      @change="onChange"
-      class="peer sr-only"
-    />
-    <label
-      class="bg-bg-muted text-fg-muted border-border hover:(text-fg border-border-hover) inline-flex items-center px-2 py-0.5 text-xs font-mono border rounded transition-colors duration-200 peer-focus-visible:(outline-2 outline-accent/70 outline-offset-2) border-none peer-checked:(bg-fg text-bg border-fg hover:(text-text-bg/50)) peer-disabled:(opacity-50 pointer-events-none)"
-      :htmlFor="internalId"
-    >
-      <slot />
-    </label>
-  </div>
-</template>
diff --git a/app/pages/compare.vue b/app/pages/compare.vue
index 9f7d7e5a7..5f6383413 100644
--- a/app/pages/compare.vue
+++ b/app/pages/compare.vue
@@ -164,30 +164,17 @@ useSeoMeta({
 
       <!-- Facet selector -->
       <section class="mb-8" aria-labelledby="facets-heading">
-        <div class="flex items-center gap-2 mb-3">
-          <h2 id="facets-heading" class="text-xs text-fg-subtle uppercase tracking-wider">
-            {{ $t('compare.packages.section_facets') }}
-          </h2>
-          <ButtonBase
-            size="small"
-            :aria-pressed="isAllSelected"
-            :disabled="isAllSelected"
-            :aria-label="$t('compare.facets.select_all')"
-            @click="selectAll"
-          >
-            {{ $t('compare.facets.all') }}
-          </ButtonBase>
-          <span class="text-3xs text-fg-muted/40" aria-hidden="true">/</span>
-          <ButtonBase
-            size="small"
-            :aria-pressed="isNoneSelected"
-            :disabled="isNoneSelected"
-            :aria-label="$t('compare.facets.deselect_all')"
-            @click="deselectAll"
-          >
-            {{ $t('compare.facets.none') }}
-          </ButtonBase>
-        </div>
+        <CheckboxBase
+          :aria-label="$t('compare.facets.select_all')"
+          :model-value="isAllSelected"
+          value="'all'"
+          @update:model-value="isAllSelected ? deselectAll() : selectAll()"
+          :indeterminate="!isAllSelected && !isNoneSelected"
+          class="uppercase tracking-widest mb-2"
+        >
+          {{ $t('compare.packages.section_facets') }}
+        </CheckboxBase>
+
         <CompareFacetSelector />
       </section>
 
diff --git a/test/nuxt/a11y.spec.ts b/test/nuxt/a11y.spec.ts
index 23ffb915a..e3077dd76 100644
--- a/test/nuxt/a11y.spec.ts
+++ b/test/nuxt/a11y.spec.ts
@@ -183,7 +183,7 @@ import {
   SettingsBgThemePicker,
   SettingsToggle,
   TagStatic,
-  TagRadioButton,
+  RadioBase,
   TerminalExecute,
   TerminalInstall,
   TooltipAnnounce,
@@ -430,9 +430,9 @@ describe('component accessibility audits', () => {
     })
   })
 
-  describe('TagRadioButton', () => {
+  describe('RadioBase', () => {
     it('should have no accessibility violations', async () => {
-      const component = await mountSuspended(TagRadioButton, {
+      const component = await mountSuspended(RadioBase, {
         props: { value: 'option1', modelValue: 'option2' },
         slots: { default: 'Tag content' },
       })
@@ -441,7 +441,7 @@ describe('component accessibility audits', () => {
     })
 
     it('should have no accessibility violations when checked', async () => {
-      const component = await mountSuspended(TagRadioButton, {
+      const component = await mountSuspended(RadioBase, {
         props: { value: 'option1', modelValue: 'option1' },
         slots: { default: 'Tag content' },
       })
@@ -450,7 +450,7 @@ describe('component accessibility audits', () => {
     })
 
     it('should have no accessibility violations when disabled', async () => {
-      const component = await mountSuspended(TagRadioButton, {
+      const component = await mountSuspended(RadioBase, {
         props: { value: 'option1', modelValue: 'option2', disabled: true },
         slots: { default: 'Tag content' },
       })