Layout

Box

A selectable option with a media column — the payment-method picker. Its selected state is the green border and the floating check, not a radio dot.

import Box from '@/components/ui/Box';

Source: src/components/ui/Box.tsx

Examples

The whole box is the target, which is the point: a 300px-wide option with a 16px radio in the corner is a worse tap target for no benefit.

Bank transfer

2–3 business days

PayPal

Instant

Prop	Type	Default	Description
`media`required	`ReactNode`	—	Left column content (e.g. a payment-method logo). Images render at 60% width, centered.
`selected`	`boolean`	`false`	Adds the green border + floating checkmark badge of the style guide's `.box.selected`.
`onClick`	`() => void`	—	—
`className`	`string`	`''`	—
`children`required	`ReactNode`	—	—

Pass onClick and the box becomes a real control; without it, it is presentational.
For a set where exactly one may be chosen, the underlying semantics should still be radios — Box is the visual, not a replacement for the group.