# Payment method card checkbox

> Payment method card checkbox

A shadcn/ui block from the [@reui](https://reui.io) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/reui/c-checkbox-17).

- Page, with a live preview: https://shadcn.exchange/r/reui/c-checkbox-17
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/reui/c-checkbox-17-light-816826b6fa918558.png
- Registry item: https://reui.io/r/new-york-v4/c-checkbox-17.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://reui.io/r/new-york-v4/c-checkbox-17.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `checkbox`, `field`

## Files

### `c-checkbox-17.tsx`

```tsx
"use client"

import { SVGProps } from "react"

import { Checkbox } from "@/components/ui/checkbox"
import { Field, FieldLabel, FieldTitle } from "@/components/ui/field"

const MastercardIcon = (props: SVGProps<SVGSVGElement>) => (
  <svg
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    {...props}
  >
    <circle cx="7" cy="12" r="7" fill="#EB001B" />
    <circle cx="17" cy="12" r="7" fill="#F79E1B" />
    <path
      d="M12 17.5C13.5 16.2 14.5 14.2 14.5 12C14.5 9.8 13.5 7.8 12 6.5C10.5 7.8 9.5 9.8 9.5 12C9.5 14.2 10.5 16.2 12 17.5Z"
      fill="#FF5F00"
    />
  </svg>
)

export function Pattern() {
  return (
    <div className="mx-auto w-full max-w-xs">
      <FieldLabel htmlFor="mastercard" className="relative p-0!">
        <Field orientation="horizontal">
          <Checkbox
            id="mastercard"
            defaultChecked
            className="absolute top-3 right-3 size-5 rounded-full"
          />
          <FieldTitle className="flex flex-col items-start gap-4!">
            <div className="bg-background border-border rounded-lg flex size-10 items-center justify-center border p-1.5 shadow-xs shadow-black/5">
              <MastercardIcon className="size-full" />
            </div>
            <div className="flex flex-col items-start gap-0.5">
              <span className="text-sm font-medium">
                Mastercard ending in 8888
              </span>
              <span className="text-muted-foreground text-xs">
                Expires 09/25
              </span>
            </div>
          </FieldTitle>
        </Field>
      </FieldLabel>
    </div>
  )
}
```