Use the v-model directive to control the value of the RadioGroup or the default-value prop to set the initial value when you do not need to control its state.
Use the items prop as an array of strings or numbers:
<script setup lang="ts">
const items = ref(['System', 'Light', 'Dark'])
const value = ref('System')
</script>
<template>
<PRadioGroup v-model="value" :items="items" />
</template>
You can also pass an array of objects with the following properties:
label?: stringdescription?: stringvalue?: stringdisabled?: booleanclass?: anypohon?: { item?: ClassNameValue, container?: ClassNameValue, base?: ClassNameValue, 'indicator'?: ClassNameValue, wrapper?: ClassNameValue, label?: ClassNameValue, description?: ClassNameValue }<script setup lang="ts">
import type { RadioGroupItem } from 'pohon-ui'
const items = ref<RadioGroupItem[]>([
{
label: 'System',
description: 'This is the first option.',
value: 'system'
},
{
label: 'Light',
description: 'This is the second option.',
value: 'light'
},
{
label: 'Dark',
description: 'This is the third option.',
value: 'dark'
}
])
const value = ref('system')
</script>
<template>
<PRadioGroup v-model="value" :items="items" />
</template>
value property of the object in the v-model directive or the default-value prop.You can change the property that is used to set the value by using the value-key prop. Defaults to value.
<script setup lang="ts">
import type { RadioGroupItem } from 'pohon-ui'
const items = ref<RadioGroupItem[]>([
{
label: 'System',
description: 'This is the first option.',
id: 'system'
},
{
label: 'Light',
description: 'This is the second option.',
id: 'light'
},
{
label: 'Dark',
description: 'This is the third option.',
id: 'dark'
}
])
const value = ref('light')
</script>
<template>
<PRadioGroup v-model="value" value-key="id" :items="items" />
</template>
Use the legend prop to set the legend of the RadioGroup.
<script setup lang="ts">
const items = ref(['System', 'Light', 'Dark'])
</script>
<template>
<PRadioGroup legend="Theme" default-value="System" :items="items" />
</template>
Use the color prop to change the color of the RadioGroup.
<script setup lang="ts">
const items = ref(['System', 'Light', 'Dark'])
</script>
<template>
<PRadioGroup color="neutral" default-value="System" :items="items" />
</template>
Use the variant prop to change the variant of the RadioGroup.
<script setup lang="ts">
import type { RadioGroupItem } from 'pohon-ui'
const items = ref<RadioGroupItem[]>([
{
label: 'Pro',
value: 'pro',
description: 'Tailored for indie hackers, freelancers and solo founders.'
},
{
label: 'Startup',
value: 'startup',
description: 'Best suited for small teams, startups and agencies.'
},
{
label: 'Enterprise',
value: 'enterprise',
description: 'Ideal for larger teams and organizations.'
}
])
</script>
<template>
<PRadioGroup color="primary" variant="table" default-value="pro" :items="items" />
</template>
Use the size prop to change the size of the RadioGroup.
<script setup lang="ts">
const items = ref(['System', 'Light', 'Dark'])
</script>
<template>
<PRadioGroup size="xl" variant="list" default-value="System" :items="items" />
</template>
Use the orientation prop to change the orientation of the RadioGroup. Defaults to vertical.
<script setup lang="ts">
const items = ref(['System', 'Light', 'Dark'])
</script>
<template>
<PRadioGroup orientation="horizontal" variant="list" default-value="System" :items="items" />
</template>
Use the indicator prop to change the position or hide the indicator. Defaults to start.
<script setup lang="ts">
const items = ref(['System', 'Light', 'Dark'])
</script>
<template>
<PRadioGroup indicator="end" variant="card" default-value="System" :items="items" />
</template>
Use the disabled prop to disable the RadioGroup.
<script setup lang="ts">
const items = ref(['System', 'Light', 'Dark'])
</script>
<template>
<PRadioGroup disabled default-value="System" :items="items" />
</template>
| Prop | Default | Type |
|---|
| Slot | Type |
|---|
| Event | Type |
|---|
Below is the theme configuration skeleton for the PRadioGroup. Since the component is provided unstyled by default, you will need to fill in these values to apply your own custom look and feel. If you prefer to use our pre-built, opinionated styling, you can instead use our UnoCSS preset, this docs is using it as well.
export default defineAppConfig({
pohon: {
radioGroup: {
slots: {
root: '',
fieldset: '',
legend: '',
item: '',
container: '',
base: '',
indicator: '',
wrapper: '',
label: '',
description: ''
},
variants: {
color: {
primary: {
base: '',
indicator: ''
},
secondary: {
base: '',
indicator: ''
},
success: {
base: '',
indicator: ''
},
info: {
base: '',
indicator: ''
},
warning: {
base: '',
indicator: ''
},
error: {
base: '',
indicator: ''
},
neutral: {
base: '',
indicator: ''
}
},
variant: {
list: {
item: ''
},
card: {
item: ''
},
table: {
item: ''
}
},
orientation: {
horizontal: {
fieldset: ''
},
vertical: {
fieldset: ''
}
},
indicator: {
start: {
item: '',
wrapper: ''
},
end: {
item: '',
wrapper: ''
},
hidden: {
base: '',
wrapper: ''
}
},
size: {
xs: {
fieldset: '',
legend: '',
base: '',
item: '',
container: '',
indicator: ''
},
sm: {
fieldset: '',
legend: '',
base: '',
item: '',
container: '',
indicator: ''
},
md: {
fieldset: '',
legend: '',
base: '',
item: '',
container: '',
indicator: ''
},
lg: {
fieldset: '',
legend: '',
base: '',
item: '',
container: '',
indicator: ''
},
xl: {
fieldset: '',
legend: '',
base: '',
item: '',
container: '',
indicator: ''
}
},
disabled: {
true: {
item: '',
base: '',
label: '',
description: ''
}
},
required: {
true: {
legend: ''
}
}
},
compoundVariants: [],
defaultVariants: {
size: 'md',
color: 'primary',
variant: 'list',
orientation: 'vertical',
indicator: 'start'
}
}
}
};
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import pohon from 'pohon-ui/vite'
export default defineAppConfig({
pohon: {
radioGroup: {
slots: {
root: '',
fieldset: '',
legend: '',
item: '',
container: '',
base: '',
indicator: '',
wrapper: '',
label: '',
description: ''
},
variants: {
color: {
primary: {
base: '',
indicator: ''
},
secondary: {
base: '',
indicator: ''
},
success: {
base: '',
indicator: ''
},
info: {
base: '',
indicator: ''
},
warning: {
base: '',
indicator: ''
},
error: {
base: '',
indicator: ''
},
neutral: {
base: '',
indicator: ''
}
},
variant: {
list: {
item: ''
},
card: {
item: ''
},
table: {
item: ''
}
},
orientation: {
horizontal: {
fieldset: ''
},
vertical: {
fieldset: ''
}
},
indicator: {
start: {
item: '',
wrapper: ''
},
end: {
item: '',
wrapper: ''
},
hidden: {
base: '',
wrapper: ''
}
},
size: {
xs: {
fieldset: '',
legend: '',
base: '',
item: '',
container: '',
indicator: ''
},
sm: {
fieldset: '',
legend: '',
base: '',
item: '',
container: '',
indicator: ''
},
md: {
fieldset: '',
legend: '',
base: '',
item: '',
container: '',
indicator: ''
},
lg: {
fieldset: '',
legend: '',
base: '',
item: '',
container: '',
indicator: ''
},
xl: {
fieldset: '',
legend: '',
base: '',
item: '',
container: '',
indicator: ''
}
},
disabled: {
true: {
item: '',
base: '',
label: '',
description: ''
}
},
required: {
true: {
legend: ''
}
}
},
compoundVariants: [],
defaultVariants: {
size: 'md',
color: 'primary',
variant: 'list',
orientation: 'vertical',
indicator: 'start'
}
}
}
};
With Pohon UI, you can achieve similar component functionality with less code and effort, as it comes with built-in styles mechanism and behaviors that are optimized for common use cases. Since it's using unocss-variants it adds a runtime cost, but it can be worth it if you prioritize development speed and ease of use over fine-grained control.
If this is a deal breaker for you, you can always stick to using Akar and build your own custom components on top of it.