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-describedbystringcolorScheme
colorScheme"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram""blue"data-radiogroup
data-radiogroup@internal
anydefaultChecked
defaultCheckedIf true, the radio will be initially checked.
booleanid
idid assigned to input
stringinputProps
inputPropsAdditional props to be forwarded to the input element
InputHTMLAttributes<HTMLInputElement>isChecked
isCheckedIf true, the radio will be checked.
You'll need to pass onChange to update its value (since it is now controlled)
booleanisDisabled
isDisabledIf true, the radio will be disabled
booleanisFocusable
isFocusableIf true and isDisabled is true, the radio will remain
focusable but not interactive.
booleanisInvalid
isInvalidIf true, the radio button will be invalid. This also sets `aria-invalid` to true.
booleanisReadOnly
isReadOnlyIf true, the radio will be read-only
booleanisRequired
isRequiredIf true, the radio button will be required. This also sets `aria-required` to true.
booleanname
nameThe name of the input field in a radio (Useful for form submission).
stringonChange
onChangeFunction called when checked state of the input changes
((event: ChangeEvent<HTMLInputElement>) => void)size
size"md" | "lg" | "sm""md"spacing
spacingThe spacing between the checkbox and its label text
SystemProps["marginLeft"]0.5remvalue
valueThe value to be used in the radio button. This is the value that will be returned on form submission.
string | numbervariant
variantVariants for Radio are not implemented in the default theme. You can extend the theme to implement them.
string