Data input

Choice Card

A radio button, checkbox or switch drawn as a card, with a title, a description and an optional icon, image or color swatch.

Class name	Type	Description
`choice-cardplf:choice-card`	Component	A label drawn as a card around a radio button, checkbox or switch
`choice-card-titleplf:choice-card-title`	Part	The choice's name
`choice-card-descriptionplf:choice-card-description`	Part	Text after the title
`choice-card-iconplf:choice-card-icon`	Part	An SVG icon above the choice; an icon class there doesn't need it
`choice-card-imageplf:choice-card-image`	Part	An image above the choice
`choice-card-swatchplf:choice-card-swatch`	Part	A color above the choice, or a palette with one span per color

Default

The card is the control’s <label>, so its parts are <span> elements: a label cannot hold a <div> or <p>.

Plan

Starter Up to 3 projects and 1 GB of storage. Pro Unlimited projects and 100 GB of storage. Team Shared workspaces, roles and an audit log.

<fieldset class="field field-group">
  <legend class="field-legend">Plan</legend>
  <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
    <label class="choice-card">
      <input class="radio" type="radio" name="plan" value="starter" checked>
      <span class="choice-card-title">Starter</span>
      <span class="choice-card-description">Up to 3 projects and 1 GB of storage.</span>
    </label>
    <label class="choice-card">
      <input class="radio" type="radio" name="plan" value="pro">
      <span class="choice-card-title">Pro</span>
      <span class="choice-card-description">Unlimited projects and 100 GB of storage.</span>
    </label>
    <label class="choice-card">
      <input class="radio" type="radio" name="plan" value="team">
      <span class="choice-card-title">Team</span>
      <span class="choice-card-description">Shared workspaces, roles and an audit log.</span>
    </label>
  </div>
</fieldset>

<fieldset class="plf:field plf:field-group">
  <legend class="plf:field-legend">Plan</legend>
  <div class="plf:grid plf:grid-cols-1 plf:md:grid-cols-3 plf:gap-3">
    <label class="plf:choice-card">
      <input class="plf:radio" type="radio" name="plan" value="starter" checked>
      <span class="plf:choice-card-title">Starter</span>
      <span class="plf:choice-card-description">Up to 3 projects and 1 GB of storage.</span>
    </label>
    <label class="plf:choice-card">
      <input class="plf:radio" type="radio" name="plan" value="pro">
      <span class="plf:choice-card-title">Pro</span>
      <span class="plf:choice-card-description">Unlimited projects and 100 GB of storage.</span>
    </label>
    <label class="plf:choice-card">
      <input class="plf:radio" type="radio" name="plan" value="team">
      <span class="plf:choice-card-title">Team</span>
      <span class="plf:choice-card-description">Shared workspaces, roles and an audit log.</span>
    </label>
  </div>
</fieldset>

import { ChoiceCard, ChoiceCardDescription, ChoiceCardTitle, FieldGroup, Radio } from '@pelatform/react';

export function Example() {
  return (
    <FieldGroup legend="Plan">
      <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
        <ChoiceCard>
          <Radio name="plan" value="starter" defaultChecked />
          <ChoiceCardTitle>Starter</ChoiceCardTitle>
          <ChoiceCardDescription>Up to 3 projects and 1 GB of storage.</ChoiceCardDescription>
        </ChoiceCard>
        <ChoiceCard>
          <Radio name="plan" value="pro" />
          <ChoiceCardTitle>Pro</ChoiceCardTitle>
          <ChoiceCardDescription>Unlimited projects and 100 GB of storage.</ChoiceCardDescription>
        </ChoiceCard>
        <ChoiceCard>
          <Radio name="plan" value="team" />
          <ChoiceCardTitle>Team</ChoiceCardTitle>
          <ChoiceCardDescription>Shared workspaces, roles and an audit log.</ChoiceCardDescription>
        </ChoiceCard>
      </div>
    </FieldGroup>
  );
}

import { ChoiceCard, ChoiceCardDescription, ChoiceCardTitle, FieldGroup, Radio } from '@pelatform/react/prefixed';

export function Example() {
  return (
    <FieldGroup legend="Plan">
      <div className="plf:grid plf:grid-cols-1 plf:md:grid-cols-3 plf:gap-3">
        <ChoiceCard>
          <Radio name="plan" value="starter" defaultChecked />
          <ChoiceCardTitle>Starter</ChoiceCardTitle>
          <ChoiceCardDescription>Up to 3 projects and 1 GB of storage.</ChoiceCardDescription>
        </ChoiceCard>
        <ChoiceCard>
          <Radio name="plan" value="pro" />
          <ChoiceCardTitle>Pro</ChoiceCardTitle>
          <ChoiceCardDescription>Unlimited projects and 100 GB of storage.</ChoiceCardDescription>
        </ChoiceCard>
        <ChoiceCard>
          <Radio name="plan" value="team" />
          <ChoiceCardTitle>Team</ChoiceCardTitle>
          <ChoiceCardDescription>Shared workspaces, roles and an audit log.</ChoiceCardDescription>
        </ChoiceCard>
      </div>
    </FieldGroup>
  );
}

Checkbox

Add-ons

Single sign-on Members sign in with your identity provider. Audit log Keep a record of every change for a year.

<fieldset class="field field-group">
  <legend class="field-legend">Add-ons</legend>
  <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
    <label class="choice-card">
      <input class="checkbox" type="checkbox" name="add-ons" value="sso" checked>
      <span class="choice-card-title">Single sign-on</span>
      <span class="choice-card-description">Members sign in with your identity provider.</span>
    </label>
    <label class="choice-card">
      <input class="checkbox" type="checkbox" name="add-ons" value="audit">
      <span class="choice-card-title">Audit log</span>
      <span class="choice-card-description">Keep a record of every change for a year.</span>
    </label>
  </div>
</fieldset>

<fieldset class="plf:field plf:field-group">
  <legend class="plf:field-legend">Add-ons</legend>
  <div class="plf:grid plf:grid-cols-1 plf:md:grid-cols-2 plf:gap-3">
    <label class="plf:choice-card">
      <input class="plf:checkbox" type="checkbox" name="add-ons" value="sso" checked>
      <span class="plf:choice-card-title">Single sign-on</span>
      <span class="plf:choice-card-description">Members sign in with your identity provider.</span>
    </label>
    <label class="plf:choice-card">
      <input class="plf:checkbox" type="checkbox" name="add-ons" value="audit">
      <span class="plf:choice-card-title">Audit log</span>
      <span class="plf:choice-card-description">Keep a record of every change for a year.</span>
    </label>
  </div>
</fieldset>

import { Checkbox, ChoiceCard, ChoiceCardDescription, ChoiceCardTitle, FieldGroup } from '@pelatform/react';

export function Example() {
  return (
    <FieldGroup legend="Add-ons">
      <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
        <ChoiceCard>
          <Checkbox name="add-ons" value="sso" defaultChecked />
          <ChoiceCardTitle>Single sign-on</ChoiceCardTitle>
          <ChoiceCardDescription>Members sign in with your identity provider.</ChoiceCardDescription>
        </ChoiceCard>
        <ChoiceCard>
          <Checkbox name="add-ons" value="audit" />
          <ChoiceCardTitle>Audit log</ChoiceCardTitle>
          <ChoiceCardDescription>Keep a record of every change for a year.</ChoiceCardDescription>
        </ChoiceCard>
      </div>
    </FieldGroup>
  );
}

import { Checkbox, ChoiceCard, ChoiceCardDescription, ChoiceCardTitle, FieldGroup } from '@pelatform/react/prefixed';

export function Example() {
  return (
    <FieldGroup legend="Add-ons">
      <div className="plf:grid plf:grid-cols-1 plf:md:grid-cols-2 plf:gap-3">
        <ChoiceCard>
          <Checkbox name="add-ons" value="sso" defaultChecked />
          <ChoiceCardTitle>Single sign-on</ChoiceCardTitle>
          <ChoiceCardDescription>Members sign in with your identity provider.</ChoiceCardDescription>
        </ChoiceCard>
        <ChoiceCard>
          <Checkbox name="add-ons" value="audit" />
          <ChoiceCardTitle>Audit log</ChoiceCardTitle>
          <ChoiceCardDescription>Keep a record of every change for a year.</ChoiceCardDescription>
        </ChoiceCard>
      </div>
    </FieldGroup>
  );
}

Switch

A switch, for a setting that takes effect at once, sits at the end of the title’s row.

Notifications

Mentions Email me when someone mentions me. Weekly digest A summary of the workspace every Monday.

<fieldset class="field field-group">
  <legend class="field-legend">Notifications</legend>
  <div class="flex flex-col gap-3">
    <label class="choice-card">
      <span class="choice-card-title">Mentions</span>
      <span class="choice-card-description">Email me when someone mentions me.</span>
      <input class="toggle" type="checkbox" role="switch" name="notify-mentions" checked>
    </label>
    <label class="choice-card">
      <span class="choice-card-title">Weekly digest</span>
      <span class="choice-card-description">A summary of the workspace every Monday.</span>
      <input class="toggle" type="checkbox" role="switch" name="notify-digest">
    </label>
  </div>
</fieldset>

<fieldset class="plf:field plf:field-group">
  <legend class="plf:field-legend">Notifications</legend>
  <div class="plf:flex plf:flex-col plf:gap-3">
    <label class="plf:choice-card">
      <span class="plf:choice-card-title">Mentions</span>
      <span class="plf:choice-card-description">Email me when someone mentions me.</span>
      <input class="plf:toggle" type="checkbox" role="switch" name="notify-mentions" checked>
    </label>
    <label class="plf:choice-card">
      <span class="plf:choice-card-title">Weekly digest</span>
      <span class="plf:choice-card-description">A summary of the workspace every Monday.</span>
      <input class="plf:toggle" type="checkbox" role="switch" name="notify-digest">
    </label>
  </div>
</fieldset>

import { ChoiceCard, ChoiceCardDescription, ChoiceCardTitle, FieldGroup, Switch } from '@pelatform/react';

export function Example() {
  return (
    <FieldGroup legend="Notifications">
      <div className="flex flex-col gap-3">
        <ChoiceCard>
          <ChoiceCardTitle>Mentions</ChoiceCardTitle>
          <ChoiceCardDescription>Email me when someone mentions me.</ChoiceCardDescription>
          <Switch name="notify-mentions" defaultChecked />
        </ChoiceCard>
        <ChoiceCard>
          <ChoiceCardTitle>Weekly digest</ChoiceCardTitle>
          <ChoiceCardDescription>A summary of the workspace every Monday.</ChoiceCardDescription>
          <Switch name="notify-digest" />
        </ChoiceCard>
      </div>
    </FieldGroup>
  );
}

import { ChoiceCard, ChoiceCardDescription, ChoiceCardTitle, FieldGroup, Switch } from '@pelatform/react/prefixed';

export function Example() {
  return (
    <FieldGroup legend="Notifications">
      <div className="plf:flex plf:flex-col plf:gap-3">
        <ChoiceCard>
          <ChoiceCardTitle>Mentions</ChoiceCardTitle>
          <ChoiceCardDescription>Email me when someone mentions me.</ChoiceCardDescription>
          <Switch name="notify-mentions" defaultChecked />
        </ChoiceCard>
        <ChoiceCard>
          <ChoiceCardTitle>Weekly digest</ChoiceCardTitle>
          <ChoiceCardDescription>A summary of the workspace every Monday.</ChoiceCardDescription>
          <Switch name="notify-digest" />
        </ChoiceCard>
      </div>
    </FieldGroup>
  );
}

Icon

Theme

Light Dark System

<fieldset class="field field-group">
  <legend class="field-legend">Theme</legend>
  <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
    <label class="choice-card">
      <span class="icon icon-sun"></span>
      <input class="radio" type="radio" name="theme" value="light" checked>
      <span class="choice-card-title">Light</span>
    </label>
    <label class="choice-card">
      <span class="icon icon-moon"></span>
      <input class="radio" type="radio" name="theme" value="dark">
      <span class="choice-card-title">Dark</span>
    </label>
    <label class="choice-card">
      <span class="icon icon-device-desktop"></span>
      <input class="radio" type="radio" name="theme" value="system">
      <span class="choice-card-title">System</span>
    </label>
  </div>
</fieldset>

<fieldset class="plf:field plf:field-group">
  <legend class="plf:field-legend">Theme</legend>
  <div class="plf:grid plf:grid-cols-1 plf:md:grid-cols-3 plf:gap-3">
    <label class="plf:choice-card">
      <span class="plf:icon plf:icon-sun"></span>
      <input class="plf:radio" type="radio" name="theme" value="light" checked>
      <span class="plf:choice-card-title">Light</span>
    </label>
    <label class="plf:choice-card">
      <span class="plf:icon plf:icon-moon"></span>
      <input class="plf:radio" type="radio" name="theme" value="dark">
      <span class="plf:choice-card-title">Dark</span>
    </label>
    <label class="plf:choice-card">
      <span class="plf:icon plf:icon-device-desktop"></span>
      <input class="plf:radio" type="radio" name="theme" value="system">
      <span class="plf:choice-card-title">System</span>
    </label>
  </div>
</fieldset>

import { ChoiceCard, ChoiceCardTitle, FieldGroup, Icon, Radio } from '@pelatform/react';

export function Example() {
  return (
    <FieldGroup legend="Theme">
      <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
        <ChoiceCard>
          <Icon name="sun" />
          <Radio name="theme" value="light" defaultChecked />
          <ChoiceCardTitle>Light</ChoiceCardTitle>
        </ChoiceCard>
        <ChoiceCard>
          <Icon name="moon" />
          <Radio name="theme" value="dark" />
          <ChoiceCardTitle>Dark</ChoiceCardTitle>
        </ChoiceCard>
        <ChoiceCard>
          <Icon name="device-desktop" />
          <Radio name="theme" value="system" />
          <ChoiceCardTitle>System</ChoiceCardTitle>
        </ChoiceCard>
      </div>
    </FieldGroup>
  );
}

import { ChoiceCard, ChoiceCardTitle, FieldGroup, Icon, Radio } from '@pelatform/react/prefixed';

export function Example() {
  return (
    <FieldGroup legend="Theme">
      <div className="plf:grid plf:grid-cols-1 plf:md:grid-cols-3 plf:gap-3">
        <ChoiceCard>
          <Icon name="sun" />
          <Radio name="theme" value="light" defaultChecked />
          <ChoiceCardTitle>Light</ChoiceCardTitle>
        </ChoiceCard>
        <ChoiceCard>
          <Icon name="moon" />
          <Radio name="theme" value="dark" />
          <ChoiceCardTitle>Dark</ChoiceCardTitle>
        </ChoiceCard>
        <ChoiceCard>
          <Icon name="device-desktop" />
          <Radio name="theme" value="system" />
          <ChoiceCardTitle>System</ChoiceCardTitle>
        </ChoiceCard>
      </div>
    </FieldGroup>
  );
}

Image

The title names the choice, so an image that only illustrates it takes alt=""; written alt text joins the choice’s name.

Workspace cover

Garden

Beach

Forest

<fieldset class="field field-group">
  <legend class="field-legend">Workspace cover</legend>
  <div class="grid grid-cols-2 md:grid-cols-3 gap-3">
    <label class="choice-card">
      <img class="choice-card-image" src="/previews/assets/gallery-garden.svg" alt="">
      <input class="radio" type="radio" name="cover" value="garden" checked>
      <span class="choice-card-title">Garden</span>
    </label>
    <label class="choice-card">
      <img class="choice-card-image" src="/previews/assets/gallery-beach.svg" alt="">
      <input class="radio" type="radio" name="cover" value="beach">
      <span class="choice-card-title">Beach</span>
    </label>
    <label class="choice-card">
      <img class="choice-card-image" src="/previews/assets/gallery-forest.svg" alt="">
      <input class="radio" type="radio" name="cover" value="forest">
      <span class="choice-card-title">Forest</span>
    </label>
  </div>
</fieldset>

<fieldset class="plf:field plf:field-group">
  <legend class="plf:field-legend">Workspace cover</legend>
  <div class="plf:grid plf:grid-cols-2 plf:md:grid-cols-3 plf:gap-3">
    <label class="plf:choice-card">
      <img class="plf:choice-card-image" src="/previews/assets/gallery-garden.svg" alt="">
      <input class="plf:radio" type="radio" name="cover" value="garden" checked>
      <span class="plf:choice-card-title">Garden</span>
    </label>
    <label class="plf:choice-card">
      <img class="plf:choice-card-image" src="/previews/assets/gallery-beach.svg" alt="">
      <input class="plf:radio" type="radio" name="cover" value="beach">
      <span class="plf:choice-card-title">Beach</span>
    </label>
    <label class="plf:choice-card">
      <img class="plf:choice-card-image" src="/previews/assets/gallery-forest.svg" alt="">
      <input class="plf:radio" type="radio" name="cover" value="forest">
      <span class="plf:choice-card-title">Forest</span>
    </label>
  </div>
</fieldset>

import { ChoiceCard, ChoiceCardImage, ChoiceCardTitle, FieldGroup, Radio } from '@pelatform/react';

export function Example() {
  return (
    <FieldGroup legend="Workspace cover">
      <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
        <ChoiceCard>
          <ChoiceCardImage src="/previews/assets/gallery-garden.svg" alt="" />
          <Radio name="cover" value="garden" defaultChecked />
          <ChoiceCardTitle>Garden</ChoiceCardTitle>
        </ChoiceCard>
        <ChoiceCard>
          <ChoiceCardImage src="/previews/assets/gallery-beach.svg" alt="" />
          <Radio name="cover" value="beach" />
          <ChoiceCardTitle>Beach</ChoiceCardTitle>
        </ChoiceCard>
        <ChoiceCard>
          <ChoiceCardImage src="/previews/assets/gallery-forest.svg" alt="" />
          <Radio name="cover" value="forest" />
          <ChoiceCardTitle>Forest</ChoiceCardTitle>
        </ChoiceCard>
      </div>
    </FieldGroup>
  );
}

import { ChoiceCard, ChoiceCardImage, ChoiceCardTitle, FieldGroup, Radio } from '@pelatform/react/prefixed';

export function Example() {
  return (
    <FieldGroup legend="Workspace cover">
      <div className="plf:grid plf:grid-cols-2 plf:md:grid-cols-3 plf:gap-3">
        <ChoiceCard>
          <ChoiceCardImage src="/previews/assets/gallery-garden.svg" alt="" />
          <Radio name="cover" value="garden" defaultChecked />
          <ChoiceCardTitle>Garden</ChoiceCardTitle>
        </ChoiceCard>
        <ChoiceCard>
          <ChoiceCardImage src="/previews/assets/gallery-beach.svg" alt="" />
          <Radio name="cover" value="beach" />
          <ChoiceCardTitle>Beach</ChoiceCardTitle>
        </ChoiceCard>
        <ChoiceCard>
          <ChoiceCardImage src="/previews/assets/gallery-forest.svg" alt="" />
          <Radio name="cover" value="forest" />
          <ChoiceCardTitle>Forest</ChoiceCardTitle>
        </ChoiceCard>
      </div>
    </FieldGroup>
  );
}

Swatch

Accent color

Blue Violet Green Orange

<fieldset class="field field-group">
  <legend class="field-legend">Accent color</legend>
  <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
    <label class="choice-card">
      <span class="choice-card-swatch" style="background: #2563eb"></span>
      <input class="radio" type="radio" name="accent" value="blue" checked>
      <span class="choice-card-title">Blue</span>
    </label>
    <label class="choice-card">
      <span class="choice-card-swatch" style="background: #7c3aed"></span>
      <input class="radio" type="radio" name="accent" value="violet">
      <span class="choice-card-title">Violet</span>
    </label>
    <label class="choice-card">
      <span class="choice-card-swatch" style="background: #16a34a"></span>
      <input class="radio" type="radio" name="accent" value="green">
      <span class="choice-card-title">Green</span>
    </label>
    <label class="choice-card">
      <span class="choice-card-swatch" style="background: #ea580c"></span>
      <input class="radio" type="radio" name="accent" value="orange">
      <span class="choice-card-title">Orange</span>
    </label>
  </div>
</fieldset>

<fieldset class="plf:field plf:field-group">
  <legend class="plf:field-legend">Accent color</legend>
  <div class="plf:grid plf:grid-cols-2 plf:md:grid-cols-4 plf:gap-3">
    <label class="plf:choice-card">
      <span class="plf:choice-card-swatch" style="background: #2563eb"></span>
      <input class="plf:radio" type="radio" name="accent" value="blue" checked>
      <span class="plf:choice-card-title">Blue</span>
    </label>
    <label class="plf:choice-card">
      <span class="plf:choice-card-swatch" style="background: #7c3aed"></span>
      <input class="plf:radio" type="radio" name="accent" value="violet">
      <span class="plf:choice-card-title">Violet</span>
    </label>
    <label class="plf:choice-card">
      <span class="plf:choice-card-swatch" style="background: #16a34a"></span>
      <input class="plf:radio" type="radio" name="accent" value="green">
      <span class="plf:choice-card-title">Green</span>
    </label>
    <label class="plf:choice-card">
      <span class="plf:choice-card-swatch" style="background: #ea580c"></span>
      <input class="plf:radio" type="radio" name="accent" value="orange">
      <span class="plf:choice-card-title">Orange</span>
    </label>
  </div>
</fieldset>

import { ChoiceCard, ChoiceCardSwatch, ChoiceCardTitle, FieldGroup, Radio } from '@pelatform/react';

export function Example() {
  return (
    <FieldGroup legend="Accent color">
      <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
        <ChoiceCard>
          <ChoiceCardSwatch style={{ background: '#2563eb' }} />
          <Radio name="accent" value="blue" defaultChecked />
          <ChoiceCardTitle>Blue</ChoiceCardTitle>
        </ChoiceCard>
        <ChoiceCard>
          <ChoiceCardSwatch style={{ background: '#7c3aed' }} />
          <Radio name="accent" value="violet" />
          <ChoiceCardTitle>Violet</ChoiceCardTitle>
        </ChoiceCard>
        <ChoiceCard>
          <ChoiceCardSwatch style={{ background: '#16a34a' }} />
          <Radio name="accent" value="green" />
          <ChoiceCardTitle>Green</ChoiceCardTitle>
        </ChoiceCard>
        <ChoiceCard>
          <ChoiceCardSwatch style={{ background: '#ea580c' }} />
          <Radio name="accent" value="orange" />
          <ChoiceCardTitle>Orange</ChoiceCardTitle>
        </ChoiceCard>
      </div>
    </FieldGroup>
  );
}

import { ChoiceCard, ChoiceCardSwatch, ChoiceCardTitle, FieldGroup, Radio } from '@pelatform/react/prefixed';

export function Example() {
  return (
    <FieldGroup legend="Accent color">
      <div className="plf:grid plf:grid-cols-2 plf:md:grid-cols-4 plf:gap-3">
        <ChoiceCard>
          <ChoiceCardSwatch style={{ background: '#2563eb' }} />
          <Radio name="accent" value="blue" defaultChecked />
          <ChoiceCardTitle>Blue</ChoiceCardTitle>
        </ChoiceCard>
        <ChoiceCard>
          <ChoiceCardSwatch style={{ background: '#7c3aed' }} />
          <Radio name="accent" value="violet" />
          <ChoiceCardTitle>Violet</ChoiceCardTitle>
        </ChoiceCard>
        <ChoiceCard>
          <ChoiceCardSwatch style={{ background: '#16a34a' }} />
          <Radio name="accent" value="green" />
          <ChoiceCardTitle>Green</ChoiceCardTitle>
        </ChoiceCard>
        <ChoiceCard>
          <ChoiceCardSwatch style={{ background: '#ea580c' }} />
          <Radio name="accent" value="orange" />
          <ChoiceCardTitle>Orange</ChoiceCardTitle>
        </ChoiceCard>
      </div>
    </FieldGroup>
  );
}

Palette

Chart colors

Ocean Forest Sunset

<fieldset class="field field-group">
  <legend class="field-legend">Chart colors</legend>
  <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
    <label class="choice-card">
      <span class="choice-card-swatch">
        <span style="background: #1e3a8a"></span>
        <span style="background: #2563eb"></span>
        <span style="background: #60a5fa"></span>
        <span style="background: #dbeafe"></span>
      </span>
      <input class="radio" type="radio" name="chart-colors" value="ocean" checked>
      <span class="choice-card-title">Ocean</span>
    </label>
    <label class="choice-card">
      <span class="choice-card-swatch">
        <span style="background: #14532d"></span>
        <span style="background: #16a34a"></span>
        <span style="background: #4ade80"></span>
        <span style="background: #dcfce7"></span>
      </span>
      <input class="radio" type="radio" name="chart-colors" value="forest">
      <span class="choice-card-title">Forest</span>
    </label>
    <label class="choice-card">
      <span class="choice-card-swatch">
        <span style="background: #7c2d12"></span>
        <span style="background: #ea580c"></span>
        <span style="background: #fb923c"></span>
        <span style="background: #ffedd5"></span>
      </span>
      <input class="radio" type="radio" name="chart-colors" value="sunset">
      <span class="choice-card-title">Sunset</span>
    </label>
  </div>
</fieldset>

<fieldset class="plf:field plf:field-group">
  <legend class="plf:field-legend">Chart colors</legend>
  <div class="plf:grid plf:grid-cols-1 plf:md:grid-cols-3 plf:gap-3">
    <label class="plf:choice-card">
      <span class="plf:choice-card-swatch">
        <span style="background: #1e3a8a"></span>
        <span style="background: #2563eb"></span>
        <span style="background: #60a5fa"></span>
        <span style="background: #dbeafe"></span>
      </span>
      <input class="plf:radio" type="radio" name="chart-colors" value="ocean" checked>
      <span class="plf:choice-card-title">Ocean</span>
    </label>
    <label class="plf:choice-card">
      <span class="plf:choice-card-swatch">
        <span style="background: #14532d"></span>
        <span style="background: #16a34a"></span>
        <span style="background: #4ade80"></span>
        <span style="background: #dcfce7"></span>
      </span>
      <input class="plf:radio" type="radio" name="chart-colors" value="forest">
      <span class="plf:choice-card-title">Forest</span>
    </label>
    <label class="plf:choice-card">
      <span class="plf:choice-card-swatch">
        <span style="background: #7c2d12"></span>
        <span style="background: #ea580c"></span>
        <span style="background: #fb923c"></span>
        <span style="background: #ffedd5"></span>
      </span>
      <input class="plf:radio" type="radio" name="chart-colors" value="sunset">
      <span class="plf:choice-card-title">Sunset</span>
    </label>
  </div>
</fieldset>

import { ChoiceCard, ChoiceCardSwatch, ChoiceCardTitle, FieldGroup, Radio } from '@pelatform/react';

export function Example() {
  return (
    <FieldGroup legend="Chart colors">
      <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
        <ChoiceCard>
          <ChoiceCardSwatch>
            <span style={{ background: '#1e3a8a' }} />
            <span style={{ background: '#2563eb' }} />
            <span style={{ background: '#60a5fa' }} />
            <span style={{ background: '#dbeafe' }} />
          </ChoiceCardSwatch>
          <Radio name="chart-colors" value="ocean" defaultChecked />
          <ChoiceCardTitle>Ocean</ChoiceCardTitle>
        </ChoiceCard>
        <ChoiceCard>
          <ChoiceCardSwatch>
            <span style={{ background: '#14532d' }} />
            <span style={{ background: '#16a34a' }} />
            <span style={{ background: '#4ade80' }} />
            <span style={{ background: '#dcfce7' }} />
          </ChoiceCardSwatch>
          <Radio name="chart-colors" value="forest" />
          <ChoiceCardTitle>Forest</ChoiceCardTitle>
        </ChoiceCard>
        <ChoiceCard>
          <ChoiceCardSwatch>
            <span style={{ background: '#7c2d12' }} />
            <span style={{ background: '#ea580c' }} />
            <span style={{ background: '#fb923c' }} />
            <span style={{ background: '#ffedd5' }} />
          </ChoiceCardSwatch>
          <Radio name="chart-colors" value="sunset" />
          <ChoiceCardTitle>Sunset</ChoiceCardTitle>
        </ChoiceCard>
      </div>
    </FieldGroup>
  );
}

import { ChoiceCard, ChoiceCardSwatch, ChoiceCardTitle, FieldGroup, Radio } from '@pelatform/react/prefixed';

export function Example() {
  return (
    <FieldGroup legend="Chart colors">
      <div className="plf:grid plf:grid-cols-1 plf:md:grid-cols-3 plf:gap-3">
        <ChoiceCard>
          <ChoiceCardSwatch>
            <span style={{ background: '#1e3a8a' }} />
            <span style={{ background: '#2563eb' }} />
            <span style={{ background: '#60a5fa' }} />
            <span style={{ background: '#dbeafe' }} />
          </ChoiceCardSwatch>
          <Radio name="chart-colors" value="ocean" defaultChecked />
          <ChoiceCardTitle>Ocean</ChoiceCardTitle>
        </ChoiceCard>
        <ChoiceCard>
          <ChoiceCardSwatch>
            <span style={{ background: '#14532d' }} />
            <span style={{ background: '#16a34a' }} />
            <span style={{ background: '#4ade80' }} />
            <span style={{ background: '#dcfce7' }} />
          </ChoiceCardSwatch>
          <Radio name="chart-colors" value="forest" />
          <ChoiceCardTitle>Forest</ChoiceCardTitle>
        </ChoiceCard>
        <ChoiceCard>
          <ChoiceCardSwatch>
            <span style={{ background: '#7c2d12' }} />
            <span style={{ background: '#ea580c' }} />
            <span style={{ background: '#fb923c' }} />
            <span style={{ background: '#ffedd5' }} />
          </ChoiceCardSwatch>
          <Radio name="chart-colors" value="sunset" />
          <ChoiceCardTitle>Sunset</ChoiceCardTitle>
        </ChoiceCard>
      </div>
    </FieldGroup>
  );
}

Disabled

Say why a choice is unavailable in its card; the disabled state alone does not explain it.

Region

Europe Frankfurt data center. Asia Pacific (unavailable) Opens next quarter.

<fieldset class="field field-group">
  <legend class="field-legend">Region</legend>
  <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
    <label class="choice-card">
      <input class="radio" type="radio" name="region" value="europe" checked>
      <span class="choice-card-title">Europe</span>
      <span class="choice-card-description">Frankfurt data center.</span>
    </label>
    <label class="choice-card">
      <input class="radio" type="radio" name="region" value="asia-pacific" disabled>
      <span class="choice-card-title">Asia Pacific (unavailable)</span>
      <span class="choice-card-description">Opens next quarter.</span>
    </label>
  </div>
</fieldset>

<fieldset class="plf:field plf:field-group">
  <legend class="plf:field-legend">Region</legend>
  <div class="plf:grid plf:grid-cols-1 plf:md:grid-cols-2 plf:gap-3">
    <label class="plf:choice-card">
      <input class="plf:radio" type="radio" name="region" value="europe" checked>
      <span class="plf:choice-card-title">Europe</span>
      <span class="plf:choice-card-description">Frankfurt data center.</span>
    </label>
    <label class="plf:choice-card">
      <input class="plf:radio" type="radio" name="region" value="asia-pacific" disabled>
      <span class="plf:choice-card-title">Asia Pacific (unavailable)</span>
      <span class="plf:choice-card-description">Opens next quarter.</span>
    </label>
  </div>
</fieldset>

import { ChoiceCard, ChoiceCardDescription, ChoiceCardTitle, FieldGroup, Radio } from '@pelatform/react';

export function Example() {
  return (
    <FieldGroup legend="Region">
      <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
        <ChoiceCard>
          <Radio name="region" value="europe" defaultChecked />
          <ChoiceCardTitle>Europe</ChoiceCardTitle>
          <ChoiceCardDescription>Frankfurt data center.</ChoiceCardDescription>
        </ChoiceCard>
        <ChoiceCard>
          <Radio name="region" value="asia-pacific" disabled />
          <ChoiceCardTitle>Asia Pacific (unavailable)</ChoiceCardTitle>
          <ChoiceCardDescription>Opens next quarter.</ChoiceCardDescription>
        </ChoiceCard>
      </div>
    </FieldGroup>
  );
}

import { ChoiceCard, ChoiceCardDescription, ChoiceCardTitle, FieldGroup, Radio } from '@pelatform/react/prefixed';

export function Example() {
  return (
    <FieldGroup legend="Region">
      <div className="plf:grid plf:grid-cols-1 plf:md:grid-cols-2 plf:gap-3">
        <ChoiceCard>
          <Radio name="region" value="europe" defaultChecked />
          <ChoiceCardTitle>Europe</ChoiceCardTitle>
          <ChoiceCardDescription>Frankfurt data center.</ChoiceCardDescription>
        </ChoiceCard>
        <ChoiceCard>
          <Radio name="region" value="asia-pacific" disabled />
          <ChoiceCardTitle>Asia Pacific (unavailable)</ChoiceCardTitle>
          <ChoiceCardDescription>Opens next quarter.</ChoiceCardDescription>
        </ChoiceCard>
      </div>
    </FieldGroup>
  );
}

Invalid

Your application adds and removes aria-invalid on each control and the message; start the message with “Error:” so the state does not rely on color alone.

Billing period

Monthly Yearly Two months free.

Error: choose a billing period.

<fieldset class="field field-group">
  <legend class="field-legend">Billing period</legend>
  <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
    <label class="choice-card">
      <input class="radio" type="radio" name="billing-period" value="monthly" required aria-invalid="true" aria-describedby="choice-card-period-error">
      <span class="choice-card-title">Monthly</span>
    </label>
    <label class="choice-card">
      <input class="radio" type="radio" name="billing-period" value="yearly" required aria-invalid="true" aria-describedby="choice-card-period-error">
      <span class="choice-card-title">Yearly</span>
      <span class="choice-card-description">Two months free.</span>
    </label>
  </div>
  <p class="field-error" id="choice-card-period-error">Error: choose a billing period.</p>
</fieldset>

<fieldset class="plf:field plf:field-group">
  <legend class="plf:field-legend">Billing period</legend>
  <div class="plf:grid plf:grid-cols-1 plf:md:grid-cols-2 plf:gap-3">
    <label class="plf:choice-card">
      <input class="plf:radio" type="radio" name="billing-period" value="monthly" required aria-invalid="true" aria-describedby="choice-card-period-error">
      <span class="plf:choice-card-title">Monthly</span>
    </label>
    <label class="plf:choice-card">
      <input class="plf:radio" type="radio" name="billing-period" value="yearly" required aria-invalid="true" aria-describedby="choice-card-period-error">
      <span class="plf:choice-card-title">Yearly</span>
      <span class="plf:choice-card-description">Two months free.</span>
    </label>
  </div>
  <p class="plf:field-error" id="choice-card-period-error">Error: choose a billing period.</p>
</fieldset>

import { ChoiceCard, ChoiceCardDescription, ChoiceCardTitle, FieldGroup, Radio } from '@pelatform/react';

export function Example() {
  return (
    <FieldGroup legend="Billing period" error="Error: choose a billing period.">
      <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
        <ChoiceCard>
          <Radio name="billing-period" value="monthly" required />
          <ChoiceCardTitle>Monthly</ChoiceCardTitle>
        </ChoiceCard>
        <ChoiceCard>
          <Radio name="billing-period" value="yearly" required />
          <ChoiceCardTitle>Yearly</ChoiceCardTitle>
          <ChoiceCardDescription>Two months free.</ChoiceCardDescription>
        </ChoiceCard>
      </div>
    </FieldGroup>
  );
}

import { ChoiceCard, ChoiceCardDescription, ChoiceCardTitle, FieldGroup, Radio } from '@pelatform/react/prefixed';

export function Example() {
  return (
    <FieldGroup legend="Billing period" error="Error: choose a billing period.">
      <div className="plf:grid plf:grid-cols-1 plf:md:grid-cols-2 plf:gap-3">
        <ChoiceCard>
          <Radio name="billing-period" value="monthly" required />
          <ChoiceCardTitle>Monthly</ChoiceCardTitle>
        </ChoiceCard>
        <ChoiceCard>
          <Radio name="billing-period" value="yearly" required />
          <ChoiceCardTitle>Yearly</ChoiceCardTitle>
          <ChoiceCardDescription>Two months free.</ChoiceCardDescription>
        </ChoiceCard>
      </div>
    </FieldGroup>
  );
}

React

ChoiceCard from @pelatform/react renders the card’s label around a Radio, Checkbox or Switch without children, and each part is a component of its own; an icon is an Icon in the card.

Part	Element
`ChoiceCardTitle`	A `span` with `choice-card-title`
`ChoiceCardDescription`	A `span` with `choice-card-description`
`ChoiceCardImage`	An `img` with `choice-card-image`
`ChoiceCardSwatch`	A `span` with `choice-card-swatch`, colored by its `style` or by one span per color

Other props are the element’s own, className and ref included.

CSS variables

Override on a root or on a single card.

Variable	Default
`--plf-choice-card-padding`	`--plf-space-4`, `1rem` (16px)
`--plf-choice-card-radius`	`--plf-radius-lg`, `0.5rem` (8px), as on inputs
`--plf-choice-card-bg`	Transparent, the surface beneath
`--plf-choice-card-border`	`--plf-color-border-subtle`
`--plf-choice-card-hover-bg`	`--plf-color-surface-hover`
`--plf-choice-card-selected-bg`	`--plf-color-primary-subtle`
`--plf-choice-card-selected-border`	`--plf-color-primary`
`--plf-choice-card-icon-size`	`1.5rem` (24px)
`--plf-choice-card-swatch-height`	`--plf-space-8`, `2rem` (32px)
`--plf-choice-size`, `--plf-choice-accent`	The control’s size and color, as on Radio; a switch takes Switch’s