RadioGroup

A radio group is a single value. The group holds it — along with name, the disabled state, the validation state and the error — and each Radio only contributes the value it stands for. That is why is-read-only, is-required and is-invalid are group props and not radio props: they describe the choice, not one of the options.

import { Radio, RadioGroup } from "ropav";

Plan

Free

Premium

variant

 primarysecondary

orientation

 horizontalvertical

isDisabled

<RadioGroup default-value="premium" name="plan">
  <Label>Plan</Label>
  <Radio value="free">
    <RadioContent>
      <RadioControl>
        <RadioIndicator />
      </RadioControl>
      Free
    </RadioContent>
  </Radio>
  <Radio value="premium">
    <RadioContent>
      <RadioControl>
        <RadioIndicator />
      </RadioControl>
      Premium
    </RadioContent>
  </Radio>
</RadioGroup>

A labelled group

PlanChange it whenever you like.

Free

Premium

Team

radio-group-basic.vue

<script setup lang="ts">
import {
  Description,
  Label,
  Radio,
  RadioContent,
  RadioControl,
  RadioGroup,
  RadioIndicator,
} from "ropav";

const plans = [
  { id: "free", label: "Free" },
  { id: "premium", label: "Premium" },
  { id: "team", label: "Team" },
];
</script>

<template>
  <RadioGroup default-value="premium" name="plan">
    <Label>Plan</Label>
    <Description>Change it whenever you like.</Description>

    <Radio v-for="plan in plans" :key="plan.id" :value="plan.id">
      <RadioContent>
        <RadioControl>
          <RadioIndicator />
        </RadioControl>
        {{ plan.label }}
      </RadioContent>
    </Radio>
  </RadioGroup>
</template>

is-disabled on a single Radio takes just that option out while the rest of the group stays usable.

Accessibility

• Arrow keys move between the options and select as they go, which is what a radio group does natively — the group is one tab stop, not one per option.
• The Label inside the group names the whole set, so a screen reader reads "Plan, Premium, 2 of 3" rather than the option on its own.
• More than about five options, or options that need describing, and a Select is the better control.

API

Prop	Type	Default	Description
ariaDescribedby	string	—	Ids of the elements that describe the group, on top of any nested help text.
ariaLabel	string	—	Accessible name, for a group with no visible label.
ariaLabelledby	string	—	Ids of the elements that name the group.
defaultValue	string | null	—	Value selected to begin with, when the group is uncontrolled.
form	string	—	id of the form to submit with, for a group rendered outside it.
isDisabled	boolean	—	Disables every radio in the group.
isInvalid	boolean	—	Whether the group fails validation. Setting it either way takes the group over: false claims it is valid and shadows validate, the browser and the server alike.
isReadOnly	boolean	—	Lets the group be read but not changed.
isRequired	boolean	—	Whether one of the radios has to be selected for the form to submit.
name	string	—	Name every radio submits under, and the key server errors arrive on. Generated if unset.
orientation	"horizontal" | "vertical"	"vertical"	Layout, and the axis the arrow keys walk.
validate	ValidationFunction<string | null>	—	Checks the selected value and returns a message when it is not acceptable.
validationBehavior	"aria" | "native"	"native"	How the group reports validation. Inherited from the surrounding form when unset.
value	string | null	—	Selected value. Makes the group controlled.
variant	"primary" | "secondary"	"primary"	Visual variant.

The default slot receives:

Slot prop	Type
isDisabled	boolean
isInvalid	boolean
isReadOnly	boolean
isRequired	boolean
selectedValue	string | null

Event	Payload
change	string | null
update:value	string | null

Radio and its parts come from the same import and are documented here because a group is the only place they appear.

Radio

Prop	Type	Default	Description
ariaDescribedby	string	—	Ids of the elements that describe the radio, on top of any nested help text.
ariaLabel	string	—	Accessible name, for a radio with no visible label.
ariaLabelledby	string	—	Ids of the elements that name the radio.
id	string	—	Lands on the hidden input rather than on the wrapper, because the input is the radio as far as assistive technology is concerned.
isDisabled	boolean	—	Disables this radio while the rest of the group stays usable. Read-only, required and invalid are not per-radio: the group holds them, matching React.
value*	string	—	Value this radio contributes to the group's selection. Required.

The default slot receives:

Slot prop	Type
isDisabled	boolean
isInvalid	boolean
isReadOnly	boolean
isRequired	boolean
isSelected	boolean

RadioContent

The default slot receives:

Slot prop	Type
isDisabled	boolean
isFocused	boolean
isFocusVisible	boolean
isHovered	boolean
isInvalid	boolean
isPressed	boolean
isReadOnly	boolean
isRequired	boolean
isSelected	boolean

RadioControl

Slots: default.

RadioIndicator

The default slot receives:

Slot prop	Type
isDisabled	boolean
isInvalid	boolean
isReadOnly	boolean
isRequired	boolean
isSelected	boolean