Yamada UIにスターをあげる

スター
Yamada UIYamada UIv1.7.2

RadioCard

RadioCardは、ユーザーが複数の選択肢の中から1つを選択するための使用されるコンポーネントです。

ソース@yamada-ui/radio

Props

RadioCardProps

addon

説明

The addon of the radio card.

タイプ

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

addonProps

説明

Props for the footer of the radio card.

タイプ

RadioCardAddonProps

checked

説明

If true, the radio will be checked.

タイプ

boolean

デフォルト

false

colorScheme

説明

The visual color appearance of the component.

タイプ

"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"

デフォルト

"primary"

defaultChecked

説明

If true, the radio will be initially checked.

タイプ

boolean

デフォルト

false

defaultIsChecked

非推奨

説明

If true, the radio will be initially checked.

非推奨

Use defaultChecked instead.

タイプ

boolean

デフォルト

false

description

説明

The body of the radio card.

タイプ

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

descriptionProps

説明

Props for the description of the radio card.

タイプ

RadioCardDescriptionProps

disabled

説明

If true, the form control will be disabled.

タイプ

boolean

デフォルト

false

iconProps

説明

Props for the icon of the radio card.

タイプ

HTMLUIProps

id

説明

id assigned to input.

タイプ

string

inputProps

説明

Props for input element.

タイプ

InputHTMLAttributes<HTMLInputElement>

invalid

説明

If true, the form control will be invalid.

タイプ

boolean

デフォルト

false

isChecked

非推奨

説明

If true, the radio will be checked.

非推奨

Use checked instead.

タイプ

boolean

デフォルト

false

isDisabled

非推奨

説明

If true, the form control will be disabled.

非推奨

Use disabled instead.

タイプ

boolean

デフォルト

false

isInvalid

非推奨

説明

If true, the form control will be invalid.

非推奨

Use invalid instead.

タイプ

boolean

デフォルト

false

isReadOnly

非推奨

説明

If true, the form control will be readonly.

非推奨

Use readOnly instead.

タイプ

boolean

デフォルト

false

isRequired

非推奨

説明

If true, the form control will be required.

非推奨

Use required instead.

タイプ

boolean

デフォルト

false

label

説明

The label of the radio card.

タイプ

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

labelProps

説明

Props for the label of the radio card.

タイプ

RadioCardLabelProps

name

説明

The name of the input field in a radio.

タイプ

string

onChange

説明

The callback invoked when the checked state changes.

タイプ

ChangeEventHandler<HTMLInputElement>

readOnly

説明

If true, the form control will be readonly.

タイプ

boolean

デフォルト

false

required

説明

If true, the form control will be required.

タイプ

boolean

デフォルト

false

size

説明

The size of the RadioCard.

タイプ

"sm" | "md" | "lg"

デフォルト

"md"

value

説明

The value to be used in the radio button.

タイプ

Y

variant

説明

The variant of the RadioCard.

タイプ

"outline" | "subtle" | "surface"

デフォルト

"outline"

withIcon

説明

If true, the icon will be displayed.

タイプ

boolean

デフォルト

true

RadioCardGroupProps

addonProps

説明

Props for the footer of the radio card.

タイプ

RadioCardAddonProps

align

説明

The CSS align-items property.

タイプ

UIValue<AlignItems>

basis

説明

The CSS flex-basis property.

タイプ

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

説明

The initial value of the radio group.

タイプ

Y

descriptionProps

説明

Props for the description of the radio card.

タイプ

RadioCardDescriptionProps

direction

説明

The CSS flex-direction property.

タイプ

UIValue<FlexDirection>

disabled

説明

If true, the form control will be disabled.

タイプ

boolean

デフォルト

false

grow

説明

The CSS flex-grow property.

タイプ

UIValue<FlexGrow>

invalid

説明

If true, the form control will be invalid.

タイプ

boolean

デフォルト

false

isDisabled

非推奨

説明

If true, the form control will be disabled.

非推奨

Use disabled instead.

タイプ

boolean

デフォルト

false

isInvalid

非推奨

説明

If true, the form control will be invalid.

非推奨

Use invalid instead.

タイプ

boolean

デフォルト

false

isNative

非推奨

説明

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

非推奨

It will be deprecated in version 2.0.

タイプ

boolean

デフォルト

false

isReadOnly

非推奨

説明

If true, the form control will be readonly.

非推奨

Use readOnly instead.

タイプ

boolean

デフォルト

false

isRequired

非推奨

説明

If true, the form control will be required.

非推奨

Use required instead.

タイプ

boolean

デフォルト

false

items

説明

If provided, generate radio cards based on items.

タイプ

RadioCardItem<Y>[]

デフォルト

'[]'

justify

説明

The CSS justify-content property.

タイプ

UIValue<JustifyContent>

labelProps

説明

Props for the label of the radio card.

タイプ

RadioCardLabelProps

name

説明

The HTML name attribute used for forms.

タイプ

string

onChange

説明

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

タイプ

(value: Y) => void

readOnly

説明

If true, the form control will be readonly.

タイプ

boolean

デフォルト

false

required

説明

If true, the form control will be required.

タイプ

boolean

デフォルト

false

shrink

説明

The CSS flex-shrink property.

タイプ

UIValue<FlexShrink>

value

説明

The value of the radio group.

タイプ

Y

withIcon

説明

If true, the icon will be displayed.

タイプ

boolean

デフォルト

true

wrap

説明

The CSS flex-wrap property.

タイプ

UIValue<FlexWrap>

RadioCardLabelProps

contentProps

説明

The props for the label content.

タイプ

HTMLUIProps<"span">

iconProps

説明

The props for the icon.

タイプ

HTMLUIProps

withIcon

説明

If true, the icon will be displayed.

タイプ

boolean

デフォルト

true

RadioCardDescriptionProps

RadioCardAddonProps

GitHubでこのページを編集する

RadioCheckbox