PandaGo Components

Appearance

Return to top
On this page

Radio

Usage

We call radio button to the interactive components in which the user will be able to select a single option by clicking on the desired option.

	The selection is: {
  "name": "Someone",
  "otherAttribute": "???"
}

Props

ComponentSkin skinIndicates which skin should be used for the component Default value: ComponentSkin.DESIGN_SYSTEM
pandads
any v-modelTwo way binding of the radio value. If it is an array, it will be filled with the value prop.
any valueThe intrinsic value of the radio.
boolean allowDeselectIndicates if the radio button can be deselected Default value: false
boolean hasErrorIndicates if there is an error with the input validation Default value: false
boolean isDisabledIndicates if the radio is disabled. (DEPRECATED) Default value: false

WARNING

The isDisabled prop has been kept for backwards compatibility, but it is deprecated and will be removed in the future.

Instead, use the disabled attribute.

Options

Make it disabledDisable the input to not allow user interaction

Slots

defaultThe content at the right of the radio

Implementation details

The component is an actual radio input, so it can be used in a form as a normal HTML element.

Here, properties like disabled, required and readonly are passed to the input element via the v-bind="$attrs".

Also, the input uses the stringify version of the modelValue and value props to compare them and see if it is selected or not, so it can be used with objects.

template
<input
	:id="JSON.stringify(modelValue)"
	ref="input"
	type="radio"
	v-bind="$attrs"
	:checked="JSON.stringify(modelValue) === JSON.stringify(value)"
	:disabled="isDisabled || $attrs.disabled"
>

WARNING

The isDisabled prop has been kept for backwards compatibility, but it is deprecated and will be removed in the future.

Instead, use the disabled attribute.

Type declarations

ComponentSkin

ts
export enum ComponentSkin {
	PANDA = 'panda',
	DESIGN_SYSTEM = 'ds',
}