Radio Button
- Usage
- Styling
CSS Selectors
The following CSS selectors can be used in stylesheets to target the various parts and states of the component.
Radio Button
- Root element
-
vaadin-radio-button
- Focused
-
vaadin-radio-button
[focused] - Keyboard focused
-
vaadin-radio-button
[focus-ring] - Disabled
-
vaadin-radio-button
[disabled] - Hovered
-
vaadin-radio-button
:hover - Pressed
-
vaadin-radio-button
[active] - Selected
-
vaadin-radio-button
[checked] - Indeterminate
-
vaadin-radio-button
[indeterminate] - Radio ring
-
vaadin-radio-button
::part(radio) - Selection dot
-
vaadin-radio-button
::part(radio)::after - Label
-
vaadin-radio-button
> label
Radio Button Group
- Root element
-
vaadin-radio-group
States
- Focused
-
vaadin-radio-group
[focused] - Keyboard focused
-
vaadin-radio-group
[focus-ring] - Disabled
-
vaadin-radio-group
[disabled] - Hovered
-
vaadin-radio-group
:hover - Has selection
-
vaadin-radio-group
[has-value]
Parts
- Radio button wrapper
-
vaadin-radio-group
::part(group-field) - Radio buttons
-
vaadin-radio-group
> vaadin-radio-button
Label
- Radio group with label
-
vaadin-radio-group
[has-label] - Label
-
vaadin-radio-group
::part(label) - Label text
-
vaadin-radio-group
> label - Required indicator
-
vaadin-radio-group
::part(required-indicator)
Helper and Validation Error
- Field with helper
-
vaadin-radio-group
[has-helper] - Helper
-
vaadin-radio-group
::part(helper-text) - Helper text
-
vaadin-radio-group
> [slot="helper"] - Invalid field
-
vaadin-radio-group
[invalid] - Error message
-
vaadin-radio-group
::part(error-message) - Error message text
-
vaadin-radio-group
> [slot="error-message"]