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-describedby
string
colorScheme
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
any
defaultChecked
defaultChecked
If true
, the radio will be initially checked.
boolean
id
id
id assigned to input
string
inputProps
inputProps
Additional props to be forwarded to the input
element
InputHTMLAttributes<HTMLInputElement>
isChecked
isChecked
If true
, the radio will be checked.
You'll need to pass onChange
to update its value (since it is now controlled)
boolean
isDisabled
isDisabled
If true
, the radio will be disabled
boolean
isFocusable
isFocusable
If true
and isDisabled
is true, the radio will remain
focusable but not interactive.
boolean
isInvalid
isInvalid
If true
, the radio button will be invalid. This also sets `aria-invalid` to true
.
boolean
isReadOnly
isReadOnly
If true
, the radio will be read-only
boolean
isRequired
isRequired
If true
, the radio button will be required. This also sets `aria-required` to true
.
boolean
name
name
The name of the input field in a radio (Useful for form submission).
string
onChange
onChange
Function called when checked state of the input
changes
((event: ChangeEvent<HTMLInputElement>) => void)
size
size
"md" | "lg" | "sm"
"md"
spacing
spacing
The spacing between the checkbox and its label text
SystemProps["marginLeft"]
0.5rem
value
value
The value to be used in the radio button. This is the value that will be returned on form submission.
string | number
variant
variant
Variants for Radio
are not implemented in the default theme. You can extend the theme to implement them.
string