RadioGroup

Native radios

One choice out of a few (up to about six) that should all be visible at once. More than that, or when space is short: Select. A single on/off is a Switch or Checkbox, not two radios.

Basic

Main heroine

加藤恵the flat one英梨々詩羽美智留

Main heroine (short)

恵英梨々詩羽

<script setup lang="ts">
import { ref } from "vue";
import { BlessRadio, BlessRadioGroup } from "blessing-ui";
const heroine = ref("megumi");
</script>

<template>
  <div class="row" style="align-items: flex-start">
    <BlessRadioGroup v-model="heroine" label="Main heroine">
      <BlessRadio value="megumi" description="the flat one">加藤恵</BlessRadio>
      <BlessRadio value="eriri">英梨々</BlessRadio>
      <BlessRadio value="utaha">詩羽</BlessRadio>
      <BlessRadio value="michiru" disabled>美智留</BlessRadio>
    </BlessRadioGroup>
    <BlessRadioGroup v-model="heroine" label="Main heroine (short)" orientation="horizontal">
      <BlessRadio value="megumi">恵</BlessRadio>
      <BlessRadio value="eriri">英梨々</BlessRadio>
      <BlessRadio value="utaha">詩羽</BlessRadio>
    </BlessRadioGroup>
  </div>
</template>

• Native radios in a fieldset: arrow keys move and select, Tab leaves the group. label is the legend.
• Inside a Field the field's label names the group (each radio keeps its own), and the field's error reaches it.
• description on a radio adds a line under its label; orientation="horizontal" for short labels.

Usage

import { BlessRadioGroup, BlessRadio } from "blessing-ui";

API

BlessRadioGroup

Props

Name	Type	Default	Description
id	string	—
name	string	—
label	string	—
orientation	"horizontal" | "vertical"	"vertical"
disabled	boolean	—
invalid	boolean	—
modelValue	T	—

Events

Name	Payload	Description
update:modelValue	[value: T | undefined]

Slots

Name	Scope	Description
label	—
default	—

BlessRadio

Props

Name	Type	Default	Description
value*	string | number	—
id	string	—
disabled	boolean	—
description	string	—

Slots

Name	Scope	Description
default	—