Radio

The radio input type is used for single-choice selection from a predefined list of options. It displays a group of radio buttons where only one option can be selected at a time.

<template>
    <VsInputRadio v-model="radioValue" :options="options" />
</template>
<script setup>
import { ref } from 'vue'
import { VsInputRadio } from '@opengis/form'

const radioValue = ref('');
const options = [
  { id: 'option1', text: 'Option 1' },
  { id: 'option2', text: 'Option 2' }
];
</script>

MaleFemaleOther

Basic Radio Input

<VsInputRadio v-model="radioValue" :options="options" />

{
  name: 'gender',
  type: 'radio',
  label: 'Gender',
  options: [
    { id: 'male', text: 'Male' },
    { id: 'female', text: 'Female' },
    { id: 'other', text: 'Other' }
  ]
}

BeginnerIntermediateAdvanced

Horizontal Layout

<VsInputRadio v-model="radioValue" :options="options" position="horizontal" />

{
  name: 'experience',
  type: 'radio',
  label: 'Experience Level',
  options: [
    { id: 'beginner', text: 'Beginner' },
    { id: 'intermediate', text: 'Intermediate' },
    { id: 'advanced', text: 'Advanced' }
  ],
  position: 'horizontal'
}

Free PlanBasic PlanPremium Plan

Properties

Required Properties

• name (string): Unique identifier for the field
• type (string): Must be 'radio'
• label (string): Display label for the field
• options (array): Array of option objects

Optional Properties

• placeholder (string): Hint text shown when field is empty
• position (string): Layout direction - 'vertical' (default) or 'horizontal'
• view (string): Display style - 'default' or 'buttons'
• disabled (boolean): Whether the field is disabled
• rules (array): Validation rules
• conditions (object): Conditional display logic

Option Object Structure

interface IOption {
  id: number | string;
  text: string;
  color?: string;
}

Schema Interface

interface RadioSchemaItem {
  name: string;
  type: 'radio';
  label: string;
  options: IOption[];
  position?: 'vertical' | 'horizontal';
  view?: 'default' | 'buttons';
  disabled?: boolean;
  rules?: (string | object)[];
  conditions?: Conditions | Conditions[];
}

Best Practices

1. Use descriptive option text that clearly explains each choice
2. Keep options concise but informative
3. Use horizontal layout for 3-4 options to save space
4. Use vertical layout for longer option lists
5. Provide a default selection when appropriate
6. Group related options logically
7. Use consistent naming for option IDs
8. Consider accessibility with clear labels and descriptions