Vaadin WC API reference

RadioButton

View as MD

Description

<vaadin-radio-button> is a web component representing a choice in a radio group. Only one radio button in the group can be selected at the same time.

<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
radio The wrapper element that contains slotted <input type="radio">.

The following state attributes are available for styling:

Attribute Description Part name
active Set when the radio button is pressed down, either with a pointer or the keyboard. :host
disabled Set when the radio button is disabled. :host
focus-ring Set when the radio button is focused using the keyboard. :host
focused Set when the radio button is focused. :host
checked Set when the radio button is checked. :host
has-label Set when the radio button has a label. :host

See Styling Components documentation.

Properties

autofocus

Type: boolean

Specify that this control should have input focus when the page loads.

checked

Type: boolean

True if the element is checked.

disabled

Type: boolean

If true, the user cannot interact with this element.

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.

name

Type: string

The name of the radio button.

value

Type: string

The value of the field.

Methods

clear

Type: () => void

Clear the value of the field.

Events

checked-changed

Type: RadioButtonCheckedChangedEvent

Fired when the checked property changes.

value-changed

Type: CustomEvent

Fired when the value property changes.

Types

RadioButtonCheckedChangedEvent 

/**
 * Fired when the `checked` property changes.
 */
export type RadioButtonCheckedChangedEvent = CustomEvent<{ value: boolean }>;