Skip to main content
⌘K
Last modified: 9/Oct/2024

RadioCard

Use the RadioCard component when you want to offer a few options for the user to choose from (ideally 3 or 4), and they can only choose one. The RadioCard comes with a description and can be extended with icons and other elements. The RadioCard can come in handy when displaying different plans or upselling opportunities.

Please only use RadioCard component with Group component

#Usage

import { RadioCard } from '@kinsta/stratus'

const MyComponent = () => (
  <RadioCard isChecked>
    <RadioCard.Content title="Radio Card component" text="Radio Card component" />
  </RadioCard>
)

#Props

The RadioCard components interface extends the HTMLInputElement interface. So you can use any props which documented there. Also, you can utilize all the React Synthetic events (on*), and props related to styling (className, style).

#layout
"vertical" | "horizontal"
The way the RadioCard is displayed
#isChecked
boolean
Decides whether the radio card is selected or not
false
#isInFocus
boolean
Decides whether the radio card has focus on it.
false
#isInGroup
boolean
Removes the Radio card from the tab flow. The tab navigation is disabled between the group items, but the arrow navigation is available instead. It's always set to true in the Group component.
true
#value
string
The identifier of the radio card
#ctaButton
CtaButtonType
Defines the CTA button - Defaults to { text: 'Choose', type: 'secondary', tooltipText: 'Item can't be selected' }
{ text: <Translation path="choose" />, type: 'secondary', tooltipText: <Translation path="cannotBeSelected" />, }
#onChange
(value?: string) => void
Handler that is called when the radio card changes.
#isDisabled
boolean
Decides whether the radio card is disabled.
false

#RadioCard.Content Props

The Content component provides basic styles that render the default layout and look of the RadioCard. Use the Content component if you want to display the basic design.

#image
ReactElement ǀ string ǀ number ǀ null
Renders an image above the title
#title
ReactElement ǀ string ǀ number ǀ null
Add title to the radio card content
#description
ReactElement ǀ string ǀ number ǀ null
Add description to the radio card content

#Types

  • RadioCardProps: props of the RadioCard component processed by stratus
  • RadioCardInterface: RadioCardProps extended by HTMLAttributes<HTML….>
  • RadioCardComponent: RadioCardInterface extended by ForwardRefExoticComponent type, and it also includes the RadioCard.Content subcomponent's type:
type RadioCardComponent = ForwardRefExoticComponent<
    RadioCardInterface & RefAttributes<HTMLInputElement>
    > & {
  Content: (props: RadioCardContentProps) => JSX.Element
}

Read more about types here

#See also