Leave Yamada UI a star
StarRadio is a component used for allowing users to select one option from multiple choices.
Description
The visual color appearance of the component.
Type
"whiteAlpha" | "blackAlpha" | "gray" | "neutral" | "red" | "danger" | "rose" | "pink" | "flashy" | "orange" | "warning" | "amber" | "yellow" | "lime" | "green" | "success" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "primary" | "info" | "link" | "indigo" | "violet" | "secondary" | "purple" | "fuchsia"Default
primaryDescription
If true, the radio will be initially checked.
Type
booleanDefault
falseType
HTMLUIProps<"span">Description
id assigned to input.
Type
stringType
InputHTMLAttributes<HTMLInputElement>Description
If true, the radio will be checked.
Type
booleanDefault
falseDescription
If true, the form control will be disabled.
Type
booleanDefault
falseDescription
If true, the form control will be invalid.
Type
booleanDefault
falseDescription
If true, the form control will be readonly.
Type
booleanDefault
falseDescription
If true, the form control will be required.
Type
booleanDefault
falseType
HTMLUIProps<"span">Description
The name of the input field in a radio.
Type
stringDescription
The callback invoked when the checked state changes.
Type
ChangeEventHandler<HTMLInputElement>Description
The size of the Radio.
Type
"sm" | "md" | "lg"Default
mdDescription
The value to be used in the radio button.
Type
YDescription
The variant of the Radio.
Type
stringDescription
If true, the radio will be initially checked.
Type
booleanDefault
falseDescription
id assigned to input.
Type
stringDescription
If true, the radio will be checked.
Type
booleanDefault
falseDescription
If true, the form control will be disabled.
Type
booleanDefault
falseDescription
If true, the form control will be invalid.
Type
booleanDefault
falseDescription
If true, the form control will be readonly.
Type
booleanDefault
falseDescription
If true, the form control will be required.
Type
booleanDefault
falseDescription
The name of the input field in a radio.
Type
stringDescription
The callback invoked when the checked state changes.
Type
ChangeEventHandler<HTMLInputElement>Description
The value to be used in the radio button.
Type
YDescription
The CSS align-items property.
Type
(string & {}) | "center" | "inherit" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "stretch" | "end" | "flex-end" | "flex-start" | "start" | "normal" | "self-end" | ... 6 more ... | ((theme: StyledTheme) => UIValue<...>)Description
The CSS flex-basis property.
Type
number | (string & {}) | "content" | "px" | "inherit" | "sm" | "md" | "lg" | "xl" | "2xl" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "2" | "3" | "-moz-fit-content" | ... 71 more ... | ((theme: StyledTheme) => UIValue<...>)Description
The CSS flex-direction property.
Type
"row" | "inherit" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "column" | "column-reverse" | "row-reverse" | Partial<Record<(string & {}) | "base" | "sm" | "md" | "lg" | "xl" | "2xl", FlexDirection>> | ColorModeArray<...> | Partial<...> | ColorModeArray<...> | ((theme: StyledTheme) => UIValue...Description
The CSS flex-grow property.
Type
(string & {}) | "inherit" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | (number & {}) | Partial<Record<(string & {}) | "base" | "sm" | "md" | "lg" | "xl" | "2xl", FlexGrow>> | ColorModeArray<...> | Partial<...> | ColorModeArray<...> | ((theme: StyledTheme) => UIValue<...>)Description
If true, the form control will be disabled.
Type
booleanDefault
falseDescription
If true, the form control will be invalid.
Type
booleanDefault
falseDescription
If true, input elements will receive checked attribute instead of isChecked.
This assumes, you're using native radio inputs.
Type
booleanDefault
falseDescription
If true, the form control will be readonly.
Type
booleanDefault
falseDescription
If true, the form control will be required.
Type
booleanDefault
falseDescription
If provided, generate radios based on items.
Type
RadioItem<Y>[]Default
'[]'Description
The CSS justify-content property.
Type
(string & {}) | "left" | "right" | "center" | "inherit" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "space-around" | "space-between" | "space-evenly" | ... 10 more ... | ((theme: StyledTheme) => UIValue<...>)Description
The HTML name attribute used for forms.
Type
stringDescription
The callback fired when any children radio is checked or unchecked.
Type
(value: Y) => voidDescription
The CSS flex-shrink property.
Type
(string & {}) | "inherit" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | (number & {}) | Partial<Record<(string & {}) | "base" | "sm" | "md" | "lg" | "xl" | "2xl", FlexShrink>> | ColorModeArray<...> | Partial<...> | ColorModeArray<...> | ((theme: StyledTheme) => UIValue<...>)Description
The value of the radio group.
Type
YDescription
The CSS flex-wrap property.
Type
"inherit" | "wrap" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "nowrap" | "wrap-reverse" | Partial<Record<(string & {}) | "base" | "sm" | "md" | "lg" | "xl" | "2xl", FlexWrap>> | ColorModeArray<...> | Partial<...> | ColorModeArray<...> | ((theme: StyledTheme) => UIValue<...>)Description
The initial value of the radio group.
Type
YDescription
The top-level id string that will be applied to the radios. The index of the radio will be appended to this top-level id.
Type
stringDescription
If true, input elements will receive checked attribute instead of isChecked.
This assumes, you're using native radio inputs.
Type
booleanDefault
falseDescription
The HTML name attribute used for forms.
Type
stringDescription
The callback fired when any children radio is checked or unchecked.
Type
(value: Y) => voidDescription
The value of the radio group.
Type
YEdit this page on GitHub