Implement radio group component

[ezhangy]

Implement the radio group component as a Stencil web component.

Link to component design in Figma.

Note: This issue only covers both the implementation of the individual button (i.e. a single <input> element) and the component (i.e. a <fieldset> element containing multiple <njwds-radio> elements).

Radio

Properties

Property	Type	Default	Notes
inputId	string	null	sets the internal <input> element's id attribute
value	string	null	sets the internal <input> element's value attribute

Slots

Slot	Description
default slot	The label of the radio

Radio Group

Properties

Property	Type	Default	Notes
name	string	null	the name associated with the radio group
tile	boolean	false	whether the radio group should display as the tile variant
defaultValue	string	null	the default value that should be checked
required	boolean	false	A value must be checked for the form to be submittable

Slots

Slot	Description
default slot	<njwds-radio> elements that should be part of the group
legend	The legend for the radio group (rendered inside a <legend> element)

Questions

• Are there any other properties, especially ARIA attributes, that we should include?
• Are there any events that should be emitted by the component? (The Shoelace implementation emits an event for when the control gains/loses focus)
• Should we provide the checked or required attribute? Or should this be handled by the radio group component instead?

Tasks

Beta Give feedback

1. Implement web component
2. Conduct design review
3. If needed, revise component based on design review
4. Add end-to-end tests for the web component
5. Add component docs to GitHub