Leave Yamada UI a star

Star
Yamada UIYamada UIv1.6.4

Radio

Radio is a component used for allowing users to select one option from multiple choices.

Source@yamada-ui/radio

Props

RadioProps

colorScheme

Description

The visual color appearance of the component.

Type

"blackAlpha" | "whiteAlpha" | "amber" | "blue" | "info" | "link" | "primary" | "cyan" | "emerald" | "flashy" | "fuchsia" | "gray" | "green" | "success" | "indigo" | "lime" | "neutral" | "orange" | "warning" | "pink" | "purple" | "red" | "danger" | "rose" | "sky" | "teal" | "violet" | "secondary" | "yellow"

Default

"primary"

defaultIsChecked

Description

If true, the radio will be initially checked.

Type

boolean

Default

false

iconProps

Type

HTMLUIProps<"span">

id

Description

id assigned to input.

Type

string

inputProps

Type

InputHTMLAttributes<HTMLInputElement>

isChecked

Description

If true, the radio will be checked.

Type

boolean

Default

false

isDisabled

Description

If true, the form control will be disabled.

Type

boolean

Default

false

isInvalid

Description

If true, the form control will be invalid.

Type

boolean

Default

false

isReadOnly

Description

If true, the form control will be readonly.

Type

boolean

Default

false

isRequired

Description

If true, the form control will be required.

Type

boolean

Default

false

labelProps

Type

HTMLUIProps<"span">

name

Description

The name of the input field in a radio.

Type

string

onChange

Description

The callback invoked when the checked state changes.

Type

ChangeEventHandler<HTMLInputElement>

size

Description

The size of the Radio.

Type

"sm" | "md" | "lg"

Default

"md"

value

Description

The value to be used in the radio button.

Type

Y

variant

Description

The variant of the Radio.

Type

string

UseRadioProps

defaultIsChecked

Description

If true, the radio will be initially checked.

Type

boolean

Default

false

id

Description

id assigned to input.

Type

string

isChecked

Description

If true, the radio will be checked.

Type

boolean

Default

false

isDisabled

Description

If true, the form control will be disabled.

Type

boolean

Default

false

isInvalid

Description

If true, the form control will be invalid.

Type

boolean

Default

false

isReadOnly

Description

If true, the form control will be readonly.

Type

boolean

Default

false

isRequired

Description

If true, the form control will be required.

Type

boolean

Default

false

name

Description

The name of the input field in a radio.

Type

string

onChange

Description

The callback invoked when the checked state changes.

Type

ChangeEventHandler<HTMLInputElement>

value

Description

The value to be used in the radio button.

Type

Y

RadioGroupProps

align

Description

The CSS align-items property.

Type

UIValue<AlignItems>

basis

Description

The CSS flex-basis property.

Type

UIValue<number | "content" | "px" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "2xl" | "lg" | "md" | "sm" | "xl" | ({} & string) | (string & {}) | "-moz-fit-content" | ... 69 more ... | "xs">

defaultValue

Description

The initial value of the radio group.

Type

Y

direction

Description

The CSS flex-direction property.

Type

UIValue<FlexDirection>

grow

Description

The CSS flex-grow property.

Type

UIValue<FlexGrow>

isDisabled

Description

If true, the form control will be disabled.

Type

boolean

Default

false

isInvalid

Description

If true, the form control will be invalid.

Type

boolean

Default

false

isNative

Description

If true, input elements will receive checked attribute instead of isChecked. This assumes, you're using native radio inputs.

Type

boolean

Default

false

isReadOnly

Description

If true, the form control will be readonly.

Type

boolean

Default

false

isRequired

Description

If true, the form control will be required.

Type

boolean

Default

false

items

Description

If provided, generate radios based on items.

Type

RadioItem<Y>[]

Default

'[]'

justify

Description

The CSS justify-content property.

Type

UIValue<JustifyContent>

name

Description

The HTML name attribute used for forms.

Type

string

onChange

Description

The callback fired when any children radio is checked or unchecked.

Type

(value: Y) => void

shrink

Description

The CSS flex-shrink property.

Type

UIValue<FlexShrink>

value

Description

The value of the radio group.

Type

Y

wrap

Description

The CSS flex-wrap property.

Type

UIValue<FlexWrap>

UseRadioGroupProps

defaultValue

Description

The initial value of the radio group.

Type

Y

id

Description

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

string

isNative

Description

If true, input elements will receive checked attribute instead of isChecked. This assumes, you're using native radio inputs.

Type

boolean

Default

false

name

Description

The HTML name attribute used for forms.

Type

string

onChange

Description

The callback fired when any children radio is checked or unchecked.

Type

(value: Y) => void

value

Description

The value of the radio group.

Type

Y

Edit this page on GitHub

PreviousTextareaNextRadioCard