Default checked
Controlled
Title only
Unchecked
Disabled
Multi-select grid
Selection indicator
selectionIndicator — auto adjusts ring weight and tint per theme. Compare weights below; first card in each row is checked.
Animation variants
animationVariant — click each control to compare press feedback.
API
| Prop | Required | Type | Default | Description |
|---|---|---|---|---|
| title / description | Optional | ReactNode | — | Tile copy. |
| checked / onCheckedChange | Optional | boolean | — | Controlled state. |
| selectionIndicator | Optional | "auto" | "hairline" | "thin" | "medium" | "thick" | "ring" | "filled" | auto | Selected-state chrome — auto tunes ring/border contrast per theme; hairline through thick control weight; ring uses offset outline; filled uses strong tint. |
| animationVariant | Optional | PressAnimationVariant | default | Press animation on the tile — default, none, ripple, scale, sink, lift, pulse, or glow. |