Checkbox

Checkbox With Hint

Accept terms of service

Read the terms of service and privacy policy.

Show codeHide code

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

export function CheckboxWithHint() {
  return (
    <Checkbox
      name="terms"
      label="Accept terms of service"
      hint={
        <>
          Read the <a href="#terms">terms of service</a> and{' '}
          <a href="#privacy">privacy policy</a>.
        </>
      }
    />
  );
}

Checkbox Controlled

Send me product updates

You can unsubscribe anytime.

Show codeHide code

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

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

  return (
    <Checkbox
      name="updates"
      label="Send me product updates"
      hint="You can unsubscribe anytime."
      checked={checked}
      onChange={(event) => setChecked(event.target.checked)}
    />
  );
}

Checkbox Error

Accept terms of service

Must accept to proceed

Show codeHide code

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

export function CheckboxError() {
  return (
    <Checkbox
      name="terms"
      label="Accept terms of service"
      errorMessage="Must accept to proceed"
    />
  );
}

Checkbox Indeterminate

Subscriptions

Product news

Special offers

Show codeHide code

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

export function CheckboxIndeterminate() {
  const [news, setNews] = useState(true);
  const [offers, setOffers] = useState(false);

  const allChecked = news && offers;
  const indeterminate = news !== offers;

  return (
    <div className="flex-col gap-16">
      <Checkbox
        name="subscriptions"
        label="Subscriptions"
        checked={allChecked}
        indeterminate={indeterminate}
        onChange={(e) => {
          setNews(e.target.checked);
          setOffers(e.target.checked);
        }}
      />
      <div className="flex-col gap-8 pl-24">
        <Checkbox
          name="news"
          label="Product news"
          checked={news}
          onChange={(e) => setNews(e.target.checked)}
        />
        <Checkbox
          name="offers"
          label="Special offers"
          checked={offers}
          onChange={(e) => setOffers(e.target.checked)}
        />
      </div>
    </div>
  );
}

CSS checkbox with hint

Accept terms of service

Read the terms of service and privacy policy.

Show codeHide code

<div class="flex-row">
  <input type="checkbox" name="terms" id="terms" value="terms" />
  <div class="flex-col stack-4 ml-8">
    <label for="terms">Accept terms of service</label>
    <p class="micro text-secondary">
      Read the <a href="#terms">terms of service</a> and
      <a href="#privacy">privacy policy</a>.
    </p>
  </div>
</div>

CSS checkbox error

Accept terms of service

Must accept to proceed

Show codeHide code

<div class="flex-row">
  <input
    type="checkbox"
    name="terms"
    id="terms-error"
    value="terms"
    aria-invalid="true"
    aria-describedby="terms-error-msg"
  />
  <div class="flex-col stack-4 ml-8">
    <label for="terms-error">Accept terms of service</label>
    <p id="terms-error-msg" class="micro text-feedback-red flex items-center">
      Must accept to proceed
    </p>
  </div>
</div>