Radio

The input element with a type attribute whose value is "text" represents a one-line plain text edit control for the input element’s value.

Examples

Radio

Code

<script setup lang="ts">
import { ref } from 'vue'
import { BaseRadio } from '@point-hub/papp'

const options = [
  {
    label: 'Label 1',
    value: 'Value 1'
  },
  {
    label: 'Label 2',
    value: 'Value 2'
  },
  {
    label: 'Label 3',
    value: 'Value 3'
  }
]

const selected = ref()
</script>

<template>
  <form @submit.prevent="">
    <component :is="BaseRadio" name="radio-option" :options="options" v-model="selected" />
  </form>
</template>

Label

Code

<script setup lang="ts">
import { ref } from 'vue'
import { BaseRadio } from '@point-hub/papp'

const options = [
  {
    label: 'Label 1',
    value: 'Value 1'
  },
  {
    label: 'Label 2',
    value: 'Value 2'
  },
  {
    label: 'Label 3',
    value: 'Value 3'
  }
]

const form = ref({
  selected1: null,
  selected2: null
})
</script>

<template>
  <form @submit.prevent="">
    <component
      :is="BaseRadio"
      :options="options"
      v-model="form.selected1"
      label="Label"
      description="Vertical Layout"
      layout="vertical"
    />
    <component
      :is="BaseRadio"
      :options="options"
      v-model="form.selected2"
      label="Label"
      description="Horizontal Layout"
      layout="horizontal"
    />
  </form>
</template>

Helper

Code

<script setup lang="ts">
import { ref } from 'vue'
import { BaseRadio } from '@point-hub/papp'

const options = [
  {
    label: 'Label 1',
    value: 'Value 1'
  },
  {
    label: 'Label 2',
    value: 'Value 2'
  },
  {
    label: 'Label 3',
    value: 'Value 3'
  }
]

const form = ref({
  selected1: null,
  selected2: null,
  selected3: null,
  selected4: null,
  selected5: options[0]
})

const errors = ref(['Error Example'])
</script>

<template>
  <form @submit.prevent="">
    <component :is="BaseRadio" :options="options" v-model="form.selected1" label="Label" required />
    <component
      :is="BaseRadio"
      :options="options"
      v-model="form.selected2"
      label="Label"
      description="Description example"
    />
    <component
      :is="BaseRadio"
      :options="options"
      v-model="form.selected3"
      label="Label"
      :helpers="['Helper example']"
    />
    <component
      :is="BaseRadio"
      :options="options"
      v-model="form.selected4"
      label="Label"
      v-model:errors="errors"
    />
    <component
      :is="BaseRadio"
      :options="options"
      v-model="form.selected5"
      label="Label"
      description="Disabled"
      disabled
    />
  </form>
</template>

Using Slot

Code

<script setup lang="ts">
import { ref } from 'vue'
import { BaseRadio } from '@point-hub/papp'
const options = [
  {
    name: 'Startup',
    ram: '12GB',
    cpus: '6 CPUs',
    disk: '160 GB SSD disk'
  },
  {
    name: 'Business',
    ram: '16GB',
    cpus: '8 CPUs',
    disk: '512 GB SSD disk'
  },
  {
    name: 'Enterprise',
    ram: '32GB',
    cpus: '12 CPUs',
    disk: '1024 GB SSD disk'
  }
]

const selected = ref()
</script>

<template>
  <form @submit.prevent="">
    <component
      :is="BaseRadio"
      v-model="selected"
      :options="options"
      label="Label"
      layout="horizontal"
    >
      <template v-slot="{ checked, option }">
        <div class="w-full cursor-pointer">
          <div
            :class="[
              checked
                ? 'bg-blue-700 border-blue-700 text-white '
                : 'bg-white dark:bg-slate-700 dark:text-white text-slate-900 dark:border-slate-600'
            ]"
            class="border rounded p-4"
          >
            <div class="w-full flex space-x-4 items-center justify-between">
              <div class="flex flex-col">
                <div class="text-base font-semibold">{{ option.name }}</div>
                <div class="text-sm font-light">
                  {{ option.cpus }} - {{ option.ram }} - {{ option.disk }}
                </div>
              </div>
              <div v-show="checked" class="shrink-0 text-white">
                <base-icon icon="i-fas-circle-check" />
              </div>
            </div>
          </div>
        </div>
      </template>
    </component>
  </form>
</template>

Input API

Types

export type BaseFormLayoutType = 'vertical' | 'horizontal'
export type BaseRadioOptionsLayout = 'vertical' | 'horizontal'

Props

Name	Type	Default	Description
v-model	Record<string, any> string number boolean null undefined		v-model is required.
v-model:errors	string[]		Input error message.
id	string		Input id.
label	string		Input label.
description	string		Input description.
layout	BaseFormLayoutType	vertical	Input layout.
optionsLayout	BaseRadioOptionsLayout	vertical	Input layout.
required	boolean	false	if true input is required.
disabled	boolean	false	if true input is disabled.
helpers	string[]		Input helper message.
options	Record<string, any>[]		Options to choose.

Slot

#default slot for rendering custom option