Radio Button

Radio Group With Hints

Choose your mileage

Select the mileage for your subscription

6,000 km/yr

500 km/month

8,000 km/yr

667 km/month

Unlimited km/yr

No monthly cap

Show codeHide code

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

export function RadioGroupWithHints() {
  return (
    <RadioGroup
      name="mileage"
      legend="Choose your mileage"
      defaultValue="6000"
      hint="Select the mileage for your subscription"
    >
      <Radio value="6000" label="6,000 km/yr" hint="500 km/month" />
      <Radio value="8000" label="8,000 km/yr" hint="667 km/month" />
      <Radio value="unlimited" label="Unlimited km/yr" hint="No monthly cap" />
    </RadioGroup>
  );
}

Radio Group Controlled

Powertrain

Electric

Hybrid

Mild hybrid

Show codeHide code

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

export function RadioGroupControlled() {
  const [value, setValue] = useState('electric');

  return (
    <RadioGroup
      name="powertrain"
      legend="Powertrain"
      value={value}
      onChange={(e) => setValue(e.target.value)}
    >
      <Radio value="electric" label="Electric" />
      <Radio value="hybrid" label="Hybrid" />
      <Radio value="mild-hybrid" label="Mild hybrid" />
    </RadioGroup>
  );
}

Radio Group Error

Choose your terms

Please choose an option

6,000 km/yr

8,000 km/yr

Unlimited km/yr

Show codeHide code

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

export function RadioGroupError() {
  return (
    <RadioGroup
      name="terms-error"
      legend="Choose your terms"
      errorMessage="Please choose an option"
    >
      <Radio value="6000" label="6,000 km/yr" />
      <Radio value="8000" label="8,000 km/yr" />
      <Radio value="unlimited" label="Unlimited km/yr" />
    </RadioGroup>
  );
}

Radio Custom Layout

Electric

Hybrid

Mild hybrid

Show codeHide code

import { Radio, RadioContextProvider } from '@volvo-cars/react-forms';

export function RadioCustomLayout() {
  return (
    <fieldset className="flex gap-16 flex-wrap">
      <RadioContextProvider
        value={{
          defaultValue: 'hybrid',
          name: 'engine',
        }}
      >
        <Radio value="electric" label="Electric" />
        <Radio value="hybrid" label="Hybrid" />
        <Radio value="mild-hybrid" label="Mild hybrid" />
      </RadioContextProvider>
    </fieldset>
  );
}

CSS radio hints

Choose your plan

Basic Includes 5 GB storage

Standard Includes 50 GB storage

Premium Includes unlimited storage

Show codeHide code

<fieldset class="flex-col stack-16">
  <legend class="mb-4 font-medium">Choose your plan</legend>
  <div class="flex-row">
    <input type="radio" name="plan" id="plan-basic" value="basic" />
    <div class="flex-col stack-4 ml-8">
      <label for="plan-basic">Basic</label>
      <span class="micro text-secondary">Includes 5 GB storage</span>
    </div>
  </div>
  <div class="flex-row">
    <input
      type="radio"
      name="plan"
      id="plan-standard"
      value="standard"
      checked
    />
    <div class="flex-col stack-4 ml-8">
      <label for="plan-standard">Standard</label>
      <span class="micro text-secondary">Includes 50 GB storage</span>
    </div>
  </div>
  <div class="flex-row">
    <input type="radio" name="plan" id="plan-premium" value="premium" />
    <div class="flex-col stack-4 ml-8">
      <label for="plan-premium">Premium</label>
      <span class="micro text-secondary">Includes unlimited storage</span>
    </div>
  </div>
</fieldset>

CSS radio error

Choose your plan

Please select a plan

Basic

Standard

Premium

Show codeHide code

<fieldset
  class="flex-col stack-16"
  aria-invalid="true"
  aria-describedby="radio-error"
>
  <legend class="font-medium mb-4">Choose your plan</legend>
  <span role="alert" id="radio-error" class="text-feedback-red micro"
    >Please select a plan</span
  >
  <div class="flex-row">
    <input type="radio" name="plan-error" id="plan-error-a" value="basic" />
    <label class="ml-8" for="plan-error-a">Basic</label>
  </div>
  <div class="flex-row">
    <input type="radio" name="plan-error" id="plan-error-b" value="standard" />
    <label class="ml-8" for="plan-error-b">Standard</label>
  </div>
  <div class="flex-row">
    <input type="radio" name="plan-error" id="plan-error-c" value="premium" />
    <label class="ml-8" for="plan-error-c">Premium</label>
  </div>
</fieldset>

Custom CSS radio layout

Default (no class)

Extended (radio + custom class)

Show codeHide code

<div class="flex gap-16 items-center">
  <div class="flex-row">
    <input
      type="radio"
      name="custom"
      id="custom-default"
      value="default"
      checked
    />
    <label class="ml-8" for="custom-default">Default (no class)</label>
  </div>
  <div class="flex-row">
    <input
      type="radio"
      class="radio my-custom-style"
      name="custom"
      id="custom-extended"
      value="extended"
    />
    <label class="ml-8" for="custom-extended"
      >Extended (radio + custom class)</label
    >
  </div>
</div>