RadioGroup

Single choice with arrow-key navigation from Reka. The dot springs in and a ring ripples once when an option is checked. Options accept descriptions and per-option disabled.

Preview

Open in the playground

Usage

RadioGroupExample.vueVue / TS

<script setup lang="ts">
import { ref } from 'vue'
import { FzRadioGroup } from '@chrisdalbano/forza-ui'
const lane = ref<string>('top')
const options = [
  { value: 'top', label: 'Top' },
  { value: 'mid', label: 'Mid' },
]
</script>

<template>
  <FzRadioGroup v-model="lane" label="Lane" :options="options" />
</template>

TypeScript exampleSource you can use.

Import the shared stylesheet once and wrap your app in .fz-theme. See installation.

Props

Name	Type	Required	Default
label	string	Yes	None
options	readonly ForzaOption[]	Yes	None
orientation	"vertical" | "horizontal" | undefined	No	"vertical"
disabled	boolean | undefined	No	None
name	string | undefined	No	None
modelValue	string	Yes	None

Events and state

v-model (string) holds the checked value

• update:modelValue: [value: string]

Slots

none

Add from source

forza add radiogroup

Set up the CLI first. Generated API tables come from the Vue source, using Vue Language Tools.