BwRadioGroup | bw-radio-group

Overview

Radio Groups are form controls that allow the user to select a single options from a list of radio buttons. BwRadio's, BwRadioCards, and BwRadioButtons are all valid children of a BwRadioGroup.

Usage

Variants

OneTwoThreeOneTwoThreeOneTwoThreeOneTwoThree

<bw-radio-group label="Basic Example">
  <bw-radio value="one">One</bw-radio>
  <bw-radio value="two">Two</bw-radio>
  <bw-radio value="three">Three</bw-radio>
</bw-radio-group>
<bw-radio-group required="true" label="Required Group">
  <bw-radio large value="one">One</bw-radio>
  <bw-radio large disabled value="two">Two</bw-radio>
  <bw-radio large value="three">Three</bw-radio>
</bw-radio-group>
<bw-radio-group required="true" label="Group With Buttons">
  <bw-radio-button value="one">One</bw-radio-button>
  <bw-radio-button value="two">Two</bw-radio-button>
  <bw-radio-button value="three">Three</bw-radio-button>
</bw-radio-group>
<bw-radio-group required="true" label="Group With Cards">
  <bw-radio-card value="one">One</bw-radio-card>
  <bw-radio-card value="two">Two</bw-radio-card>
  <bw-radio-card value="three">Three</bw-radio-card>
</bw-radio-group>

Properties

Property	Attribute	Description	Type	Default
error	error	Shows an error icon. If a string is passed in, it will render the icon as a tooltip. Has no effect on form validation	any	undefined
horizontal	horizontal	Radios will be aligned horizontally	boolean	false
label	label	Label that shows above the controls	string	undefined
note	note	Informative text that shows below the control	string	undefined
originalValue	original-value	The value the control will reset to. Defaults to the initial value if not set.	any	undefined
pending	pending	Shows a loading indicator	boolean	false
required	required	Makes the element required in forms and will show an error on submission	boolean	false
success	success	Shows a success icon. Has no effect on form validation	boolean	false
value	value	The currently selected value	any	undefined

Events

Event	Description	Type
valueChange	Emits the selected value whenever it changes	CustomEvent<any>

Methods

checkValidity() => Promise<boolean>

Checks the validity of the radio group

Returns

Type: Promise<boolean>

true if the radio group is valid, false otherwise

getCustomError() => Promise<string>

Gets the custom validity of the radio group

Returns

Type: Promise<string>

The custom validity of the radio group

reportValidity() => Promise<boolean>

Reports the validity of the radio group

Returns

Type: Promise<boolean>

true if the radio group is valid, false otherwise

setCustomValidity(message: string | null) => Promise<void>

Sets the custom validity of the radio group

Parameters

Name	Type	Description
message	string	- The message to set the custom validity to

Returns

Type: Promise<void>

Slots

Slot	Description
"label"	The label of the radio group
"note"	The note of the radio group

Shadow Parts

Part	Description
"horizontal-container"	The container of the radio group when horizontal is true
"status"	The container for the status icon and text

CSS Custom Properties

Name	Description
--horizontal-gap	The gap between the radio buttons when horizontal is true

Dependencies

Depends on

• bw-loading
• bw-color
• bw-icon
• bw-tooltip
• bw-label
• bw-note

Graph

---

© 2025 United Systems & Software - All Rights Reserved.