Radio

Radios are used when only one choice may be selected in a series of options.

    SourceTheme source@chakra-ui/radio

Props#

aria-describedby

Description

Refers to the id of the element that labels the radio element.

Type
string

colorScheme

Description

The visual color appearance of the component

Type
"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"
Default
blue

data-radiogroup

Type
any

defaultChecked

Description

If true, the radio will be initially checked.

Type
boolean
Default
false

id

Description

id assigned to input

Type
string

inputProps

Description

Additional props to be forwarded to the input element

Type
InputHTMLAttributes<HTMLInputElement>

isChecked

Description

If true, the radio will be checked. You'll need to pass onChange to update its value (since it is now controlled)

Type
boolean
Default
false

isDisabled

Description

If true, the radio will be disabled

Type
boolean
Default
false

isFocusable

Description

If true and isDisabled is true, the radio will remain focusable but not interactive.

Type
boolean
Default
false

isInvalid

Description

If true, the radio button will be invalid. This also sets `aria-invalid` to true.

Type
boolean
Default
false

isReadOnly

Description

If true, the radio will be read-only

Type
boolean
Default
false

isRequired

Description

If true, the radio button will be required. This also sets `aria-required` to true.

Type
boolean
Default
false

name

Description

The name of the input field in a radio (Useful for form submission).

Type
string

onChange

Description

Function called when checked state of the input changes

Type
(event: ChangeEvent<HTMLInputElement>) => void

size

Description

The size of the Radio

Type
"md" | "lg" | "sm"
Default
md

spacing

Description

The spacing between the checkbox and its label text

Type
ResponsiveValue<string | number | (string & {})>
Default
0.5rem

value

Description

The value to be used in the radio button. This is the value that will be returned on form submission.

Type
string

variant

Description

The variant of the Radio

Type
string
Edit this page on GitHub

Proudly made inNigeria by Segun Adebayo

Deployed by Vercel