RadioCardInterface

layout

"vertical" | "horizontal"

RadioCardProps

Decides whether the radio card is selected or not

isChecked

boolean

Decides whether the radio card has focus on it.

isInFocus

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.

isInGroup

value

string

Defines the CTA button - Defaults to { text: 'Choose', type: 'secondary', tooltipText: 'Item can't be selected' }

ctaButton

CtaButtonType

Handler that is called when the radio card changes.

onChange

(value?: string) => void

Decides whether the radio card is disabled.

isDisabled

InputHTMLAttributes

accept

autoComplete

capture

boolean | "user" | "environment"

checked

enterKeyHint

"enter" | "done" | "go" | "next" | "previous" | "search" | "send"

form

formAction

formEncType

formMethod

formNoValidate

formTarget

height

string | number

list

maxLength

number

minLength

multiple

name

pattern

placeholder

readOnly

required

size

step

type

HTMLInputTypeAttribute

width

HTMLAttributes

defaultChecked

defaultValue

string | number | readonly string[]

suppressContentEditableWarning

suppressHydrationWarning

accessKey

autoFocus

className

contentEditable

Booleanish | "inherit" | "plaintext-only"

contextMenu

draggable

Booleanish

hidden

lang

nonce

slot

spellCheck

style

CSSProperties

tabIndex

title

translate

"yes" | "no"

radioGroup

role

AriaRole

about

content

datatype

inlist

prefix

property

resource

typeof

vocab

autoCapitalize

autoCorrect

autoSave

color

itemProp

itemScope

itemType

itemID

itemRef

results

security

unselectable

"on" | "off"

Hints at the type of data that might be entered by the user while editing the element or its contents
@see https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute

inputMode

"search" | "email" | "tel" | "text" | "url" | "none" | "numeric" | "decimal"

Specify that a standard HTML element should behave like a defined custom built-in element
@see https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is

AriaAttributes

Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.

aria-activedescendant

Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.

aria-atomic

Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be
presented if they are made.

aria-autocomplete

"list" | "none" | "inline" | "both"

Defines a string value that labels the current element, which is intended to be converted into Braille.
@see aria-label.

aria-braillelabel

Defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille.
@see aria-roledescription.

aria-brailleroledescription

aria-busy

Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.
@see aria-pressed
@see aria-selected.

aria-checked

boolean | "true" | "false" | "mixed"

Defines the total number of columns in a table, grid, or treegrid.
@see aria-colindex.

aria-colcount

Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.
@see aria-colcount
@see aria-colspan.

aria-colindex

Defines a human readable text alternative of aria-colindex.
@see aria-rowindextext.

aria-colindextext

Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.
@see aria-colindex
@see aria-rowspan.

aria-colspan

Identifies the element (or elements) whose contents or presence are controlled by the current element.
@see aria-owns.

aria-controls

Indicates the element that represents the current item within a container or set of related elements.

aria-current

boolean | "step" | "date" | "time" | "true" | "false" | "page" | "location"

Identifies the element (or elements) that describes the object.
@see aria-labelledby

aria-describedby

Defines a string value that describes or annotates the current element.
@see related aria-describedby.

aria-description


# 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.__

import { Demo } from '@kinsta/stratus-website'
import { NotePanel } from '@kinsta/stratus'

<NotePanel type="warning" >Please only use RadioCard component with <a href="/choice-group">Group component</a></NotePanel>

<Demo storybookPath="components-choice-radio%EF%B8%8Fcard--default" />

## Usage

```tsx
import { RadioCard } from '@kinsta/stratus'

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

## Props

The <code>RadioCard</code> components interface extends the
[<code>HTMLInputElement</code>](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement "MDN article about the interface")
interface. So you can use any props which documented there. Also, you can utilize all the React Synthetic events (<code>on*</code>),
and props related to styling (<code>className</code>, <code>style</code>).

<Props />

### RadioCard.Content Props

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

| Name        | Type                                  | Description                               | Default |
|:------------|:--------------------------------------|:------------------------------------------|:--------|
| 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

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

Read more about [types](/docs/user-guide/getting-started/types "Types") here

***

## See also

- [Group](/docs/user-guide/components/form-elements/choice/group "Group component")


RadioCard

#Usage

#Props

#RadioCard.Content Props

#Types

#See also