InputCard

Primitive selectable card used as the base for RadioCard and CheckboxCard. Purely presentational - the parent owns selected and click handling. Selection and disabled states are exposed as data-selected/data-disabled for styling.

Terrazzo - Veneto

Marble - Carrara

Usage

import { getInputCardIconSize, INPUT_CARD_ICON_SIZE, InputCard, inputCardBaseStyles, InputCardIcon, InputCardProps, inputCardSelectedStyles, inputCardSizeStyles } from "@instruments/materia-ui/components/input-card";

Best practices

InputCard is a presentational primitive - the parent owns selected and click handling; for real form semantics use RadioCardGroup/CheckboxCardGroup, which build on it.
Drive the selected look via the selected prop (it sets data-selected + the primary tint), not by appending your own active classes.
Use render to project the card styling onto a real interactive element (e.g. a <label> wrapping an input) when you need native selection behaviour.

Props

InputCard

Prop	Type	Description
disabled	`boolean`	Whether disabled
selected	`boolean`	Selected state; drives the primary-tinted styling and the `data-selected` attribute.
size	`"base" \| "2xs" \| "xs" \| "sm" \| "lg" \| "xl" \| "2xl" \| "3xl"`	Component size

InputCardIcon

Prop	Type	Default	Description
className	`string`
icon(required)	`LucideIcon \| React.ComponentType<React.SVGProps<SVGSVGElement>>`
selected	`boolean`
size(required)	`"base" \| "2xs" \| "xs" \| "sm" \| "lg" \| "xl" \| "2xl" \| "3xl"`

Also exports

constgetInputCardIconSize
constINPUT_CARD_ICON_SIZE
constinputCardBaseStyles
interfaceInputCardProps
constinputCardSelectedStyles
constinputCardSizeStyles

Composition

Builds on

Icon

Used by

CheckboxCardGroup, RadioCardGroup