Accessibility: Full

Translations: Not Needed

Migration Guide: Work in progress

Checkbox Card

A selectable card component that combines a checkbox with rich content. Perfect for selection interfaces requiring visual hierarchy with titles, descriptions, and optional icons.

Basic Checkbox Card

A simple checkbox card with title and description.

Business Plan

Perfect for growing teams with up to 20 users

 

Vue

<template>
  <HLCheckboxCard
    id="basic-card"
    v-model:checked="singleChecked"
    title="Business Plan"
    description="Perfect for growing teams with up to 20 users"
  />
</template>
<script setup lang="ts">
  import { HLCheckboxCard } from '@platform-ui/highrise'
  import { ref } from 'vue'
  const singleChecked = ref(false)
</script>

Basic Checkbox Card Group

A group of checkbox cards.

Basic Plan

Perfect for small teams starting their journey

 

Pro Plan

Advanced features for growing teams

 

Enterprise Plan

Full suite of features for large organizations

 

Vue

<template>
  <HLCheckboxGroup v-model:value="selectedPlans" direction="vertical">
    <HLSpace vertical size="md">
      <HLCheckboxCard id="basic-plan" value="basic" title="Basic Plan" description="Perfect for small teams starting their journey">
        <template #icon>
          <LayersThree01Icon />
        </template>
      </HLCheckboxCard>
      <HLCheckboxCard id="pro-plan" value="pro" title="Pro Plan" description="Advanced features for growing teams">
        <template #icon>
          <LayersThree01Icon />
        </template>
      </HLCheckboxCard>
      <HLCheckboxCard
        id="enterprise-plan"
        value="enterprise"
        title="Enterprise Plan"
        description="Full suite of features for large organizations"
      >
        <template #icon>
          <LayersThree01Icon />
        </template>
      </HLCheckboxCard>
    </HLSpace>
  </HLCheckboxGroup>
</template>
<script setup lang="ts">
  import { ref } from 'vue'
  import { HLCheckboxCard, HLCheckboxGroup, HLSpace } from '@platform-ui/highrise'
  import { LayersThree01Icon } from '@gohighlevel/ghl-icons/24/outline'

  const selectedPlans = ref(['basic']) // Pre-selected value
</script>

With Icon

Checkbox card with a custom icon for enhanced visual hierarchy.

Enterprise Plan

Unlimited users and advanced features

 

Vue

<template>
  <HLCheckboxCard
    id="icon-card"
    v-model:checked="singleChecked"
    title="Enterprise Plan"
    description="Unlimited users and advanced features"
  >
    <template #icon>
      <LayersThree01Icon />
    </template>
  </HLCheckboxCard>
</template>
<script setup lang="ts">
  import { HLCheckboxCard } from '@platform-ui/highrise'
  import { ref } from 'vue'
  const singleChecked = ref(false)
  import { LayersThree01Icon } from '@gohighlevel/ghl-icons/24/outline'
</script>

Compact Mode

A more condensed version without the checkbox visible.

Enterprise Plan

Unlimited users and advanced features

 

Vue

<template>
  <HLCheckboxCard
    id="compact-card"
    v-model:checked="singleChecked"
    title="Basic Plan"
    description="Perfect for small teams"
    :compact="true"
  >
    <template #icon>
      <LayersThree01Icon />
    </template>
  </HLCheckboxCard>
</template>
<script setup lang="ts">
  import { HLCheckboxCard } from '@platform-ui/highrise'
  import { ref } from 'vue'
  const singleChecked = ref(false)
  import { LayersThree01Icon } from '@gohighlevel/ghl-icons/24/outline'
</script>

Disabled State

Checkbox card in a disabled state.

Premium Plan

Currently unavailable

 

Vue

<template>
  <HLCheckboxCard id="disabled-card" title="Premium Plan" description="Currently unavailable" :disabled="true" />
</template>
<script setup lang="ts">
  import { HLCheckboxCard } from '@platform-ui/highrise'
</script>

Form Validation

Checkbox card with validation state and error message.

Select a plan *

Required Plan

This plan must be selected

 

Please select a plan to continue

Vue

<template>
  <HLFormItem label="Select a plan" required feedback="Please select a plan to continue" validation-status="error">
    <HLCheckboxCard
      id="validation-card"
      v-model:checked="checked"
      value="required-plan"
      title="Required Plan"
      description="This plan must be selected"
      validation-status="error"
    />
  </HLFormItem>
</template>
<script setup lang="ts">
  import { HLFormItem, HLCheckboxCard } from '@platform-ui/highrise'
  import { ref } from 'vue'
  const checked = ref(false)
</script>

Horizontal Card Group

A group of checkbox cards arranged horizontally.

Monthly

Please select a plan to continue

 

Quarterly

Please select a plan to continue

 

Yearly

Please select a plan to continue

 

Vue

<template>
  <HLCheckboxGroup v-model:value="selectedPlans" direction="horizontal">
    <HLSpace horizontal size="md">
      <HLCheckboxCard id="monthly-plan" value="monthly" title="Monthly" description="Please select a plan to continue" :width="250">
          <LayersThree01Icon />
        </template>
      </HLCheckboxCard>
      <HLCheckboxCard id="quarterly-plan" value="quarterly" title="Quarterly" description="Please select a plan to continue" :width="250">
        <template #icon>
          <LayersThree01Icon />
        </template>
      </HLCheckboxCard>
      <HLCheckboxCard id="yearly-plan" value="yearly" title="Yearly" description="Please select a plan to continue" :width="250">
        <template #icon>
          <LayersThree01Icon />
        </template>
      </HLCheckboxCard>
    </HLSpace>
  </HLCheckboxGroup>
</template>
<script setup lang="ts">
  import { HLCheckboxGroup, HLCheckboxCard, HLSpace } from '@platform-ui/highrise'
  import { ref } from 'vue'
  const selectedPlans = ref(['monthly'])
  import { LayersThree01Icon } from '@gohighlevel/ghl-icons/24/outline'
</script>

Custom Content

The checkbox card supports custom content through its default slot, allowing you to create rich, customized layouts beyond the standard title and description.

Custom Layout Plan

$29/month

 

Advanced Features

✓ Custom Domains

✓ API Access

✓ 24/7 Support

✓ Analytics

 

Vue

<template>
  <HLCheckboxGroup v-model:value="selectedPlans" direction="vertical">
    <HLSpace vertical size="md">
      <!-- Custom layout with image -->
      <HLCheckboxCard id="custom-card-1" value="custom1" :width="323">
        <div style="display: flex; align-items: center; gap: 16px;">
          <img src="path/to/image.jpg" style="border-radius: 4px;" alt="Plan thumbnail" />
          <div>
            <div style="font-weight: 600; margin-bottom: 4px;">Custom Layout Plan</div>
            <div style="color: var(--n-description-color); font-size: 14px;">$29/month</div>
          </div>
        </div>
      </HLCheckboxCard>

      <!-- Feature grid layout -->
      <HLCheckboxCard id="custom-card-2" value="custom2" :width="323">
        <div style="display: flex; flex-direction: column; gap: 8px;">
          <div style="font-weight: 600;">Advanced Features</div>
          <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; font-size: 14px;">
            <div>✓ Custom Domains</div>
            <div>✓ API Access</div>
            <div>✓ 24/7 Support</div>
            <div>✓ Analytics</div>
          </div>
        </div>
      </HLCheckboxCard>
    </HLSpace>
  </HLCheckboxGroup>
</template>
<script setup lang="ts">
  import { HLCheckboxGroup, HLCheckboxCard, HLSpace } from '@platform-ui/highrise'
  import { ref } from 'vue'
  const selectedPlans = ref(['custom1'])
</script>

The default slot allows you to:

• Create custom layouts using flexbox or grid
• Include images and custom icons
• Use different text styles and sizes
• Implement feature lists or pricing displays
• Maintain the checkbox card's core functionality while customizing its content

Overflowing Content

A checkbox card with long content that demonstrates text wrapping and overflow handling. Currently, the title is restricted to 2 lines and the description is restricted to 4 lines.

Enterprise Plan with Very Long Title That Might Wrap to Multiple Lines

This is a very long description that demonstrates how the card handles overflow content. It includes multiple sentences and should wrap naturally within the card's boundaries while maintaining readability and proper spacing.

 

Vue

<template>
  <HLCheckboxCard
    id="overflow-card"
    v-model:checked="singleChecked"
    title="Enterprise Plan with Very Long Title That Might Wrap to Multiple Lines"
    description="This is a very long description that demonstrates how the card handles overflow content. It includes multiple sentences and should wrap naturally within the card's boundaries while maintaining readability and proper spacing."
    :width="300"
  >
    <template #icon>
      <LayersThree01Icon />
    </template>
  </HLCheckboxCard>
</template>
<script setup lang="ts">
  import { HLCheckboxCard } from '@platform-ui/highrise'
  import { ref } from 'vue'
  const singleChecked = ref(false)
  import { LayersThree01Icon } from '@gohighlevel/ghl-icons/24/outline'
</script>

Accessibility

• Give every HLCheckboxCard a unique id tied to visible text via <label> or aria-labelledby, and attach helper/error copy through aria-describedby.
• Reflect validation by toggling aria-invalid="true", and keep aria-checked (plus the indeterminate state) aligned with the bound value.

Imports

import { HLCheckboxCard } from '@platform-ui/highrise'

Props

Name	Type	Default	Description
id*	string	-	Required unique identifier for the checkbox card
title	string	undefined	Title text displayed in the card
description	string	undefined	Description text displayed below the title
value	string | number	undefined	Value associated with the checkbox
checked	boolean	false	Whether the checkbox is checked
disabled	boolean	false	Whether the checkbox card is disabled, if disabled is passed to the HLCheckboxGroup this will be taken priority
compact	boolean	false	Whether to show the card in compact mode (without checkbox)
width	number	undefined	Custom width for the card

Emits

Name	Parameters	Description
@update:checked	(value: boolean)	Two-way binding for checked state

Slots

Name	Description
icon	Custom icon content displayed at the start of the card
default	Default slot for custom content

Best Practices

1. Always provide a unique id for each checkbox card
2. Group related checkbox cards using HLCheckboxGroup
3. Use compact mode when checkbox visibility isn't necessary
4. Encompass the checkbox card in a HLFormItem for form validation