Leave Yamada UI a star

Star
Yamada UIYamada UIv1.7.2

RadioCard

RadioCard is a component used for allowing users to select one option from multiple choices.

Source@yamada-ui/radio

Props

RadioCardProps

addon

Description

The addon of the radio card.

Type

type ONLY_FOR_FORMAT = | string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal

addonProps

Description

Props for the footer of the radio card.

Type

RadioCardAddonProps

checked

Description

If true, the radio will be checked.

Type

boolean

Default

false

colorScheme

Description

The visual color appearance of the component.

Type

"blackAlpha" | "whiteAlpha" | "amber" | "blue" | "info" | "link" | "primary" | "cyan" | "emerald" | "flashy" | "fuchsia" | "gray" | "green" | "success" | "indigo" | "lime" | "neutral" | "orange" | "warning" | "pink" | "purple" | "red" | "danger" | "rose" | "sky" | "teal" | "violet" | "secondary" | "yellow"

Default

"primary"

defaultChecked

Description

If true, the radio will be initially checked.

Type

boolean

Default

false

defaultIsChecked

Deprecated

Description

If true, the radio will be initially checked.

Deprecated

Use defaultChecked instead.

Type

boolean

Default

false

description

Description

The body of the radio card.

Type

type ONLY_FOR_FORMAT = | string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal

descriptionProps

Description

Props for the description of the radio card.

Type

RadioCardDescriptionProps

disabled

Description

If true, the form control will be disabled.

Type

boolean

Default

false

iconProps

Description

Props for the icon of the radio card.

Type

HTMLUIProps

id

Description

id assigned to input.

Type

string

inputProps

Description

Props for input element.

Type

InputHTMLAttributes<HTMLInputElement>

invalid

Description

If true, the form control will be invalid.

Type

boolean

Default

false

isChecked

Deprecated

Description

If true, the radio will be checked.

Deprecated

Use checked instead.

Type

boolean

Default

false

isDisabled

Deprecated

Description

If true, the form control will be disabled.

Deprecated

Use disabled instead.

Type

boolean

Default

false

isInvalid

Deprecated

Description

If true, the form control will be invalid.

Deprecated

Use invalid instead.

Type

boolean

Default

false

isReadOnly

Deprecated

Description

If true, the form control will be readonly.

Deprecated

Use readOnly instead.

Type

boolean

Default

false

isRequired

Deprecated

Description

If true, the form control will be required.

Deprecated

Use required instead.

Type

boolean

Default

false

label

Description

The label of the radio card.

Type

type ONLY_FOR_FORMAT = | string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal

labelProps

Description

Props for the label of the radio card.

Type

RadioCardLabelProps

name

Description

The name of the input field in a radio.

Type

string

onChange

Description

The callback invoked when the checked state changes.

Type

ChangeEventHandler<HTMLInputElement>

readOnly

Description

If true, the form control will be readonly.

Type

boolean

Default

false

required

Description

If true, the form control will be required.

Type

boolean

Default

false

size

Description

The size of the RadioCard.

Type

"sm" | "md" | "lg"

Default

"md"

value

Description

The value to be used in the radio button.

Type

Y

variant

Description

The variant of the RadioCard.

Type

"outline" | "subtle" | "surface"

Default

"outline"

withIcon

Description

If true, the icon will be displayed.

Type

boolean

Default

true

RadioCardGroupProps

addonProps

Description

Props for the footer of the radio card.

Type

RadioCardAddonProps

align

Description

The CSS align-items property.

Type

UIValue<AlignItems>

basis

Description

The CSS flex-basis property.

Type

UIValue<number | "content" | "px" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "2xl" | "lg" | "md" | "sm" | "xl" | ({} & string) | (string & {}) | "-moz-fit-content" | ... 69 more ... | "xs">

defaultValue

Description

The initial value of the radio group.

Type

Y

descriptionProps

Description

Props for the description of the radio card.

Type

RadioCardDescriptionProps

direction

Description

The CSS flex-direction property.

Type

UIValue<FlexDirection>

disabled

Description

If true, the form control will be disabled.

Type

boolean

Default

false

grow

Description

The CSS flex-grow property.

Type

UIValue<FlexGrow>

invalid

Description

If true, the form control will be invalid.

Type

boolean

Default

false

isDisabled

Deprecated

Description

If true, the form control will be disabled.

Deprecated

Use disabled instead.

Type

boolean

Default

false

isInvalid

Deprecated

Description

If true, the form control will be invalid.

Deprecated

Use invalid instead.

Type

boolean

Default

false

isNative

Deprecated

Description

If true, input elements will receive checked attribute instead of isChecked. This assumes, you're using native radio inputs.

Deprecated

It will be deprecated in version 2.0.

Type

boolean

Default

false

isReadOnly

Deprecated

Description

If true, the form control will be readonly.

Deprecated

Use readOnly instead.

Type

boolean

Default

false

isRequired

Deprecated

Description

If true, the form control will be required.

Deprecated

Use required instead.

Type

boolean

Default

false

items

Description

If provided, generate radio cards based on items.

Type

RadioCardItem<Y>[]

Default

'[]'

justify

Description

The CSS justify-content property.

Type

UIValue<JustifyContent>

labelProps

Description

Props for the label of the radio card.

Type

RadioCardLabelProps

name

Description

The HTML name attribute used for forms.

Type

string

onChange

Description

The callback fired when any children radio is checked or unchecked.

Type

(value: Y) => void

readOnly

Description

If true, the form control will be readonly.

Type

boolean

Default

false

required

Description

If true, the form control will be required.

Type

boolean

Default

false

shrink

Description

The CSS flex-shrink property.

Type

UIValue<FlexShrink>

value

Description

The value of the radio group.

Type

Y

withIcon

Description

If true, the icon will be displayed.

Type

boolean

Default

true

wrap

Description

The CSS flex-wrap property.

Type

UIValue<FlexWrap>

RadioCardLabelProps

contentProps

Description

The props for the label content.

Type

HTMLUIProps<"span">

iconProps

Description

The props for the icon.

Type

HTMLUIProps

withIcon

Description

If true, the icon will be displayed.

Type

boolean

Default

true

RadioCardDescriptionProps

RadioCardAddonProps

Edit this page on GitHub

PreviousRadioNextCheckbox