Selectable Cards

Checkbox Card With Image

Winter package

8 500 kr

Heated seats, steering wheel, and windshield

Show codeHide code

import { CheckboxCard } from '@volvo-cars/react-forms';

export function CheckboxCardWithImage() {
  return (
    <CheckboxCard
      name="package"
      title="Winter package"
      meta="8 500 kr"
      description="Heated seats, steering wheel, and windshield"
      image={{
        src: '/images/cars/thumbnails/ex90.avif',
        alt: 'EX90',
      }}
    />
  );
}

Checkbox Card Group

Extended warranty

12 000 kr

3 years extended warranty coverage

Winter package

8 500 kr

Heated seats, steering wheel, and windshield

Premium sound system

15 000 kr

Bowers & Wilkins premium audio

Show codeHide code

import { CheckboxCard } from '@volvo-cars/react-forms';

export function CheckboxCardGroup() {
  return (
    <div className="stack-16">
      <CheckboxCard
        name="extended-warranty"
        title="Extended warranty"
        meta="12 000 kr"
        description="3 years extended warranty coverage"
      />
      <CheckboxCard
        name="winter-package"
        title="Winter package"
        meta="8 500 kr"
        description="Heated seats, steering wheel, and windshield"
        defaultChecked
      />
      <CheckboxCard
        name="premium-sound"
        title="Premium sound system"
        meta="15 000 kr"
        description="Bowers & Wilkins premium audio"
      />
    </div>
  );
}

Radio Card With Image

Select wheels

18" 8-spoke aero wheels

Included

20" 5-spoke wheels

4 500 kr

Show codeHide code

import { RadioCard, RadioGroup } from '@volvo-cars/react-forms';

export function RadioCardWithImage() {
  return (
    <RadioGroup name="wheels" legend="Select wheels" defaultValue="18-spoke">
      <RadioCard
        value="18-spoke"
        title='18" 8-spoke aero wheels'
        meta="Included"
        image={{
          src: '/images/wheels.webp',
          alt: '18 inch aero wheels',
        }}
      />
      <RadioCard
        value="20-spoke"
        title='20" 5-spoke wheels'
        meta="4 500 kr"
        image={{
          src: '/images/wheels.webp',
          alt: '20 inch spoke wheels',
        }}
      />
    </RadioGroup>
  );
}

Controlled Checkbox Card

Extended warranty

12 000 kr

3 years extended warranty coverage

Selected: No

Show codeHide code

import { CheckboxCard } from '@volvo-cars/react-forms';
import { useState } from 'react';

export function ControlledCheckboxCard() {
  const [checked, setChecked] = useState(false);

  return (
    <div className="stack-16">
      <CheckboxCard
        name="warranty"
        title="Extended warranty"
        meta="12 000 kr"
        description="3 years extended warranty coverage"
        checked={checked}
        onChange={(e) => setChecked(e.target.checked)}
      />
      <p className="text-secondary">Selected: {checked ? 'Yes' : 'No'}</p>
    </div>
  );
}

Controlled Radio Group

Select trim level

Core

550 000 kr

Plus

625 000 kr

Ultra

750 000 kr

Selected: plus

Show codeHide code

import { RadioCard, RadioGroup } from '@volvo-cars/react-forms';
import { useState } from 'react';

export function ControlledRadioGroup() {
  const [value, setValue] = useState('plus');

  return (
    <div className="stack-16">
      <RadioGroup
        name="trim-controlled"
        legend="Select trim level"
        value={value}
        onChange={(e) => setValue(e.target.value)}
      >
        <RadioCard value="core" title="Core" meta="550 000 kr" />
        <RadioCard value="plus" title="Plus" meta="625 000 kr" />
        <RadioCard value="ultra" title="Ultra" meta="750 000 kr" />
      </RadioGroup>
      <p className="text-secondary">Selected: {value}</p>
    </div>
  );
}

Card With Interactive Content

Extended warranty

9 500 kr

Extends your warranty coverage to 5 years or 150,000 km

Learn more about coverage

Show codeHide code

import { CheckboxCard } from '@volvo-cars/react-forms';

export function CardWithInteractiveContent() {
  return (
    <CheckboxCard
      name="extended-warranty"
      title="Extended warranty"
      meta="9 500 kr"
      description="Extends your warranty coverage to 5 years or 150,000 km"
    >
      <button type="button" className="link-underlined">
        Learn more about coverage
      </button>
    </CheckboxCard>
  );
}

CSS card with image

Winter package 8 500 kr

Heated seats, steering wheel, and windshield

Show codeHide code

<label class="selectable-card">
  <input type="checkbox" />
  <img
    class="aspect-16/9"
    slot="image"
    src="/images/cars/thumbnails/ex90.avif"
    alt=""
    aria-hidden="true"
  />
  <span slot="title">Winter package</span>
  <span slot="meta">8 500 kr</span>
  <div slot="description">
    <span>Heated seats, steering wheel, and windshield</span>
  </div>
</label>