RadioGroup
Description
<vaadin-radio-group> is a web component that allows the user to choose one item from a group of choices.
<vaadin-radio-group label="Travel class">
<vaadin-radio-button value="economy" label="Economy"></vaadin-radio-button>
<vaadin-radio-button value="business" label="Business"></vaadin-radio-button>
<vaadin-radio-button value="firstClass" label="First Class"></vaadin-radio-button>
</vaadin-radio-group>Styling
The following shadow DOM parts are available for styling:
| Part name | Description |
|---|---|
label |
The slotted label element wrapper |
group-field |
The radio button elements wrapper |
helper-text |
The slotted helper text element wrapper |
error-message |
The slotted error message element wrapper |
required-indicator |
The required state indicator element |
The following state attributes are available for styling:
| Attribute | Description |
|---|---|
disabled |
Set when the element is disabled |
readonly |
Set when the element is readonly |
invalid |
Set when the element is invalid |
focused |
Set when the element is focused |
has-label |
Set when the element has a label |
has-value |
Set when the element has a value |
has-helper |
Set when the element has helper text |
has-error-message |
Set when the element has an error message |
See Styling Components documentation.
Properties
accessibleName
Type: string | null | undefined
String used to label the component to screen reader users.
accessibleNameRef
Type: string | null | undefined
Id of the element used as label of the component to screen reader users.
disabled
Type: boolean
If true, the user cannot interact with this element.
errorMessage
Type: string | null | undefined
Error to show when the field is invalid.
helperText
Type: string | null | undefined
String used for the helper text.
invalid
Type: boolean
Set to true when the field is invalid.
label
Type: string | null | undefined
The label text for the input node. When no light dom defined via [slot=label], this value will be used.
manualValidation
Type: boolean
Set to true to enable manual validation mode. This mode disables automatic
constraint validation, allowing you to control the validation process yourself.
You can still trigger constraint validation manually with the validate() method
or use checkValidity() to assess the component's validity without affecting
the invalid state. In manual validation mode, you can also manipulate
the invalid property directly through your application logic without conflicts
with the component's internal validation.
name
Type: string | null | undefined
The name of the control, which is submitted with the form data.
readonly
Type: boolean
When present, the user cannot modify the value of the radio group.
The property works similarly to the disabled property.
While the disabled property disables all radio buttons inside the group,
the readonly property disables only unchecked ones.
required
Type: boolean
Specifies that the user must fill in a value.
value
Type: string | null | undefined
The value of the radio group.
Methods
checkValidity
Type: () => boolean
Returns true if the field value satisfies all constraints (if any).
validate
Type: () => boolean
Validates the field and sets the invalid property based on the result.
The method fires a validated event with the result of the validation.
Events
invalid-changed
Type: RadioGroupInvalidChangedEvent
Fired when the invalid property changes.
validated
Type: RadioGroupValidatedEvent
Fired whenever the field is validated.
value-changed
Type: RadioGroupValueChangedEvent
Fired when the value property changes.
Types
RadioGroupInvalidChangedEvent
/**
* Fired when the `invalid` property changes.
*/
export type RadioGroupInvalidChangedEvent = CustomEvent<{ value: boolean }>;RadioGroupValidatedEvent
/**
* Fired whenever the field is validated.
*/
export type RadioGroupValidatedEvent = CustomEvent<{ valid: boolean }>;RadioGroupValueChangedEvent
/**
* Fired when the `value` property changes.
*/
export type RadioGroupValueChangedEvent = CustomEvent<{ value: string }>;