🌏 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

<template>
	<px-space>
		<px-radio v-model="checked">Basic Checkbox</px-radio>
		<px-radio :default-value="true">Uncontrolled</px-radio>
		<px-radio label="Set Label By Prop"></px-radio>
		<px-radio variant="retro">Retro Style</px-radio>
		<px-radio variant="retro" :default-value="true">Retro Style Checked</px-radio>
	</px-space>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const checked = ref(false)
</script>

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

<template>
	<px-space direction="vertical">
		<px-space>
			<px-radio disabled :default-value="true">Checked</px-radio>
			<px-radio disabled>Unchecked</px-radio>
			<px-radio readonly :default-value="true">Checked Readonly</px-radio>
			<px-radio readonly>Unchecked Readonly</px-radio>
		</px-space>
		<px-space>
			<px-radio variant="retro" disabled :default-value="true">Checked</px-radio>
			<px-radio variant="retro" disabled>Unchecked</px-radio>
			<px-radio variant="retro" readonly :default-value="true">Checked Readonly</px-radio>
			<px-radio variant="retro" readonly>Unchecked Readonly</px-radio>
		</px-space>
	</px-space>
</template>

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

<template>
	<px-space direction="vertical">
		<px-radio-group v-model="group">
			<px-radio value="Egg Festival">Egg Festival</px-radio>
			<px-radio value="Desert Festival">Desert Festival</px-radio>
			<px-radio value="Flower Dance">Flower Dance</px-radio>
		</px-radio-group>
		<px-radio-group default-value="Luau">
			<px-radio value="Luau">Luau</px-radio>
			<px-radio value="Trout Derby">Trout Derby</px-radio>
			<px-radio value="Dance of the Moonlight Jellies">Dance of the Moonlight Jellies</px-radio>
		</px-radio-group>
		<h4>Retro Style</h4>
		<px-radio-group default-value="Night Market" variant="retro">
			<px-radio value="Night Market">Night Market</px-radio>
			<px-radio value="Feast of the Winter Star">Feast of the Winter Star</px-radio>
		</px-radio-group>
		<h4>Readonly</h4>
		<px-radio-group default-value="Stardew Valley Fai" readonly>
			<px-radio value="Stardew Valley Fai">Stardew Valley Fai</px-radio>
			<px-radio value="Spirit's Eve">Spirit's Eve</px-radio>
		</px-radio-group>
		<h4>Disabled</h4>
		<px-radio-group default-value="Festival of Ice" disabled>
			<px-radio value="Festival of Ice">Festival of Ice</px-radio>
			<px-radio value="SquidFest">SquidFest</px-radio>
		</px-radio-group>
	</px-space>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const group = ref<string | null>(null)
</script>

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

<template>
	<px-switch v-model="vertical" active-label="Vertical" inactive-label="Horizontal"></px-switch>
	<br />
	<br />
	<px-radio-group :direction="vertical ? 'vertical' : 'horizontal'">
		<px-radio value="Chicken">Chicken</px-radio>
		<px-radio value="Void Chicken">Void Chicken</px-radio>
		<px-radio value="Golden Chicken">Golden Chicken</px-radio>
	</px-radio-group>
	<px-radio-group variant="retro" :direction="vertical ? 'vertical' : 'horizontal'">
		<px-radio value="Dinosaur">Dinosaur</px-radio>
		<px-radio value="Ostrich">Ostrich</px-radio>
		<px-radio value="Slime">Slime</px-radio>
	</px-radio-group>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const vertical = ref(false)
</script>

<style lang="css" scoped>
.px-radio-group {
	margin-top: 16px;
	margin-right: 16px;
}
</style>

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

<template>
	<px-space direction="vertical">
		<h4>Single Radio</h4>
		<px-space>
			<px-radio size="small">Small</px-radio>
			<px-radio>Medium</px-radio>
			<px-radio size="large">Large</px-radio>
		</px-space>
		<px-space>
			<px-radio variant="retro" size="small">Small & Retro</px-radio>
			<px-radio variant="retro">Medium & Retro</px-radio>
			<px-radio variant="retro" size="large">Large & Retro</px-radio>
		</px-space>
		<h4>Group</h4>
		<px-radio-group :options="options" size="small"></px-radio-group>
		<px-radio-group :options="options"></px-radio-group>
		<px-radio-group :options="options" size="large"></px-radio-group>
	</px-space>
</template>

<script setup lang="ts">
const options = ['Yes', 'or', 'No']
</script>

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

<template>
	<px-space direction="vertical">
		<px-radio-group :options="options"></px-radio-group>
		<px-radio-group :options="optionsRetro" variant="retro"></px-radio-group>
	</px-space>
</template>

<script setup lang="ts">
const options = [
	'Cauliflower',
	'Parsnip',
	'Potato',
	{
		value: 'Mixed Seeds',
		label: 'Mixed Seeds',
		disabled: true
	}
]
const optionsRetro = [
	'Corn',
	'Pepper',
	'Radish',
	'Wheat',
	{
		value: 'Mixed Seeds',
		label: 'Mixed Seeds',
		disabled: true
	}
]
</script>

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

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

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

RadioGroupOption

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

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