Radio

A radio component for selecting a single option from a set, with support for groups.

?

Name	Category	Description	Type	Default
type	? Style	Preset theme color type	'primary' | 'success' | 'warning' | 'danger' | 'info'	—
type	? Style	Preset theme color for all child radios	'primary' | 'success' | 'warning' | 'danger' | 'info'	—
size	? Size	Size	'large' | 'small'	—
size	? Size	Size for all child radios	'large' | 'small'	—
color	? Color	Custom hex color	string	—
color	? Color	Custom hex color for all child radios	string	—
disabled	? State	Whether disabled	boolean	false
disabled	? State	Whether to disable all child radios	boolean	false
name	? Behavior	Native name attribute	string	—
id	? Behavior	Native id attribute	string	—
name	? Behavior	Name attribute for all child radios	string	—
model-value / v-model	? Content	Binding value	string | number | boolean	—
value	? Content	Identifier value. Radio is checked when modelValue equals value	string | number | boolean	—
label	? Content	Label text	string	—
model-value / v-model	? Content	Binding value	string | number | boolean	—
change	? Event	Triggered when selected value changes	(value: RadioValueType) => void	—
change	? Event	Triggered when selected value changes	(value: RadioValueType) => void	—
default	? Slot	Custom label content		—
default	? Slot	Child radio content		—
focus	? Expose	Focus the radio	() => void	—
checked	? Expose	Whether checked	ComputedRef<boolean>	—

Basic Usage

Bind v-model to a variable and set the value prop. The radio is checked when modelValue === value.

<template>
  <div class="demo-radio">
    <px-radio v-model="selected" value="a" label="Option A" />
    <px-radio v-model="selected" value="b" label="Option B" />
    <p class="demo-radio__result">Selected: {{ selected }}</p>
  </div>
</template>

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

const selected = ref('a');
</script>

<style scoped>
.demo-radio {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}
.demo-radio__result {
  font-family: var(--px-font-family);
  font-size: 14px;
  color: var(--px-text-color-secondary);
}
</style>

Disabled State

Use disabled property to disable the radio.

<template>
  <div class="demo-radio">
    <px-radio v-model="selected" value="a" label="Disabled selected" disabled />
    <px-radio v-model="selected" value="b" label="Disabled unselected" disabled />
  </div>
</template>

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

const selected = ref('a');
</script>

<style scoped>
.demo-radio {
  display: flex;
  align-items: center;
  gap: 20px;
}
</style>

Type

Use type property to apply preset theme colors.

<template>
  <div class="demo-radio">
    <px-radio v-model="v1" value="a" label="Primary" type="primary" />
    <px-radio v-model="v2" value="a" label="Success" type="success" />
    <px-radio v-model="v3" value="a" label="Warning" type="warning" />
    <px-radio v-model="v4" value="a" label="Danger" type="danger" />
    <px-radio v-model="v5" value="a" label="Info" type="info" />
  </div>
</template>

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

const v1 = ref('a');
const v2 = ref('a');
const v3 = ref('a');
const v4 = ref('a');
const v5 = ref('a');
</script>

<style scoped>
.demo-radio {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}
</style>

Custom Color

Use color property to set a custom hex color for the checked state.

<template>
  <div class="demo-radio">
    <px-radio v-model="v1" value="a" label="Coral" color="#ff6b6b" />
    <px-radio v-model="v2" value="a" label="Teal" color="#20c997" />
    <px-radio v-model="v3" value="a" label="Purple" color="#845ef7" />
  </div>
</template>

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

const v1 = ref('a');
const v2 = ref('a');
const v3 = ref('a');
</script>

<style scoped>
.demo-radio {
  display: flex;
  align-items: center;
  gap: 20px;
}
</style>

Different Sizes

Use size property to set the radio size.

<template>
  <div class="demo-radio">
    <px-radio v-model="v1" value="a" label="Small" size="small" />
    <px-radio v-model="v2" value="a" label="Default" />
    <px-radio v-model="v3" value="a" label="Large" size="large" />
  </div>
</template>

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

const v1 = ref('a');
const v2 = ref('a');
const v3 = ref('a');
</script>

<style scoped>
.demo-radio {
  display: flex;
  align-items: center;
  gap: 20px;
}
</style>

Radio Group

Use PxRadioGroup to manage multiple radios with a single v-model. Only one radio can be selected at a time.

<template>
  <div class="demo-radio">
    <px-radio-group v-model="selected">
      <px-radio value="apple" label="Apple" />
      <px-radio value="banana" label="Banana" />
      <px-radio value="cherry" label="Cherry" />
      <px-radio value="durian" label="Durian" />
    </px-radio-group>
    <p class="demo-radio__result">Selected: {{ selected }}</p>
  </div>
</template>

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

const selected = ref('apple');
</script>

<style scoped>
.demo-radio {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.demo-radio__result {
  font-family: var(--px-font-family);
  font-size: 14px;
  color: var(--px-text-color-secondary);
}
</style>