OptionCard

Structure

The OptionCard component renders a native HTML <input> element (either type="radio" or type="checkbox", depending on configuration) wrapped inside a <label> element. The wrapping <label> makes the entire card surface a click target for the input, so users can select or deselect the card by clicking anywhere within it. The input is visually hidden but remains in the accessibility tree. The card's title or ariaLabel provides its accessible name.

When used inside an OptionCardGroup, the group renders as a <fieldset> element with an optional <legend>, giving assistive technology a semantic boundary for the set of related options. Title and description text within each card render as <span> elements with no inherent accessible roles.

ARIA

Decorative elements

Icons and custom images inside the card are treated as decorative. The icon prop renders an Icon component that receives a color adjustment when disabled but carries no accessible name of its own. The iconSrc prop renders an Image with an empty alt attribute, ensuring screen readers skip it entirely. Meaning should always come from the card's title or ariaLabel, never from the icon or image alone.

Labels

We highly recommend adding a visible title with the title prop. If a visible title is unneeded for the use case, add an ariaLabel or ariaLabelledby so assistive technology will announce the card to the user. Because the <label> element wraps both the input and the card content, the title text automatically serves as the input's accessible name without requiring explicit ID linking.

Keyboard