Vivid Logo Vivid

Radio Group

A radio group is a collection of Radio buttons where only one choice can be selected.

Usage

import { registerRadio, registerRadioGroup } from '@vonage/vivid';

registerRadio('your-prefix');
registerRadioGroup('your-prefix');

Value

Use the value attribute to set the Radio's value.

Required

Use the required attribute to set define whether a response to the Radio Group must be provided in order to submit a form.

Below, the Radio Field is marked as required and is validated when the form is submitted.

Slots

Helper Text Slot

Use the helper-text slot on Radio Group to add rich text to provide additional context to the user.

Methods

Check Validity

You can use the checkValidity() method on one of the Radio's to validate it. Below, the Radio Group is required but it has no checked options. checkValidity was called which triggered the validation.

API Reference

radio-group

Properties

Property Type Default Description
disabled boolean Whether the input element is disabled
errorText string
helperText string Provides additional information to help the user enter the correct information. To add HTML to the helper text, use the helper-text slot instead.
label string Label of the the Radio Group
name string The name of the radio group. Setting this value will set the name value for all child radio elements.
orientation 'horizontal' | 'vertical' Sets axis on which the tabs are aligned
readOnly boolean When true, the child radios will be immutable by user interaction. See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly | readonly HTML attribute for more information.
required boolean Sets the required state
value
(modelValue)		 string The value of the checked radio
Property Type Default Description
disabled boolean Whether the input element is disabled
error-text string
helper-text string Provides additional information to help the user enter the correct information. To add HTML to the helper text, use the helper-text slot instead.
label string Label of the the Radio Group
name string The name of the radio group. Setting this value will set the name value for all child radio elements.
orientation 'horizontal' | 'vertical' Sets axis on which the tabs are aligned
readonly boolean When true, the child radios will be immutable by user interaction. See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly | readonly HTML attribute for more information.
required boolean Sets the required state
value string The value of the checked radio

Slots

Name Description
default Default slot.
helper-text Describes how to use the text-field. Alternative to the `helper-text` attribute.
Name Description
default Default slot.
helper-text Describes how to use the text-field. Alternative to the `helper-text` attribute.

Events

Event Type Description
blur FocusEvent Fires when the element loses focus.
change CustomEvent<undefined> Fires a custom 'change' event when the value changes
click MouseEvent Fires when a pointing device button (such as a mouse's primary mouse button) is both pressed and released while the pointer is located inside the element.
focus FocusEvent Fires when the element receives focus.
input Event Fires when the value of an element has been changed.
keydown KeyboardEvent Fires when a key is pressed.
keyup KeyboardEvent Fires when a key is released.
update:modelValue string Fires when the modelValue value changes
Name Type Description
blur FocusEvent Fires when the element loses focus.
change CustomEvent<undefined> Fires a custom 'change' event when the value changes
click MouseEvent Fires when a pointing device button (such as a mouse's primary mouse button) is both pressed and released while the pointer is located inside the element.
focus FocusEvent Fires when the element receives focus.
input Event Fires when the value of an element has been changed.
keydown KeyboardEvent Fires when a key is pressed.
keyup KeyboardEvent Fires when a key is released.

Methods

Name Params Returns Description
nameChanged void

radio

Properties

Property Type Default Description
checked boolean The current checkedness of the element.
connotation 'accent' | 'cta' The connotation the radioButton should have.
defaultChecked boolean The default checkedness of the element. This value sets the `checked` property only when the `checked` property has not been explicitly set.
disabled boolean Sets the element's disabled state. A disabled element will not be included during form submission.
errorText string Provides a custom error message. Any current error state will be overridden.
initialValue string The default value of the element. This value sets the `value` property only when the `value` property has not been explicitly set.
label string The label for the form element.
name string The name of the element. This element's value will be surfaced during form submission under the provided name.
readOnly boolean When true, the control will be immutable by user interaction. See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly | readonly HTML attribute for more information.
required boolean Require the field to be completed prior to form submission.
value string The current value of the element.
Property Type Default Description
current-checked boolean The current checkedness of the element.
connotation 'accent' | 'cta' The connotation the radioButton should have.
checked boolean The default checkedness of the element. This value sets the `checked` property only when the `checked` property has not been explicitly set.
disabled boolean Sets the element's disabled state. A disabled element will not be included during form submission.
error-text string Provides a custom error message. Any current error state will be overridden.
value string The default value of the element. This value sets the `value` property only when the `value` property has not been explicitly set.
label string The label for the form element.
name string The name of the element. This element's value will be surfaced during form submission under the provided name.
readonly boolean When true, the control will be immutable by user interaction. See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly | readonly HTML attribute for more information.
required boolean Require the field to be completed prior to form submission.
current-value string The current value of the element.

Events

Event Type Description
blur FocusEvent Fires when the element loses focus.
change CustomEvent<undefined> Fires a custom 'change' event when the value changes
click MouseEvent Fires when a pointing device button (such as a mouse's primary mouse button) is both pressed and released while the pointer is located inside the element.
focus FocusEvent Fires when the element receives focus.
input Event Fires when the value of an element has been changed.
keydown KeyboardEvent Fires when a key is pressed.
keyup KeyboardEvent Fires when a key is released.
Name Type Description
blur FocusEvent Fires when the element loses focus.
change CustomEvent<undefined> Fires a custom 'change' event when the value changes
click MouseEvent Fires when a pointing device button (such as a mouse's primary mouse button) is both pressed and released while the pointer is located inside the element.
focus FocusEvent Fires when the element receives focus.
input Event Fires when the value of an element has been changed.
keydown KeyboardEvent Fires when a key is pressed.
keyup KeyboardEvent Fires when a key is released.

Methods

Name Params Returns Description
checkValidity boolean Return the current validity of the element.
reportValidity boolean Return the current validity of the element. If false, fires an invalid event at the element.