Movatterモバイル変換

[0]ホーム
URL:

Nuxt UI v3 is officially released.
Discover Nuxt UI Pro
A set of radio buttons to select a single option from a list.

Usage

Use thev-model directive to control the value of the RadioGroup or thedefault-value prop to set the initial value when you do not need to control its state.

Items

Use theitems prop as an array of strings, numbers or booleans:

<script setup lang="ts">import type { RadioGroupItem, RadioGroupValue } from '@nuxt/ui'const items= ref<RadioGroupItem[]>(['System', 'Light', 'Dark'])const value= ref<RadioGroupValue>('System')</script><template>  <URadioGroup v-model="value" :items="items" /></template>

You can also pass an array of objects with the following properties:

This is the first option.

This is the second option.

This is the third option.

<script setup lang="ts">import type { RadioGroupItem, RadioGroupValue } from '@nuxt/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<RadioGroupValue>('system')</script><template>  <URadioGroup v-model="value" :items="items" /></template>
When using objects, you need to reference thevalue property of the object in thev-model directive or thedefault-value prop.

Value Key

You can change the property that is used to set the value by using thevalue-key prop. Defaults tovalue.

This is the first option.

This is the second option.

This is the third option.

<script setup lang="ts">import type { RadioGroupItem, RadioGroupValue } from '@nuxt/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<RadioGroupValue>('light')</script><template>  <URadioGroup v-model="value" value-key="id" :items="items" /></template>

Legend

Use thelegend prop to set the legend of the RadioGroup.

Theme
<script setup lang="ts">import type { RadioGroupItem } from '@nuxt/ui'const items= ref<RadioGroupItem[]>(['System', 'Light', 'Dark'])</script><template>  <URadioGroup legend="Theme" default-value="System" :items="items" /></template>

Orientation

Use theorientation prop to change the orientation of the RadioGroup. Defaults tovertical.

<script setup lang="ts">import type { RadioGroupItem } from '@nuxt/ui'const items= ref<RadioGroupItem[]>(['System', 'Light', 'Dark'])</script><template>  <URadioGroup orientation="horizontal" default-value="System" :items="items" /></template>

Color

Use thecolor prop to change the color of the RadioGroup.

<script setup lang="ts">import type { RadioGroupItem } from '@nuxt/ui'const items= ref<RadioGroupItem[]>(['System', 'Light', 'Dark'])</script><template>  <URadioGroup color="neutral" default-value="System" :items="items" /></template>

Size

Use thesize prop to change the size of the RadioGroup.

<script setup lang="ts">import type { RadioGroupItem } from '@nuxt/ui'const items= ref<RadioGroupItem[]>(['System', 'Light', 'Dark'])</script><template>  <URadioGroup size="xl" default-value="System" :items="items" /></template>

Disabled

Use thedisabled prop to disable the RadioGroup.

<script setup lang="ts">import type { RadioGroupItem } from '@nuxt/ui'const items= ref<RadioGroupItem[]>(['System', 'Light', 'Dark'])</script><template>  <URadioGroup disabled default-value="System" :items="items" /></template>

API

Props

Prop Default Type
as

'div'

any

The element or component this component should render as.

legend

string

valueKey

'value'

string

Whenitems is an array of objects, select the field to use as the value.

labelKey

'label'

string

Whenitems is an array of objects, select the field to use as the label.

descriptionKey

'description'

string

Whenitems is an array of objects, select the field to use as the description.

items

RadioGroupItem[]

size

'md'

"md" | "xs" | "sm" | "lg" | "xl"

color

'primary'

"error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral"

orientation

'vertical'

"vertical" | "horizontal"

The orientation the radio buttons are laid out.

defaultValue

null | string | number | Record<string, any>

The value of the radio item that should be checked when initially rendered.

Use when you do not need to control the state of the radio items.

modelValue

null | string | number | Record<string, any>

The controlled value of the radio item to check. Can be binded asv-model.

disabled

boolean

Whentrue, prevents the user from interacting with radio items.

required

boolean

Whentrue, indicates that the user must set the value before the owning form can be submitted.

name

string

The name of the field. Submitted with its owning form as part of a name/value pair.

loop

boolean

Whentrue, keyboard navigation will loop from last item to first, and vice versa.

ui

Partial<{ root: string; fieldset: string; legend: string; item: string; base: string; indicator: string; container: string; wrapper: string; label: string; description: string; }>

Slots

Slot Type
legend

{}

label

{ item: RadioGroupItem & { id: string; }; modelValue?: AcceptableValue | undefined; }

description

{ item: RadioGroupItem & { id: string; }; modelValue?: AcceptableValue | undefined; }

Emits

Event Type
change

[payload: Event]

update:modelValue

[payload: string]

Theme

app.config.ts
export default defineAppConfig({  ui: {    radioGroup: {      slots: {        root: 'relative',        fieldset: 'flex',        legend: 'mb-1 block font-medium text-(--ui-text)',        item: 'flex items-start',        base: 'rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2',        indicator: 'flex items-center justify-center size-full rounded-full after:bg-(--ui-bg) after:rounded-full',        container: 'flex items-center',        wrapper: 'ms-2',        label: 'block font-medium text-(--ui-text)',        description: 'text-(--ui-text-muted)'      },      variants: {        color: {          primary: {            base: 'focus-visible:outline-(--ui-primary)',            indicator: 'bg-(--ui-primary)'          },          secondary: {            base: 'focus-visible:outline-(--ui-secondary)',            indicator: 'bg-(--ui-secondary)'          },          success: {            base: 'focus-visible:outline-(--ui-success)',            indicator: 'bg-(--ui-success)'          },          info: {            base: 'focus-visible:outline-(--ui-info)',            indicator: 'bg-(--ui-info)'          },          warning: {            base: 'focus-visible:outline-(--ui-warning)',            indicator: 'bg-(--ui-warning)'          },          error: {            base: 'focus-visible:outline-(--ui-error)',            indicator: 'bg-(--ui-error)'          },          neutral: {            base: 'focus-visible:outline-(--ui-border-inverted)',            indicator: 'bg-(--ui-bg-inverted)'          }        },        orientation: {          horizontal: {            fieldset: 'flex-row',            wrapper: 'me-2'          },          vertical: {            fieldset: 'flex-col'          }        },        size: {          xs: {            fieldset: 'gap-0.5',            legend: 'text-xs',            base: 'size-3',            item: 'text-xs',            container: 'h-4',            indicator: 'after:size-1'          },          sm: {            fieldset: 'gap-0.5',            legend: 'text-xs',            base: 'size-3.5',            item: 'text-xs',            container: 'h-4',            indicator: 'after:size-1'          },          md: {            fieldset: 'gap-1',            legend: 'text-sm',            base: 'size-4',            item: 'text-sm',            container: 'h-5',            indicator: 'after:size-1.5'          },          lg: {            fieldset: 'gap-1',            legend: 'text-sm',            base: 'size-4.5',            item: 'text-sm',            container: 'h-5',            indicator: 'after:size-1.5'          },          xl: {            fieldset: 'gap-1.5',            legend: 'text-base',            base: 'size-5',            item: 'text-base',            container: 'h-6',            indicator: 'after:size-2'          }        },        disabled: {          true: {            base: 'cursor-not-allowed opacity-75',            label: 'cursor-not-allowed opacity-75'          }        },        required: {          true: {            legend: "after:content-['*'] after:ms-0.5 after:text-(--ui-error)"          }        }      },      defaultVariants: {        size: 'md',        color: 'primary'      }    }  }})
vite.config.ts
import { defineConfig } from 'vite'import vuefrom '@vitejs/plugin-vue'import uifrom '@nuxt/ui/vite'export default defineConfig({  plugins: [    vue(),    ui({      ui: {        radioGroup: {          slots: {            root: 'relative',            fieldset: 'flex',            legend: 'mb-1 block font-medium text-(--ui-text)',            item: 'flex items-start',            base: 'rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2',            indicator: 'flex items-center justify-center size-full rounded-full after:bg-(--ui-bg) after:rounded-full',            container: 'flex items-center',            wrapper: 'ms-2',            label: 'block font-medium text-(--ui-text)',            description: 'text-(--ui-text-muted)'          },          variants: {            color: {              primary: {                base: 'focus-visible:outline-(--ui-primary)',                indicator: 'bg-(--ui-primary)'              },              secondary: {                base: 'focus-visible:outline-(--ui-secondary)',                indicator: 'bg-(--ui-secondary)'              },              success: {                base: 'focus-visible:outline-(--ui-success)',                indicator: 'bg-(--ui-success)'              },              info: {                base: 'focus-visible:outline-(--ui-info)',                indicator: 'bg-(--ui-info)'              },              warning: {                base: 'focus-visible:outline-(--ui-warning)',                indicator: 'bg-(--ui-warning)'              },              error: {                base: 'focus-visible:outline-(--ui-error)',                indicator: 'bg-(--ui-error)'              },              neutral: {                base: 'focus-visible:outline-(--ui-border-inverted)',                indicator: 'bg-(--ui-bg-inverted)'              }            },            orientation: {              horizontal: {                fieldset: 'flex-row',                wrapper: 'me-2'              },              vertical: {                fieldset: 'flex-col'              }            },            size: {              xs: {                fieldset: 'gap-0.5',                legend: 'text-xs',                base: 'size-3',                item: 'text-xs',                container: 'h-4',                indicator: 'after:size-1'              },              sm: {                fieldset: 'gap-0.5',                legend: 'text-xs',                base: 'size-3.5',                item: 'text-xs',                container: 'h-4',                indicator: 'after:size-1'              },              md: {                fieldset: 'gap-1',                legend: 'text-sm',                base: 'size-4',                item: 'text-sm',                container: 'h-5',                indicator: 'after:size-1.5'              },              lg: {                fieldset: 'gap-1',                legend: 'text-sm',                base: 'size-4.5',                item: 'text-sm',                container: 'h-5',                indicator: 'after:size-1.5'              },              xl: {                fieldset: 'gap-1.5',                legend: 'text-base',                base: 'size-5',                item: 'text-base',                container: 'h-6',                indicator: 'after:size-2'              }            },            disabled: {              true: {                base: 'cursor-not-allowed opacity-75',                label: 'cursor-not-allowed opacity-75'              }            },            required: {              true: {                legend: "after:content-['*'] after:ms-0.5 after:text-(--ui-error)"              }            }          },          defaultVariants: {            size: 'md',            color: 'primary'          }        }      }    })  ]})
vite.config.ts
import { defineConfig } from 'vite'import vuefrom '@vitejs/plugin-vue'import uiProfrom '@nuxt/ui-pro/vite'export default defineConfig({  plugins: [    vue(),    uiPro({      ui: {        radioGroup: {          slots: {            root: 'relative',            fieldset: 'flex',            legend: 'mb-1 block font-medium text-(--ui-text)',            item: 'flex items-start',            base: 'rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2',            indicator: 'flex items-center justify-center size-full rounded-full after:bg-(--ui-bg) after:rounded-full',            container: 'flex items-center',            wrapper: 'ms-2',            label: 'block font-medium text-(--ui-text)',            description: 'text-(--ui-text-muted)'          },          variants: {            color: {              primary: {                base: 'focus-visible:outline-(--ui-primary)',                indicator: 'bg-(--ui-primary)'              },              secondary: {                base: 'focus-visible:outline-(--ui-secondary)',                indicator: 'bg-(--ui-secondary)'              },              success: {                base: 'focus-visible:outline-(--ui-success)',                indicator: 'bg-(--ui-success)'              },              info: {                base: 'focus-visible:outline-(--ui-info)',                indicator: 'bg-(--ui-info)'              },              warning: {                base: 'focus-visible:outline-(--ui-warning)',                indicator: 'bg-(--ui-warning)'              },              error: {                base: 'focus-visible:outline-(--ui-error)',                indicator: 'bg-(--ui-error)'              },              neutral: {                base: 'focus-visible:outline-(--ui-border-inverted)',                indicator: 'bg-(--ui-bg-inverted)'              }            },            orientation: {              horizontal: {                fieldset: 'flex-row',                wrapper: 'me-2'              },              vertical: {                fieldset: 'flex-col'              }            },            size: {              xs: {                fieldset: 'gap-0.5',                legend: 'text-xs',                base: 'size-3',                item: 'text-xs',                container: 'h-4',                indicator: 'after:size-1'              },              sm: {                fieldset: 'gap-0.5',                legend: 'text-xs',                base: 'size-3.5',                item: 'text-xs',                container: 'h-4',                indicator: 'after:size-1'              },              md: {                fieldset: 'gap-1',                legend: 'text-sm',                base: 'size-4',                item: 'text-sm',                container: 'h-5',                indicator: 'after:size-1.5'              },              lg: {                fieldset: 'gap-1',                legend: 'text-sm',                base: 'size-4.5',                item: 'text-sm',                container: 'h-5',                indicator: 'after:size-1.5'              },              xl: {                fieldset: 'gap-1.5',                legend: 'text-base',                base: 'size-5',                item: 'text-base',                container: 'h-6',                indicator: 'after:size-2'              }            },            disabled: {              true: {                base: 'cursor-not-allowed opacity-75',                label: 'cursor-not-allowed opacity-75'              }            },            required: {              true: {                legend: "after:content-['*'] after:ms-0.5 after:text-(--ui-error)"              }            }          },          defaultVariants: {            size: 'md',            color: 'primary'          }        }      }    })  ]})
[8]ページ先頭
©2009-2025 Movatter.jp