Accessibility: Partial

Translations: Not Needed

Migration Guide: Full

Radio Card

Radio cards for selection with enhanced visual presentation

Default

Business plan

Includes up to 20 users, 40GB individual data and access to all features.

 

Business plan

Includes up to 20 users, 40GB individual data and access to all features.

 

Vue

<template>
  <HLRadioGroup :value="value" direction="vertical" :radioCardGroup="true">
    <HLSpace vertical>
      <HLRadioCard
        @change="handleChange"
        value="card1"
        title="Business plan"
        description="Includes up to 20 users, 40GB individual data and access to all features."
      >
        <template #icon>
          <LayersThree01Icon />
        </template>
      </HLRadioCard>
      <HLRadioCard
        @change="handleChange"
        value="card2"
        title="Business plan"
        description="Includes up to 20 users, 40GB individual data and access to all features."
      >
        <template #icon>
          <LayersThree01Icon />
        </template>
      </HLRadioCard>
    </HLSpace>
  </HLRadioGroup>
</template>
<script setup>
  import { HLRadioCard, HLRadioGroup, HLContentWrap, HLSpace } from '@platform-ui/highrise'
  import { ref } from 'vue'

  const value = ref('')
  const handleChange = e => {
    value.value = e.target.value
  }
</script>

Without Icon

Business plan

Includes up to 20 users, 40GB individual data and access to all features.

 

Vue

<template>
  <HLRadioGroup :value="value">
    <HLRadioCard
      @change="handleChange"
      value="card1"
      title="Business plan"
      description="Includes up to 20 users, 40GB individual data and access to all features."
    />
  </HLRadioGroup>
</template>
<script setup>
  import { HLRadioCard, HLRadioGroup } from '@platform-ui/highrise'
  import { ref } from 'vue'

  const value = ref('')
  const handleChange = e => {
    value.value = e.target.value
  }
</script>

Without Description

Business plan

 

Vue

<template>
  <HLRadioGroup :value="value">
    <HLRadioCard @change="handleChange" value="card1" title="Business plan">
      <template #icon>
        <LayersThree01Icon />
      </template>
    </HLRadioCard>
  </HLRadioGroup>
</template>
<script setup>
  import { HLRadioCard, HLRadioGroup } from '@platform-ui/highrise'
  import { ref } from 'vue'

  const value = ref('')
  const handleChange = e => {
    value.value = e.target.value
  }
</script>

Compact Mode

Business plan

Includes up to 20 users, 40GB individual data and access to all features.

 

Vue

<template>
  <HLRadioGroup :value="value">
    <HLRadioCard
      @change="handleChange"
      value="card1"
      title="Business plan"
      description="Includes up to 20 users, 40GB individual data and access to all features."
      compact
    >
      <template #icon>
        <LayersThree01Icon />
      </template>
    </HLRadioCard>
  </HLRadioGroup>
</template>
<script setup>
  import { HLRadioCard, HLRadioGroup } from '@platform-ui/highrise'
  import { ref } from 'vue'

  const value = ref('')
  const handleChange = e => {
    value.value = e.target.value
  }
</script>

Custom Content

$99/monthBilled annually

Unlimited team members

Advanced analytics

24/7 priority support

 

$299/monthBilled annually

Custom integrations

Dedicated account manager

SLA guarantees

 

Vue

<HLRadioGroup :value="value" direction="vertical" :radioCardGroup="true">
  <HLSpace vertical>
    <HLRadioCard @change="handleChange" value="custom1" title="Business Plan">
      <template #icon>
        <LayersThree01Icon />
      </template>
      <div class="flex flex-col gap-4">
        <div class="flex items-center gap-4">
          <img src="https://placehold.co/80x80" alt="Business icon" class="rounded-lg" />
          <div class="flex flex-col">
            <span class="text-lg font-semibold">$99/month</span>
            <span class="text-sm text-gray-500">Billed annually</span>
          </div>
        </div>
        <div class="flex flex-col gap-2">
          <div class="flex items-center gap-2">
            <span class="w-2 h-2 rounded-full bg-primary-500"></span>
            <span class="text-sm">Unlimited team members</span>
          </div>
          <div class="flex items-center gap-2">
            <span class="w-2 h-2 rounded-full bg-primary-500"></span>
            <span class="text-sm">Advanced analytics</span>
          </div>
          <div class="flex items-center gap-2">
            <span class="w-2 h-2 rounded-full bg-primary-500"></span>
            <span class="text-sm">24/7 priority support</span>
          </div>
        </div>
      </div>
    </HLRadioCard>

    <HLRadioCard @change="handleChange" value="custom2" title="Enterprise Plan">
      <template #icon>
        <LayersThree01Icon />
      </template>
      <div class="flex flex-col gap-4">
        <div class="flex items-center gap-4">
          <img src="https://placehold.co/80x80" alt="Enterprise icon" class="rounded-lg" />
          <div class="flex flex-col">
            <span class="text-lg font-semibold">$299/month</span>
            <span class="text-sm text-gray-500">Billed annually</span>
          </div>
        </div>
        <div class="flex flex-col gap-2">
          <div class="flex items-center gap-2">
            <span class="w-2 h-2 rounded-full bg-primary-500"></span>
            <span class="text-sm">Custom integrations</span>
          </div>
          <div class="flex items-center gap-2">
            <span class="w-2 h-2 rounded-full bg-primary-500"></span>
            <span class="text-sm">Dedicated account manager</span>
          </div>
          <div class="flex items-center gap-2">
            <span class="w-2 h-2 rounded-full bg-primary-500"></span>
            <span class="text-sm">SLA guarantees</span>
          </div>
        </div>
      </div>
    </HLRadioCard>
  </HLSpace>
</HLRadioGroup>

ts

import { LayersThree01Icon } from '@gohighlevel/ghl-icons/24/outline'
import { ref } from 'vue'
import { HLRadioCard, HLRadioGroup, HLSpace } from '@platform-ui/highrise'

const value = ref('')
const handleChange = e => {
  value.value = e.target.value
}

Custom Icon Size

Business Plan

Includes up to 20 users, 40GB individual data and access to all features.

 

Vue

<template>
  <HLRadioGroup id="radio-card-custom-icon-size-group" :value="value" direction="vertical" :radioCardGroup="true">
    <HLSpace id="radio-card-custom-icon-size-space" vertical>
      <HLRadioCard
        id="radio-card-custom-icon-size"
        @change="handleChange"
        value="custom1"
        title="Business Plan"
        iconSize="48px"
        description="Includes up to 20 users, 40GB individual data and access to all features."
      >
        <template #icon>
          <LayersThree01Icon />
        </template>
      </HLRadioCard>
    </HLSpace>
  </HLRadioGroup>
</template>
<script setup lang="ts">
  import { HLRadioCard, HLRadioGroup, HLSpace } from '@platform-ui/highrise'
  import { LayersThree01Icon } from '@gohighlevel/ghl-icons/24/outline'
  import { ref } from 'vue'

  const value = ref('')
  const handleChange = e => {
    value.value = e.target.value
  }
</script>

Imports

import { HLRadioCard, HLRadioGroup } from '@platform-ui/highrise'

Props

Name	Type	Default	Description
id *	string | undefined	undefined	The id of the element
title	string	undefined	Title text for the radio card
description	string	undefined	Description text for the radio card
value	string	undefined	Value for the radio card
disabled	boolean	false	Whether the radio card is disabled
compact	boolean	false	Whether to use compact mode
width	number | undefined	undefined	Custom width for the radio card
checked	boolean | undefined	undefined	Whether the radio is checked
iconSize	string	32px	Size of the icon

Emits

Name	Parameters	Description
@change	(event: Event) => void	When selection changes
@checked	(event: Boolean) => void	When the radio is checked

Slots

Name	Parameters	Description
icon	()	Custom icon content
default	()	Default slot for custom content