🌏 Translated with the assistance of DeepSeek and ChatGPT

Radio

This component is called Radio...

Basic Usage

Radio has two style variants: normal mode ('normal', default) and retro mode (retro). The retro mode style is a tribute to early game UI.

Radio enters controlled mode when modelValue is passed. When not passed or undefined, it's in uncontrolled mode, where you can pass the defaultValue property as the default value.

Basic Checkbox

Uncontrolled

Set Label By Prop

Retro Style

Retro Style Checked

Hide source code

Disabled, Read-only State

For Radio, readonly sets the read-only state and disabled sets the disabled state. In both cases, the internal <input> will be set to disabled, with almost only style differences between them.

Checked

Unchecked

Checked Readonly

Unchecked Readonly

Checked

Unchecked

Checked Readonly

Unchecked Readonly

Hide source code

Radio Group

You can combine RadioGroup and Radio to form a radio group.

RadioGroup's value is the value of the selected Radio component.

Similarly, RadioGroup enters controlled mode when modelValue is passed. When not passed or undefined, it's in uncontrolled mode, where you can pass the defaultValue property as the default value.

Egg Festival

Desert Festival

Flower Dance

Luau

Trout Derby

Dance of the Moonlight Jellies

Retro Style

Night Market

Feast of the Winter Star

Readonly

Stardew Valley Fai

Spirit's Eve

Disabled

Festival of Ice

SquidFest

Hide source code

Vertical Arrangement

RadioGroup's direction property is used to set the arrangement direction of child radio buttons.

Horizontal

Vertical

Chicken

Void Chicken

Golden Chicken

Dinosaur

Ostrich

Slime

Hide source code

Radio Sizes

Both Radio and RadioGroup have a size property that can be used to set the size of radio buttons.

Single Radio

Small

Medium

Large

Small & Retro

Medium & Retro

Large & Retro

Group

Yes

or

No

Yes

or

No

Yes

or

No

Hide source code

Options Property

RadioGroup's options property is used to directly pass in options, which can be used for quick creation of simple radio groups.

Cauliflower

Parsnip

Potato

Mixed Seeds

Corn

Pepper

Radish

Wheat

Mixed Seeds

Hide source code

API

RadioProps

Attribute	Type	Optional	Default	Description	Version
modelValue	boolean | null	True		The value of the Radio component (controlled mode).	0.0.3
defaultValue	boolean | null	True		The default value of the Radio component (uncontrolled mode).	0.0.3
variant	'normal' | 'retro'	True	'normal'	The style variant of the radio button.	0.0.3
disabled	boolean	True	false	Disabled state.	0.0.3
readonly	boolean	True	false	Read-only state.	0.0.3
label	string	True		The text of the radio button.	0.0.3
value	any	True		The native value attribute of the radio button.	0.0.3
size	'medium' | 'large' | 'small'	True	'medium'	Size of the radio button.	0.0.3
pollSizeChange	boolean	True	false	Enables polling for component size changes. This may impact performance.	0.1.0

RadioEvents

Event	Parameter	Description	Version
update:modelValue	value: boolean	Callback for updating modelValue.	0.0.3
input	value: boolean, event: InputEvent	Callback when the radio button is selected.	0.0.3
change	value: boolean, event: Event	Callback when the radio button's selection state changes.	0.0.3
focus	event: FocusEvent	Callback when the radio button receives focus.	0.0.3
blur	event: FocusEvent	Callback when the radio button loses focus.	0.0.3

RadioGroupProps

Attribute	Type	Optional	Default	Description	Version
modelValue	any	True		The value of the RadioGroup component (controlled mode).	0.0.3
defaultValue	any	True		The default value of the RadioGroup component (uncontrolled mode).	0.0.3
variant	'normal' | 'retro'	True		The style variant for descendant Radio components, which takes precedence over the variant of individual Radio components if set.	0.0.3
disabled	boolean	True	false	Disabled state.	0.0.3
readonly	boolean	True	false	Read-only state.	0.0.3
direction	'horizontal' | 'vertical'	True	'horizontal'	The arrangement direction of child radio buttons.	0.0.3
options	(RadioGroupOption | string)[]	True		Options for the radio group.	0.0.3
size	'medium' | 'large' | 'small'	True		Size for descendant Radio components. When set, it overrides the size prop on those components.	0.0.3
pollSizeChange	boolean	True	false	Enables polling for component size changes. This also affects the property of the same name in Radio sub-components.	0.1.0

RadioGroupSlots

Slot	Parameter	Description	Version
default		Child radio button components.	0.0.3

RadioGroupEvents

Event	Parameter	Description	Version
update:modelValue	value: any	Callback for updating modelValue.	0.0.3
change	value: any	Callback when the selection in the radio group changes.	0.0.3

Option

export interface Option<T = any> {
	value: T
	label: string
}

RadioGroupOption

export interface RadioGroupOption<T = any> extends Option<T> {
	disabled?: boolean
	key?: string | number | symbol
}