Accessibility: Partial

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

html

<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

html

<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

html

<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

html

<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

html

<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

html

<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

html

<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

html

<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

html

<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>

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
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

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

Checkbox Card ​

Basic Checkbox Card ​

Basic Checkbox Card Group ​

With Icon ​

Compact Mode ​

Disabled State ​

Form Validation ​

Horizontal Card Group ​

Custom Content ​

Overflowing Content ​

Imports ​

Props ​

Emits ​

Slots ​

Best Practices ​

Checkbox Card

Basic Checkbox Card

Basic Checkbox Card Group

With Icon

Compact Mode

Disabled State

Form Validation

Horizontal Card Group

Custom Content

Overflowing Content

Imports

Props

Emits

Slots

Best Practices