RadioCard

Radio buttons styled as a cards to select one option from several options.

Demo

React
Vue

Size

Orientation

Variant

Color scheme

Read only

Disabled

AWS

Amazon Web Services is known for its extensive global infrastructure, scalability, and flexibility, catering to a wide range of organizations from startups to large enterprises

Azure

Azure offers a broad range of services comparable to AWS, with a particular strength in hybrid cloud solutions and enterprise-focused features

GCP

Google Cloud Platform leverages Google's expertise in data analytics, machine learning, and artificial intelligence providing services like BigQuery, Vertex AI, and Kubernetes

Oracle

Oracle's cloud platform, designed with a focus on enterprise workloads and strong performance for Oracle databases and applications

Coming soon

Selected:null

import { RadioCard } from '@fintech-sandpit/ui/react';

return (
  <RadioCard.Root defaultValue="aws">
    <RadioCard.Item
      value="aws"
      className="min-h-36 flex-1 flex flex-col"
    >
      <div className="flex items-center justify-between">
        <p className="text-xl font-semibold">AWS</p>

        <RadioCard.ItemControl />
      </div>

      <p className="text-sm text-justify hyphens-auto mt-4">
        <strong>Amazon Web Services </strong>
        is known for its extensive global infrastructure, scalability,
        and flexibility, catering to a wide range of organizations
        from startups to large enterprises
      </p>
    </RadioCard.Item>

    <RadioCard.Item
      value="azure"
      className="min-h-36 flex-1 flex flex-col"
    >
      <div className="flex items-center justify-between">
        <p className="text-xl font-semibold">Azure</p>

        <RadioCard.ItemControl />
      </div>

      <p className="text-sm text-justify hyphens-auto mt-4">
        <strong>Azure </strong>
        offers a broad range of services comparable to AWS,
        with a particular strength in hybrid cloud solutions
        and enterprise-focused features
      </p>
    </RadioCard.Item>

    <RadioCard.Item
      value="gcp"
      className="min-h-36 flex-1 flex flex-col"
    >
      <div className="flex items-center justify-between">
        <p className="text-xl font-semibold">GCP</p>

        <RadioCard.ItemControl />
      </div>

      <p className="text-sm text-justify hyphens-auto mt-4">
        <strong>Google Cloud Platform </strong>
        leverages Google's expertise in data analytics, machine learning,
        and artificial intelligence providing services like BigQuery,
        Vertex AI, and Kubernetes
      </p>
    </RadioCard.Item>

    <RadioCard.Item
      value="oracle"
      className="min-h-36 flex-1 flex flex-col"
      disabled
    >
      <div className="flex items-center justify-between">
        <p className="text-xl font-semibold">Oracle</p>

        <RadioCard.ItemControl />
      </div>

      <p className="text-sm text-justify hyphens-auto mt-4">
        <strong>Oracle</strong>
        's cloud platform, designed with a focus on enterprise workloads
        and strong performance for Oracle databases and applications
      </p>

      <p className="text-xs font-medium mt-2 text-right">
        <span className="bg-amber-500 dark:bg-amber-800 text-white px-1 py-0.5 rounded-sm">Coming soon</span>
      </p>
    </RadioCard.Item>
  </RadioCard.Root>
);

<script setup lang="ts">
import { RadioCard } from '@fintech-sandpit/ui/vue';
</script>

<template>
  <RadioCard.Root default-value="aws">
    <RadioCard.Item
      value="aws"
      class="min-h-36 flex-1 flex flex-col"
    >
      <div class="flex items-center justify-between">
        <p class="text-xl font-semibold">
          AWS
        </p>

        <RadioCard.ItemControl />
      </div>

      <p class="text-sm text-justify hyphens-auto mt-4">
        <strong>Amazon Web Services</strong>
        is known for its extensive global infrastructure, scalability,
        and flexibility, catering to a wide range of organizations
        from startups to large enterprises
      </p>
    </RadioCard.Item>

    <RadioCard.Item
      value="azure"
      class="min-h-36 flex-1 flex flex-col"
    >
      <div class="flex items-center justify-between">
        <p class="text-xl font-semibold">
          Azure
        </p>

        <RadioCard.ItemControl />
      </div>

      <p class="text-sm text-justify hyphens-auto mt-4">
        <strong>Azure </strong>
        offers a broad range of services comparable to AWS,
        with a particular strength in hybrid cloud solutions
        and enterprise-focused features
      </p>
    </RadioCard.Item>

    <RadioCard.Item
      value="gcp"
      class="min-h-36 flex-1 flex flex-col"
    >
      <div class="flex items-center justify-between">
        <p class="text-xl font-semibold">
          GCP
        </p>

        <RadioCard.ItemControl />
      </div>

      <p class="text-sm text-justify hyphens-auto mt-4">
        <strong>Google Cloud Platform </strong>
        leverages Google's expertise in data analytics, machine learning,
        and artificial intelligence providing services like BigQuery,
        Vertex AI, and Kubernetes
      </p>
    </RadioCard.Item>

    <RadioCard.Item
      value="oracle"
      disabled
      class="min-h-36 flex-1 flex flex-col"
    >
      <div class="flex items-center justify-between">
        <p class="text-xl font-semibold">
          Oracle
        </p>

        <RadioCard.ItemControl />
      </div>

      <p class="text-sm text-justify hyphens-auto mt-4">
        <strong>Oracle</strong>
        's cloud platform, designed with a focus on enterprise workloads
        and strong performance for Oracle databases and applications
      </p>

      <p class="text-xs font-medium mt-2 text-right">
        <span class="bg-amber-500 dark:bg-amber-800 text-white px-1 py-0.5 rounded-sm">Coming soon</span>
      </p>
    </RadioCard.Item>
  </RadioCard.Root>
</template>

Props

RadioCard.Root

React
Vue

Name	Type	Default	Description
`value`	`string`	—	The value of the radio card field (controlled)
`defaultValue`	`string`	—	The default value of the radio card field (uncontrolled)
`size`	`Size`	`md`	The size of the radio card field
`variant`	`RadioVariant`	`solid`	The variant of the radio card field
`orientation`	`Orientation`	`vertical`	The orientation of the radio card field
`colorScheme`	`ColorScheme`	`neutral`	The color scheme of the radio card field
`disabled`	`boolean`	`false`	Whether the radio card field is disabled
`readOnly`	`boolean`	`false`	Whether the radio card field is read only

Name	Type	Default	Description
`model-value`	`string`	—	The value of the radio card field ¹
`default-value`	`string`	—	The default value of the radio card field (uncontrolled)
`size`	`Size`	`md`	The size of the radio card field
`variant`	`RadioVariant`	`solid`	The variant of the radio card field
`orientation`	`Orientation`	`vertical`	The orientation of the radio card field
`colorScheme`	`ColorScheme`	`neutral`	The color scheme of the radio card field
`disabled`	`boolean`	`false`	Whether the radio card field is disabled
`read-only`	`boolean`	`false`	Whether the radio card field is read only

Can be used with the v-model directive for two-way binding.

RadioCard.Item

Name	Type	Default	Description
`value`	`string`	—	The value of the radio card item
`disabled`	`boolean`	`false`	Whether the radio card item is disabled

Events

React
Vue

Name	Type	Description
`onChange`	`(value: string) => void`	Callback fired when the value changes

Name	Payload	Description
`update:model-value`	`string`	Event emitted when the value changes

Types

type ColorScheme = 'neutral' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger'
type Orientation = 'vertical' | 'horizontal'
type RadioVariant = 'solid' | 'outline' | 'ghost'
type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl'