Refers to the id of the element that labels the radio element.
Radio
Radios are used when only one choice may be selected in a series of options.
Props#
aria-describedby
aria-describedbyDescription
Type
stringcolorScheme
colorSchemeType
"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"Default
"blue"data-radiogroup
data-radiogroupDescription
@internal
Type
anydefaultChecked
defaultCheckedDescription
If true, the radio will be initially checked.
Type
booleanid
idDescription
id assigned to input
Type
stringinputProps
inputPropsDescription
Additional props to be forwarded to the input element
Type
InputHTMLAttributes<HTMLInputElement>isChecked
isCheckedDescription
If true, the radio will be checked.
You'll need to pass onChange to update its value (since it is now controlled)
Type
booleanisDisabled
isDisabledDescription
If true, the radio will be disabled
Type
booleanisFocusable
isFocusableDescription
If true and isDisabled is true, the radio will remain
focusable but not interactive.
Type
booleanisInvalid
isInvalidDescription
If true, the radio button will be invalid. This also sets `aria-invalid` to true.
Type
booleanisReadOnly
isReadOnlyDescription
If true, the radio will be read-only
Type
booleanisRequired
isRequiredDescription
If true, the radio button will be required. This also sets `aria-required` to true.
Type
booleanname
nameDescription
The name of the input field in a radio (Useful for form submission).
Type
stringonChange
onChangeDescription
Function called when checked state of the input changes
Type
((event: ChangeEvent<HTMLInputElement>) => void)size
sizeType
"md" | "lg" | "sm"Default
"md"spacing
spacingDescription
The spacing between the checkbox and its label text
Type
SystemProps["marginLeft"]Default
0.5remvalue
valueDescription
The value to be used in the radio button. This is the value that will be returned on form submission.
Type
string | numbervariant
variantDescription
Variants for Radio are not implemented in the default theme. You can extend the theme to implement them.
Type
stringProps#
aria-describedby
aria-describedbyDescription
Refers to the id of the element that labels the radio element.
Type
stringcolorScheme
colorSchemeType
"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"Default
"blue"data-radiogroup
data-radiogroupDescription
@internal
Type
anydefaultChecked
defaultCheckedDescription
If true, the radio will be initially checked.
Type
booleanid
idDescription
id assigned to input
Type
stringinputProps
inputPropsDescription
Additional props to be forwarded to the input element
Type
InputHTMLAttributes<HTMLInputElement>isChecked
isCheckedDescription
If true, the radio will be checked.
You'll need to pass onChange to update its value (since it is now controlled)
Type
booleanisDisabled
isDisabledDescription
If true, the radio will be disabled
Type
booleanisFocusable
isFocusableDescription
If true and isDisabled is true, the radio will remain
focusable but not interactive.
Type
booleanisInvalid
isInvalidDescription
If true, the radio button will be invalid. This also sets `aria-invalid` to true.
Type
booleanisReadOnly
isReadOnlyDescription
If true, the radio will be read-only
Type
booleanisRequired
isRequiredDescription
If true, the radio button will be required. This also sets `aria-required` to true.
Type
booleanname
nameDescription
The name of the input field in a radio (Useful for form submission).
Type
stringonChange
onChangeDescription
Function called when checked state of the input changes
Type
((event: ChangeEvent<HTMLInputElement>) => void)size
sizeType
"md" | "lg" | "sm"Default
"md"spacing
spacingDescription
The spacing between the checkbox and its label text
Type
SystemProps["marginLeft"]Default
0.5remvalue
valueDescription
The value to be used in the radio button. This is the value that will be returned on form submission.
Type
string | numbervariant
variantDescription
Variants for Radio are not implemented in the default theme. You can extend the theme to implement them.
Type
string